Load the page content using jQuery? - php

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.