I am using ajax to fetch data dynamically, but there is a problem. When I refresh the page the fetched data is lost. I want the data to remain the same after I refresh the page.
Suppose this is my page:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Index Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
/* fetching data which matches the keyword*/
function Search()
{
$.post("search.php", {search_word: $('#searchInput').val()} , function(data){
if(data){
$('#results').show();
$("#results").append(data);
}
});
}
</script>
</head>
<body>
<input type="text" value="" id="searchInput"/>
<input type="button" value="Search" onclick="Search();"/>
<div id="results" style="display:none"></div>
</body>
</html>
When I click on the search button the data which came in results div would be gone after refreshing the page.
Save that data in session or in database and then fetch from there because after refreshing page get and post variables destroy automatically.
Consider using cookie data.
This jQuery plugin will do the trick: http://plugins.jquery.com/project/cookie
$.cookie('example', 'foo'); //the name is example and that value is foo.
getting the cookie's value is simple...
alert($.cookie('example');
So after you load your data dynamically you could either store that data in a cookie. Though this may be a bad solution if your fetching a large amount of data.
This question is hard to answer due to the lack of example code and therefore not understanding your intent or how/what you're doing.