Qu'est-ce qui ne va pas avec ces déclarations jquery ?

Question

Je n'arrive pas à faire fonctionner cette déclaration jquery au chargement de la page, mais elle fonctionne une fois lorsque je rafraîchis la page. 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 chargement initial de la page alert(maxvalues); n'est rien. Cependant, lorsque j'actualise le site, la valeur de l'article est affichée. maxvalues qui se trouve dans le champ caché HfId car il est affecté dans la fonction getRecordspage .

Pourquoi ce comportement étrange.... Une 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 getRecordspage est asynchrone. Elle effectue un appel Ajax qui, lorsqu'il est terminé, définit la valeur que vous essayez de lire. Cependant, vous n'attendez pas que l'appel soit terminé pour lire la valeur.

Answer 2

Je suppose que le $.ajax(...) success le callback est en cours d'exécution après le site alert(maxvalues); s'appelle. Si c'est effectivement le cas, il suffit de placer votre code de pagination

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

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

Answer 3

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

Essayez ensuite de mettre des points d'arrêt et d'inspecter les valeurs. Voici un tutoriel

EDIT : j'ai répondu avant de voir votre modification avec plus d'informations.