I am trying to do async page open inside div with $.ajax but i am still having about 3sec delay after clicking link and that time page is jammed. Happens at least chrome and sasfari. Where am i going wrong way..?
$.ajaxSetup({
async: true
});
$(document).ready(function() {
$("#Button").click(function(evt) {
$('#change').html('<p><img src="ajax-loader.gif" width="15" height="15" /></p>');
$.ajax({
url: "reg.php",
cache: false
}).done(function( html ) {
$("#change").html(html);
});
});
});
No, asynchronous ajax requests like that don't hold up the browser. The problem is elsewhere, in code you haven't shown. The code you've shown will correctly do an async request.
Speculating on possible issues with what we can't see:
If the link has an href, you're not cancelling the default action, so it could be loading the page. You can prevent the default by calling evt.preventDefault() within your click handler, or by doing return false; at the end of it (which does that and also stops propagation).
If you have other code elsewhere setting async: false as the default, perhaps your ajaxSetup changing it back isn't getting called.
If you are using PHP sessions then the script will halt the browser until reg.php is completely finished.
In reg.php you will need to add this somewhere:
session_write_close();
This will allow you to read the session data but not write to it.
This is the case because you would probably never want two ASYNC scripts trying to write to the session at the same exact time.
Related
We are expecting the below things:
Would like to show the page with updated values.
Then show the session attribute.
What is happening for the below code, session message displayed first and then the page is getting reload.
$.ajax({
type: "POST",
url: "startSelectedServer",
data: { selectedJvmHostIp : selectedJvmHostIp, selectedJvmPort : selectedJvmPort },
success: function(result){
1. location.reload();
2. $("#save-message-div").show();
},
error : function(e) {
}
});
<div id="save-message-div" style="background-color: #DFF2BF; padding: 8px;display:none">
<h2 id="save-message" style="color: #4F8A10"></h2>
</div>
But we are expecting to show message after reloading the page.
In above 2 is executing first then 1 is executing.
ok it appears to me that you are trying to perform a server-side functionality and then refresh the page and have a message appear that the functionality has occurred.
This is fine as far as it goes but will not work the way you have it. To do it closest to the way you invision you will want to put in conditional logic on page load to determine if it is appropriate to show the div.
Even if your page did not show the div prior to reloading, the way it is written, when the page reloads it will not still be executing the same piece of script - it is a blank slate with only what you pass to it.
I am not sure why you want to reload the page at all actually; you can, and should [to make use of ajax], just use the information client-side that is returned from the server asynchronously.
In my website http://www.eventiame.com/publicar/ there's a form with several fields.
When the page loads it shows the pace animation (it does some ajax request when loading so that's ok) but when I submit the form (I do it via ajax too) the animation doesn't appear.
I tested uploading an image (so it would take longer) and still no animation is shown.
I also tried changing the "async" parameter to true or false in the akax request but still no good.
Here's the specific code for the ajax call which is not working:
$.post('Sample.php,$(this).serialize(),function(data){
$(target).html(data);
},'html');
You may try this:
$(document).ajaxStart(function() {
Pace.restart();
});
I had this same problem and I found a solution in Pace issues section. Source
I hope my answer is not too late, but in case of those that might still need it, i had thesame issue also and i solved it.
By default, Pace will show any ajax requests which begin as a part of a normal or ajax-y page load, or which last longer than 500ms. your ajax request didnt trigger the pace because it's too soon.
1, Modify the Pace.js :
Find restartOnRequestAfterunder the defaultOptionsand change it to desire time (in milliseconds) value 5 ms.
restartOnRequestAfter: 5,
2, Tracking:
By default, Pace will only track GET HTTP method, so add all other method you might need such as POST request.
ajax: {
trackMethods: ['GET', 'POST', 'PUT', 'DELETE', 'REMOVE'],
...
}
SOURCE: http://github.hubspot.com/pace/
You have a missing closing single quote, should be:
$.post('Sample.php', $(this).serialize(), function(data){
$(target).html(data);
}, 'html');
So I have a listing page something like this:
//start loop
<div id ='row-prd-<number>'>
<strong>product Name</strong>
<a href='#' id='edit-prd-<number>'>Edit</a>
<a href='#' id='delete-prd-<number>'>Delete</a>
</div>
//end loop
In my javascript, I do something like:
$('#delete-prd-<number>').click()
{
//change style of the row to show its being deleted..
$('row-prd-<number>').addClass('deleting');
//make ajax call to delete
ajaxDeleteRecord(prd-<number>);
}
Now, this works fine. My concern is that in a lower connection speed scenario, the delete ajax call takes a few seconds to complete. I am concerned about what happens if the user clicks on an edit or delete button of another record. So I have three questions:
1. Should I disable all click events on the page until the ajax call returns?
To me this does not seem like a good option - suppose the ajax call errored out...in that case the user now is in a state where s/he cannot click on anything in the page anymore!
2. How then should I handle this?
...I am kinda just lost as to what to do. I guess this is the most important of the three questions I have.
1. If I had to disable and re-enable clicks on the elements on the page (edit/delete/new) is there an easy way to do it?
...just curious...
your scenario 1 will do the trick in order to do disable all the other events. It will be kind of neat as well.
You can have another thing to have the ajax call be synchronous rather than being asynchronous by setting
async:false
in the call.
The syntax would look something like this:
$.ajax({
url: 'your url',
global: false,
type: 'POST',
data: {},
async: false,
success: function() {},
error: function() {}
});
I'm calling a PHP file, and it's returning the response when I view it in Firebug. However, it's not displaying on my page. I'm not sure if the success is actually firing, because I can't even run an alert, but it is working because the PHP code is firing and returning what it's supposed to.
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$.ajax({
type: "GET",
url: 'https://www.example.com',
dataType: 'jsonp',
contentType: "text/html",
crossDomain:'true',
success: function (data) {
$(".result").html(data);
}
});
</script>
<div class="result"></div>
You need to make the ajax call on load or document ready. The div may not exist at the time of response (page is interpreted top down).
Just a little lesson about what your are doing.
When working with any form of Ajax (or JavaScript in general), it is usually imperative to have your console open. You will be able to see your request, your response, and whole other useful information.
I usually work with Firefox and Chrome from time to time.
You can open your console by right clicking on the page anywhere and inspect an element with Firebug (on Firefox).
And inspect element in Chrome.
Once you see the Ajax call, click the + and see its content.
You should see something like:
Headers Post Response JSON Cookies or something alike.
I hope that helps.
I was having many problems trying to find the reason of why my ajax function was not working on Safari, Chrome and sometimes Firefox, but worked very well on IE. I made a little change, and everything start working perfect (in every browser), but I still dont know why, and I want to find out the main reason of this.
I had an Ajax function respuestas() which insert some data on a database. This function is called by some links like this: <a onclick="respuestas()" href="link.html">LINk </a>. So when I click on the link, the function takes the proper information and inserts it on the database and then go to link.html. Again, this only worked for IE.
I insert an alert(xml.responseText) to see the response that i was having. Safari, fireforx and chrome returns an empty alert.
I was tired of changing pages everytime I wanted to test my function, so I add a button calling my function (without going to another webpage) and IT WORKED!. Now, I have something like this: <a onclick="respuestas()" href="#">LINK </a> and put window.location.href="link.html" inside my ajax function, so the change of pages occur after the ajax response is completed, and it is working very well.
But I do not entirely understand why this works and the other way does not.
This because the link element has also it's default listener. So, to prevent any extra action on click, you should prevent default action. The simple way to do this is to return false on click.
<a onclick="respuestas(this); return false;" href="link.html">LINk</a>
And your respuestas in easiest way should be like this:
function respuestas(link) {
/* do what you need here */
window.location.href = link.href;
}
This is pretty primitive, but I believe you'll get the idea.
What's happening here is that your browser was navigating to the next page before repusetas() was able to execute. In order to ensure that your script is going to fire before the browser follows the link, you need to take control of the click event. In jQuery it works like this:
$('a').bind( 'click', function( event ){
event.preventDefault();
repuestas();
var href = $(this).attr('href');
window.location.href = href;
});
Try this Jquery code
function respuestas()
{
$.ajax({
type: "post",
url: "insert.php?data="+data,
success : function(data){
window.location.href="link.html";
},
error : function(){
alert("Could not ");
}
});
}