I m having one requirement of swaping div on html.Consider first div with id='current',on page load 5 records are append on first div.I do have one another div with id="next" which gets another 5 record filled after click event from ajax in innerhtml from javascript.Again after click event another 5 records picked,i want to append it on div with id='next' and next will go to current and old 5 records which is on current get empty from javascript and so on.For example:
<div id="current"></div>(current 5 records on pageload)
<div id="next"></div>(another 5 records on click event from ajax in innerHTML)
Again when onclick another 5 records are coming which I want to append on next and old next will go to current and old current get deleted. Any suggestion. Thanks.
using jquery this is very easy:
<div id="current"></div>
<div id="next"></div>
in the ajax success function
$("#current").html($("#next").html())
$("#next").html(loaded_data)
html
<div id="current">(current 5 records on pageload)</div>
<div id="next">(another 5 records on click event from ajax in innerHTML) </div>
<button id="loadDiv">Load Data</button>
jquery
var count = 1; // gobal variable for checking click count
$('#loadDiv').click(function(){
data = // do ajax and get data
if(count == 1)
{
$('#current').empty(); // deleting old data of current
$('#current').html('data');
}
else
{
$('#current').empty(); // deleting old data of current
$('#current').html($('#next').html());// loading current with next
$('#next').empty(); // deleting data in next
$('#next').html(data); // loading next with new data
}
count ++;
});
Just try that fucntions to do that. Functions not use jquery and do the same in diferent way.
1- Change content while new content is on a String.
function spaw_div_content(new_content){
var current = document.getElementById("current")
var next = document.getElementById("next")
current.innerHTML = next.innerHTML
next.innerHTML = new_content;
}
2- Change content while new content is on an array of elements.
function spaw_div_content(new_content){
var current = document.getElementById("current")
var next = document.getElementById("next")
current.innerHTML = next.innerHTML
next.innerHTML = "";
for(iNC in new_content){
next.appendChild(new_content[iNC])
}
}