单击按钮刷新页面div

Question

I'm building a phonegap application using jquery mobile. I have one page div that displays similar data for each of 10 different steps. My data is being read in from JSON. I can correctly incrament the steps by clicking a button, and display this info by using pagebefore show (if I move off the page and then back to it). But I want the button to refresh (reload) the current page with the new info when I click it. I can't seem to get it working. I've tried location.reload() and some others with no avail. Can someone help out a newbie here?

Javascript:

var currentStep = 0;  

$.getJSON("rubric.json", function(data) {
    jsonRubric = data;

});

$("#nextStep").on('click', function() {
if (currentStep <9){
currentStep += 1;
location.reload(true);}
});

function setRubricInfo() {
    $('#rubricTitle').html(jsonRubric.rubric[currentStep].title);
    $('#criteria').html(jsonRubric.rubric[currentStep].criteria);
     $('#meets').html(jsonRubric.rubric[currentStep].meets);
     $('#dnmeet').html(jsonRubric.rubric[currentStep].dnmeet);
     $('#exceeds').html(jsonRubric.rubric[currentStep].exceeds);
}
$("#stepOneRubric").on("pagebeforeshow", function(){
setRubricInfo();
});

"#nextStep" is my button, "#StepOneRubric" is my page div. All the changing of the content happens on pagebeforeshow currently.

HTML:

<!-- Step 1 Rubric/page14 -->
<div id="stepOneRubric" data-role="page">
    <div data-role="header" data-theme="a"> <a class="ui-btn-left" href="#eightStepHome" data-role="button" data-iconpos="notext"
          data-icon="arrow-l"> Button </a>
    <h3> Step One Rubric </h3>
  </div>
    <div data-role="content">

  <div align="center">  
  <h4 id="rubricTitle"> sfasfd </h4>
</div>

   <div id=rubricCollapsible data-role="collapsible-set">
        <div data-role="collapsible" data-collapsed="true">
        <h3> Criteria </h3>
      <p id="criteria"> Critera text</p>
      </div>
        <div data-role="collapsible" data-collapsed="true">
        <h3> Does Not Meet </h3>
        <p id="dnmeet"> Critera text</p>
      </div>
        <div data-role="collapsible" data-collapsed="true">
        <h3> Meets </h3>
        <p id="meets"> Critera text</p>
      </div>
        <div data-role="collapsible" data-collapsed="true">
        <h3> Exceeds </h3>
        <p id="exceeds"> Critera text       
        <div data-role="controlgroup" data-type="horizontal">
                </div>
        </div>

      </div>
  </div>
         <a href="#stepOneRubric" id= "nextStep" data-role="button" data-theme="b" > Next 
         </a>
          <div id = "nextStep" a href = "#stepOneRubric" data-role="button" data-theme="b" > Next 
         </div>
      </div>

Answer 1

Use .trigger('create') after appending new items into [data-role=page] . This will re-enhance the markup of your code as you're using .html() .

There is no need to refresh or reload the page. However, if you want to give the feeling that the page is being refreshed, you can reload the same page using $.mobile.changePage() with option allowSamePageTransition: true .

Check this example.

var currentStep = 0;
$("#nextStep").on('click', function() {
 if (currentStep <9){
  currentStep++;
  setRubricInfo();
 }
 $('[data-role=page]').trigger('create');
});

Answer 2

What version of jQuery? .live() is deprecated.

"As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live()."

http://api.jquery.com/live/

Use .on() instead.

$("#stepOneRubic").on('click', '#nextStep', function() {
    if (currentStep <9){
        currentStep += 1;}
    location.reload();
});

http://api.jquery.com/on/