使用jQuery加载页面内容？

Question

Using jQuery load html forms dynamically using append function. Here the following code load the page content dynamically based on number times of values on while loop.

Here I have a struggle on load the content with different values.its working with single value of 0 or 1 on var load_with_value=0; but not on both simultaneously i.e. increment the load_with_value++ for again load the page content of HTML forms.

$(document).ready(function(e) {
    $("<DIV>").load("<?php echo $url; ?>", function() //url for loading page
    {
        var n = $('.item').length + 1;           //load the html page content 
        var i = 1;                              //iteration for number of times load the content
        var count = 2;                         //check the condition
        var load_with_value = 0;              //load the page content with different values for display different values on html form  

        while(i<count) {                      //loop starts
            $("#product").append($(this).html());
            i++;
            load_with_value++;
        }
    });
});

Answer 1

First of all let's do some proper code formatting and get rid of the incorrect comments:

$(document).ready(function(e) {
    $("<DIV>").load("<?php echo $url; ?>", function() {
        var n = $('.item').length + 1;           
        var i = 1;                              
        var count = 2; 
        var load_with_value = 0;           
        while(i<count) {
            $("#product").append($(this).html());
            i++;
            load_with_value++;
        }
    });
});

Now let's take it apart:

If you want to use a temporary element to store the loaded data you need to assign it to a variable, so instead of

$("<DIV>").load("<?php echo $url; ?>", function() {

do

var tempObject = $("<div/>").load("<?php echo $url; ?>", function() {

Afterwards you can append the temporary element to an existing one with $('#someExistingElement').append(tempObject).

If you want to load the content into an existing element you should use it's ID, class or other selector to do this - not $("<div>").. If you want to load it to all div elements (please don't) then it should be $("div").

Next var n = $('.item').length + 1; makes no sense. It is never used in the code.

While cycle in this case is unnecessary. Don't use while cycles if you don't have to. You can use:

for(var i=0; i<count; i++){
    //code
}

What is var load_with_value = 0; used for? I can only see you incrementing it with load_with_value++; but you don't use it anywhere..

Finally if you want to load different content based on the incremented variable it should be done outside of the .load function.. For example

$(document).ready(function(){
    for(var i=0; i<5; i++){
        $('#container-' + i).load('/somecontent-' + i + '.html');
    }
});

This loads the content /somecontent-0.html to /somecontent-4.html into container elements with IDs container-0 to container-4 respectively.