Quel est le problème avec ces instructions jquery?

Question

Je ne parviens pas à obtenir cette instruction jquery pour travailler sur le chargement de la page, mais cela fonctionne une fois lorsque je rafraîchis F5 la page.

<div id="ResultsDiv"></div> 
<div id="pager" class="pager"></div> 
<input id="HfId" type="hidden" /> 
<script type="text/javascript"> 
var itemsPerPage = 5; 
$(document).ready(function() { 
    getRecordspage(0, itemsPerPage); 
    var maxvalues = $("#HfId").val(); 
    alert(maxvalues); 
    $(".pager").pagination(maxvalues, { 
    callback: getRecordspage, 
    current_page: 0, 
    items_per_page: itemsPerPage, 
    num_display_entries: 5, 
    next_text: 'Next', 
    prev_text: 'Prev', 
    num_edge_entries: 1 
    }); 
}); 
</script> 

Sur le pageload initial alert(maxvalues); est rien. Toutefois, lorsque je l'actualise, la valeur maxvalues est affichée dans le champ masqué HfId, car elle est affectée à la fonction getRecordspage.

Pourquoi ce comportement étrange .... Toute suggestion ...

EDIT:

function getRecordspage(curPage) { 
    $.ajax({ 
     type: "POST", 
     url: "Default.aspx/GetRecords", 
     data: "{'currentPage':" + (curPage + 1) + ",'pagesize':5}", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function(jsonObj) { 
      $("#ResultsDiv").empty(); 
      $("#HfId").val(""); 
      var strarr = jsonObj.d.split('##'); 
      var jsob = jQuery.parseJSON(strarr[0]); 
      var divs = ''; 
      $.each(jsob.Table, function(i, employee) { 
       divs += '<div class="resultsdiv"><br /><span class="resultName">' + employee.Emp_Name + '</span><span class="resultfields" style="padding-left:100px;">Category&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.Address + '</span></div>'; 
      }); 
    $(".pager").pagination(strarr[1], { 
      callback: getRecordspage, 
      current_page: 0, 
      items_per_page: 5, 
      num_display_entries: 5, 
      next_text: 'Next', 
      prev_text: 'Prev', 
      num_edge_entries: 1 
     }); 
      $("#ResultsDiv").append(divs); 
      $(".resultsdiv:even").addClass("resultseven"); 
      $(".resultsdiv").hover(function() { 
       $(this).addClass("resultshover"); 
      }, function() { 
       $(this).removeClass("resultshover"); 
      }); 
      $("#HfId").val(strarr[1]); 
     } 
    }); 
} 

Answer 1

Votre fonction getRecordspage est asynchrone. Il fait un appel Ajax qui, lorsqu'il se termine, définit la valeur que vous essayez de lire. Cependant, vous n'attendez pas la fin de l'appel avant de lire la valeur.

Answer 2

Sans plus d'informations sur votre problème (fonctions manquantes, etc.), le meilleur conseil est de dire vous pour utiliser firefox et installer firebug et firequery.

Ensuite, essayez de mettre des points d'arrêt et d'inspecter les valeurs. Voici un tutorial

EDIT: a fait cette réponse avant que j'ai vu votre édition avec plus d'informations.

Answer 3

Ma conjecture serait que le rappel $ .ajax (...) success est en cours d'exécution après est appelé le alert(maxvalues);. Si tel est bien le cas, il suffit de placer votre code pagination

$(".pager").pagination(maxvalues, { 
    //my syntax 
}); 

dans le .ajax $ (...) rappel success.