How to wait until all pages load to get elements of those pages?

Question

<div id="validationPages">
    <div id="page1Div"></div>
    <div id="page2Div"></div>
    <div id="page3Div"></div>
    <div id="page4Div"></div>
</div>

<script type="text/javascript">
    $( "#page1Div" ).load( "page1.html");
    $( "#page2Div" ).load( "page2.html");
    $( "#page3Div" ).load( "page3.html");
    $( "#page4Div" ).load( "page4.html");

    alert($("#validationPages").find("input[type=text]").length);
    $("#validationPages").find("input[type=text]").validate();
</script>

Here I am loading four html pages in four divs. These pages have some input fields each, and these input fields are filling with values coming from database in an ajax call.

Ex: page1.html:

$.ajax({
    type: 'POST',
    url:  "GetAmount",
    success: function(data, textStatus, xhr){
        $("#amount").val(data.amount);
    }
});

After I fill all these input fields I want to pass them to a function called validate() to validate.

In my code alert is giving total input fields length as '0', How do I wait untill all pages load with values so that I can pass them to validate() function?

-> $(document).ready() is not working.

Answer 1

Try this code.




<script type="text/javascript">
    $( "#page1Div" ).load( "page1.html", function(){
          $( "#page2Div" ).load( "page2.html", function(){
                  $( "#page3Div" ).load( "page3.html", function(){
                          $( "#page4Div" ).load( "page4.html", function(){
                                    alert($("#validationPages").find("input[type=text]").length);
                                    $("#validationPages").find("input[type=text]").validate();
                         });
                 });
          });
    });
</script>

Here one by one each page loaded. Once all the page get load we have pass the "validate function". In case any issue please let me know.