jquery with dynamic template div rows building

Question

ok i have a site which has many different templates with different htmls for each template. i want to know how can i render for each row for its section with paging dynamically with jquery?

i dont want to store html in a var, because it changes with template and i want to make it easy for designer without needing to know jquery code.

so is there a way where i can pull div code and loop it with render each time, when adding a row.

<div id='id_here'>row one</div>  
<div id='id_here'>new template row, but im adding <span>created_date here</span>

so how can i pull the div and render it accordingly without needing to save div in a var?

Added
i mean i get the data from ajax and generate it on the div, but how can i know where to generate the json data on the div, if the div is keep changing on different templates.

Answer 1

Hook into an appropriate event for the divs (maybe 'load'), and then in the callback, either generate the code on the fly in javascript, pull it in via an ajax call, or load it from a static file. Then just pop the HTML into the div.

JQuery Events doc

Answer 2

If i understand you correctly, you want to load some html into a container, right?

how about storing your template html code inside an html file and then loading it where you want it to be inserted:

$(function(){
$('#container').load('path/to/mytemplate.html');
});

Answer 3

I'm not quite sure I understand the question, do you mean something like:

//load contents of myDiv from remote server and inject it into myDiv (url,selector)
$("#myDiv").load("/blah.php?p=3 #myDiv");

//load contents of hizzay.php?p=2 from remote server and inject it into anotherDiv
$("#anotherDiv").load("/hizzay.php?p=2");    

<div id="myDiv">output from blah.php?p=3</div>
<div id="anotherDiv">output from hizzay.php?p=2</div>

And what do you mean by 'save div in a var'?

See http://docs.jquery.com/Ajax/load

EDIT: I think I get it (untested):

function getPage(pageNo)
{
    $("#someDIv").load("/hizzay.php?p=" + pageNo);
    return false;//just in case   
}

$('a.page').click(function(e) {
    e.preventDefault();//stop the link from being followed
    getPage($(this).text());
});

The function getPage gets its argument from the text of the generated links:

<div id="someDiv">output from hizzay.php?p=...</div>
<a class="page" href="#">1</a>&nbsp;<a class="page" href="#">2</a> ...