How to refresh jQuery mobile page?

Jquery-Mobile: How to refresh the internal page when you click on the button

• I implemented the navigation from one page( page_1 ) to another page( page_2) when you click on the button.These are internal pages. But i want to force reload the page_2 when you click on the button(means when you come back from the page_2 to page_1 and once again click on the button for navigating to page_2 at this time i want to refresh the page). How to implement this. I used the following code but it's not working.Please can anybody help me. Updated <div data-role="header" data-theme="b" data-position="fixed"> <h1>Food_Exercise</h1> </div> <div data-role="content"> <div id="FItem1" data-role="fieldcontain" onclick="food_selection(this)">Select Food item</div> </div> </div> < script type="text/javascript"> function food_selection(ofoodsel) { $("#Food_Items").trigger( "create" ); $.mobile.changePage($("#Food_Items"), {transition: "pop"}); } < /script> <!-- Food Screen --> <div data-role="page" id="Food_Items"> <div data-role="header" data-theme="b" data-position="fixed"> <a data-role="button" data-rel="back" data-icon="back">back</a> <h1>Food Items</h1> </div> <div data-role="content"> <form> <div> <select id="choice" name="choice" onchange="setFoodItemQty(this,Item_Qty)" size="1" > <option selected="selected">Select Food Items</option> <script type="application/javascript"> setFoodItem(this); </script> </select> <select id="Item_Qty" name="Item_Qty" disabled="disabled" size="1" onchange="setItemCal(choice,this)" ></select> <div id="Food_Calories" data-role="fieldcontain"></div> </div> </form> <a onclick="display_food()" data-role="button">Submit</a> </div> </div> < !-- Food Script --> < script type="text/javascript"> var foodItems = Object(); //Food foodItems['Cooked rice'] = '1cup( 100gms )|2cups( 200gms )|3cups( 300gms )|4cups( 400gms )|5cups( 500gms )|6cups( 600gms )|7cups( 700gms )'; foodItems['Chapathi'] = '1( 46.5gms )|2( 93gms )|3( 140gms )|4( 186gms )|5( 233gms )|6( 279gms )'; foodItems['Dosa'] = '1( 50gms )|2( 100gms )|3( 150gms )|4( 200gms )|5( 250gms )|6( 300gms )'; foodItems['Sambar'] = '1cup( 150gms )|2cups( 300gms )|3cups( 450gms )|4cups( 600gms )|5cups( 750gms )'; foodItems['TomatoRasam'] = '1cup( 130gms )|2cups( 260gms )|3cups( 390gms )|4cups( 520gms )|5cups( 650gms )'; foodItems['Brinjal curry'] = '1cup( 305gms )|2cups( 610gms )|3cups( 915gms )|4cups( 1220gms )|5cups( 1525gms )'; //Calorie count arrays for Food var cookedRiceArr = Object(); cookedRiceArr[0] = '228 cal|456 cal|684 cal|912 cal|1140 cal|1368 cal| 1596 cal'; var chapathiArr = Object(); chapathiArr[0] = '101.5 cal|203 cal|304.5 cal|406 cal|507.5 cal|609 cal' var dosaArr = Object(); dosaArr[0] = '135 cal|270 cal|405 cal|540 cal|675 cal|810 cal' var sambarArr = Object(); sambarArr[0] = '100 cal|200 cal|300 cal|400 cal|500 cal' var tomatoRasamArr = Object(); tomatoRasamArr[0] = '156 cal|312 cal|468 cal|624 cal|780 cal' var brinjalCurryArr = Object(); brinjalCurryArr[0] = '215 cal|430 cal|645 cal|860 cal|1075 cal' //End of food item calorie arrays //Food Cohice var choiceItem; var foodQuantity; var foodCal; //Food item and Quantity instance var foodItemInstance; var qtyInstance; function setFoodItem(oChoiceSel) { for (choice in foodItems) document.write('<option value="' + choice + '">' + choice + '</option>'); } function setFoodItemQty(oChoiceSel, oItemQtySel) { var itemQtyArr; oItemQtySel.length = 0; choiceItem = oChoiceSel.options[oChoiceSel.selectedIndex].text; $('#Food_Calories').text(""); if (foodItems[choiceItem]) { $(oItemQtySel).selectmenu('enable'); oItemQtySel.options[0] = new Option('Select Quantity',''); itemQtyArr = foodItems[choiceItem].split('|'); for (var i = 0; i < itemQtyArr.length; i++) oItemQtySel.options[i + 1] = new Option(itemQtyArr[i], itemQtyArr[i]); $(oItemQtySel).selectmenu("refresh"); } else { $(oItemQtySel).selectmenu("refresh"); $(oItemQtySel).selectmenu('disable'); } } function setItemCal(oChoiceSel, oItemQtySel) { //instances foodItemInstance = oChoiceSel; qtyInstance = oItemQtySel; foodQuantity = oItemQtySel.options[oItemQtySel.selectedIndex].text; if(oChoiceSel.selectedIndex == 1) { var cookedRice = cookedRiceArr[0].split('|'); for (var i = 1; i <= cookedRice.length; i++) { if(i == oItemQtySel.selectedIndex) { foodCal = cookedRice[i-1]; $('#Food_Calories').text("Calories: "+cookedRice[i-1]); } } } if(oChoiceSel.selectedIndex == 2) { var chapathi = chapathiArr[0].split('|'); for (var i = 1; i <= chapathi.length; i++) { if(i == oItemQtySel.selectedIndex) { foodCal = chapathi[i-1]; $('#Food_Calories').text("Calories: "+chapathi[i-1]); } } } if(oChoiceSel.selectedIndex == 3) { var dosa = dosaArr[0].split('|'); for (var i = 1; i <= dosa.length; i++) { if(i == oItemQtySel.selectedIndex) { foodCal = dosa[i-1]; $('#Food_Calories').text("Calories: "+dosa[i-1]); } } } if(oChoiceSel.selectedIndex == 4) { var sambar = sambarArr[0].split('|'); for (var i = 1; i <= sambar.length; i++) { if(i == oItemQtySel.selectedIndex) { foodCal = sambar[i-1]; $('#Food_Calories').text("Calories: "+sambar[i-1]); } } } if(oChoiceSel.selectedIndex == 5) { var tomatoRasam = tomatoRasamArr[0].split('|'); for (var i = 1; i <= tomatoRasam.length; i++) { if(i == oItemQtySel.selectedIndex) { foodCal = tomatoRasam[i-1]; $('#Food_Calories').text("Calories: "+tomatoRasam[i-1]); } } } if(oChoiceSel.selectedIndex == 6) { var brinjalCurry = brinjalCurryArr[0].split('|'); for (var i = 1; i <= brinjalCurry.length; i++) { if(i == oItemQtySel.selectedIndex) { foodCal = brinjalCurry[i-1]+"cal"; $('#Food_Calories').text("Calories: "+brinjalCurry[i-1]); } } } } </script> thanks

• Answer:

  I would look into .trigger('create') http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html Create vs. refresh: An important distinction Note that there is an important difference between the create event and refresh method that some widgets have. The create event is suited for enhancing raw markup that contains one or more widgets. The refresh method should be used on existing (already enhanced) widgets that have been manipulated programmatically and need the UI be updated to match. For example, if you had a page where you dynamically appended a new unordered list with data-role=listview attribute after page creation, triggering create on a parent element of that list would transform it into a listview styled widget. If more list items were then programmatically added, calling the listview’s refresh method would update just those new list items to the enhanced state and leave the existing list items untouched. $("#pageId").trigger( "create" );