I make a html page and there is ajax call for get some data.
after success ajax call, I render to html element with the json data which is from the ajax call.
But, If I go to other page by click some link, and when I come back there is no data at all.
how can I preserve the data element when I come back from other page.
<!DOCTYPE HTML>
...
...
<body>
<div id='data'>
</div>
<a href='/next'> NEXT </a>
<script type='text/javascript'>
$.ajax({
type : 'GET',
url : '/data/user',
...
...
success: function(json) {
$('#data').append(json.username);
}
...
</script>
</html>
When I click 'NEXT' and history back. the username is go away.
When page is reloaded all data came from ajax will be lost definitely. you can faster your ajax call if you already make ajax call earlier by using cache property
$.ajax({
url: "test.html",
cache: true
})
.done(function( html ) {
$( "#results" ).append( html );
});
Related
I'm trying to simulate a homemade push notification using setInterval but not sure how to do this. The ajax request works just fine at displaying messages. This is not the problem. I'm trying to display a separate notification in the section style='notification'.
Ajax snippet
setInterval(function(){
$.ajaxSetup({
cache:false,
type: "GET",
url: "log.php",
data: data,
});
$('#displayMessage').load('log.php');
//display div notification if return data
//document.getElementById('notification').style.display = 'block';
}, 3000);
markup
<section style='display:none;' id='notification' class="notif notif-notice alert alert-dismissable">
<h6 class="notif-title">Congratulations!
×
</h6>
<p>You have just received a new message</p>
</section>
Javascript's .load() method has an optional argument that is a function to do after the load is completed. It would look like this:
$('#displayMessage').load('log.php', function(){
$('#notification').show();
});
I want that when I click on logout, ck() function will be fired and there is an ajax method. By ajax method I have send some data to object.php file. After success all process I will get I got It string. Now I want that when this data I will get, 'storage' event will execute and I got It will show all index.php tab pages at a times without any refresh or click again logout. I am very very sorry for my poor English. It is my first question.
index.php:
<script>
function ck(){
var ok="thx";
$.ajax({
type:"GET",
data:{mt:ok},
url:"object.php",
success:function(html){
if(html!=""){
localStorage.setItem('store-it', html);
window.addEventListener('storage', function (event){
if(event.key=='store-it'){
$(".show").text(event.newValue);
}
})
}
},
});
}
</script>
<p onclick="ck()">logout</p>
<p class="show"></p>
object.php
<?php
if(isset($_GET['mt']) && $_GET['mt']=="thx"){
echo "I got It";
}
?>
Here the situation:
In my html page I have a link, which onclick runs a PHP script.
<iframe style="display:none;" name="target"></iframe>
Load new tasks
I use an invisible iframe to execute the script but I stay on the same page.
This link executes script.php which updates mysql database, but in order to see new content the page must be reloaded.
Of course I can always create a separate button/link that reloads current page.
But I wonder if there is a way to execute the PHP script and reload current page with one html button.
Better use it this way:
1: Use a common Javascript Framework, for example JQuery
2: Create your Link and a Div for your Content:
Update my Data and reload my new Content
<div id="result"></div>
3: Use Jquery to add the click event to your link:
$('#reload').click(function(e) {
// Prevent from going to the link provided in href
e.preventDefault();
// make POST Request to script
$.post( "myScriptHandler.php", { value1: "1", value2: "2" })
.done(function( data ) {
// if done, refresh my Div with html content from your PHP Script
$('#result').html('')
$('#result').load('mydata.php');
});
}
You don't need AJAx - just return a script into the iframe which updates the toplevel page...
<?php
....
$new=run_updates();
print "<div id='newcontent'>$new</div>\n";
?>
<script>
var dest=parent.document.getElementById('oldcontent');
var src=document.getElementById('newcontent');
dest.innerHTML=src.innerHTML;
</script>
(not tested, YMMV)
I show you how to use Ajax in this case:
here is your html and js code:
<script type="text/javascript">
$(".link").on("click", function() {
$.ajax({
url: "your_php_script.php",
dataType: "json",
cache: false,
success: function(data) {
location.reload(true);
}
});
});
</script>
<html>
<body>
<a class="link" target="target">Load new tasks</a>
</body>
</html>
When you click the 'a' tag, the jQuery Ajax script call your php script, and when it return with success, then your page will be refresh.
When I use Ajax call(jquery) in the HEAD section I find a "waiting for response message" on a chrome browser with revolving circle. I don't want this ugly look. Is there a way to avoiding this?
PS: When I use input tag to call the JavaScript(Ajax call) function like
<input id="launcher" type="button" onfocus="go()" value="Go!"></input>
I couldn't see a waiting circle. Cause my program should call the function automatically I couldn't use this method.(If I use document.getElementById("launcher").focus() to automatically start the function, It showed waiting circle again.) I guess there's a some different context to call JavaScript function.
Update Here is my sample code
<HEAD>
<SCRIPT TYPE="text/javascript">
function go() {
$.ajax({
url: "/myService",
success: function(data){
document.getElementById("result_area").innerHTML = data;
go();
}
});
}
$(document).ready(function(){
go() //Here I want to Comet call;
});
go(); //should start automatically.
</SCRIPT>
</HEAD>
<BODY>
<!-- <input id="launcher" type="button" onfocus="go()" value="Go!"></input>
This doesn't show the waiting circle. Why? Use different call context? -->
<div id="result_area"></div>
</BODY>
there are some issue i want to highlight
<input id="launcher" type="button" onfocus="go()" value="Go!"></input>
this should be
<input type="button" id="launcher" value="Go!" />
then
if u want a image instead of text then put a div before form with display:none
in ajax call you are not writing url link with extension (.php or .html or .js )
in success : you again calling go(), this smell like recursive function
what data u r sending to the server?? data: is missing from ajax option
also mention dataType ( optional)
if you dont want to run ajax automatically then do it on some event( like i do on click)
bind with the document ready
write javascript code in head ( best practice to write just before </body> )
i tried my hard to tell you the basic, here is my way
HTML
<div id="waiting" style="display: none;">
<img src="images/ajax-loader.gif" title="Loader" alt="Loader" />
</div>
<form>
// here is your form
</form>
jQuery
<SCRIPT TYPE="text/javascript">
$(document).ready(function(){
$('#waiting').show(500);
// instead run automatically now it will work on click of button
$('#launcher').click( function () {
$.ajax({
url: "/myService.html", // or whatever page
// by the way where is data which you sent on server??
data: { email : $('#email').val() }, // like i send the email to the serever
dataType : "json",
async : false,
success: function(data){
$('#waiting').hide();
$("#result_area").html(data);
}
});
});
})
I found that this waiting circle on XMLHttpRequest is depend on a browser implementation. On IE7, Firefox4 it didn't show any waiting circle or bar while chrome11, Windows safari had one.
I believe that standard on this should be made cause it impacts greatly on user experience.
The following code fetch all data (by clicking a.info link) from a php file "info.php" and prints in the #content div. The problem is that it prints everything from info.php file. Can I possibly select only some part of data from info.php file to load in #content?
The reason to ask this question is that, I want to load different data from the same php file for the different links.
$("a.info").click(function(){
var id=$(this).attr("id");
$("#box").slideDown("slow");
$.ajax({
type: "POST",
data: "id="+$(this).attr("id"),
url: "info.php",
success: function(html){
$("#content").html(html);
}
});
});
Html where content is loading:
<div id="box">
<div id="content"></div>
</div>
info.php
paragraph1.
paragraph2.
For example, In the above info.php file, i only want to load paragraph1 in the #content.
I hope my question is clear. Any help will be appreciated.
Assuming paragraph1 is a div element, change accordingly:
success: function(html){
var p1 = $(html).find("div#paragraph1");
$("#content").html(p1);
}