I use jquery to make an ajax request every 15 seconds to update a <DIV> Element with information. That works generally fine but after some minutes, when the ajax request runs a few times, I got browser performance issues. I only need to run the page in firefox, but here is the problem most of all.
This is the way I call the function every 15 sec.:
setInterval(syncdiv, 15000);
This is my ajax request:
function syncdiv() {
$.ajax({
url: 'code_get_msg_sync.php?',
cache: false, // The problem exist with cache true even with false
success: function(data) {
$('#msgdiv').html(data);
}
});
}
Try using
e.preventDefault();
before you submit or click to send a ajax request ..Just a try
Also there are few links for reference
Link 1
Link 2
Link 3
Related
In my project, I have a long-running process which is called by AJAX. Duration can be 1 to 15 mins.
While AJAX is running, I want to give updates to users. It just should show simply how many rows left to add into the database.
I found out that there are a few different options to realize this. Polling, SSE or WebSockets. I never worked with WebSockets, and I couldn't find a good example.
I'm trying now with SSE which I quite understand, and it is working properly.. but when the AJAX start running the connection to the eventSource will be pending. So while AJAX is running, there are no updates received.
Code:
<script type="text/javascript">
var es;
function checkProgress(id){
es = new EventSource('checkProgress.php');
es.addEventListener('message', function(e) {
console.log(e.data);
}, false);
}
checkProgress(1);
$(function() {
$('.submit').on('click', function() {
var form = $('form')[0];
var form_data = new FormData(form);
$.ajax({
type: 'POST',
url: 'submit.php',
contentType: false,
processData: false,
data: form_data,
success:function(response) {
console.log(response);
}
});
return false;
});
});
</script>
Screenshots:
Network log
Now actually I still didn't find any reference or example of how to implement SSE while there is an AJAX process running. All reference or examples give examples to let the getProgress file to do something.
I see you're using PHP. My best guess would be that you're also using the built-in PHP session management. The problem with this is that accessing the session is an exclusive operation. I would guess that your AJAX operation has opened and locked the session, preventing your SSE script from also opening the session. You might consider not opening the session or opening it read-only(Dead Link) (Archived).
I have a problem in my ajax call.
In the below code, pageReload() function is automatically called when the page gets loaded which in-turn calls the ajaxCall() function for every 10 seconds.
I'm calling a method in grails controller through ajax by passing the parameters needed in the url. The controller method returns an array that contains 3 elements which are the Name of the book, the Author of the book and the year published.
<htmL>
<head>
<script type="text/javascript">
function pageReload() {
var timeInterval = setInterval('ajaxCall()',10000);
}
function ajaxCall() {
jQuery.ajax({
url: '/getBook?rowName=${row}&columnName=${column}',
success: function(data){
bookReturned(data);
},
error: function() {
alert('Error occured in AJAX call');
}
});
}
function bookReturned(values){
alert("Values are : "+values);
}
window.onload=pageReload;
</script>
<head>
</html>
For every 10 seconds I'm getting the alert for Values which are returned from the controller method. But the controller method is getting executed only for the first call by ajax (I have given println in controller method which gets displayed in console only one time).
How to make the ajax call to execute the controller method every time when it is called.
Please help me in this as I'm new to Grails and ajax.
Thanks in advance.
Your requests are being cached. Set the cache option to false.
If set to false, it will force requested pages not to be cached by the
browser. Note: Setting cache to false will only work correctly with
HEAD and GET requests. It works by appending "_={timestamp}" to the
GET parameters. The parameter is not needed for other types of
requests, except in IE8 when a POST is made to a URL that has already
been requested by a GET.
See jQuery documentation on cache here
jQuery.ajax({
cache: false,
url: '/getBook?rowName=${row}&columnName=${column}',
success: function(data){
bookReturned(data);
},
error: function() {
alert('Error occured in AJAX call');
}
});
guys. I have a juerymobile multi-page, and I have a button in #page-index, when click it, will send a ajax request to server, and changepage to #page-column, It run will in PC, but when i deploy the multi-page in phonegap, the button click can just run only twice, code is below:
function test()
{
$.mobile.changePage('#page_column');
$.ajax({
url: "http://192.168.168.120:8090/fcmobile/getTest",
dataType: "json"
}).done(function(data) {
alert(data.content);
});
}
I found if I remove $.mobile.changePage('#page_column');, the ajax request can be run well any times. but when I add the changePage code, it only can be run twice, in third time, ajax request can't even be send. Dose anybody know reason?
AJAX is made to be asynchronous, so no need to set async to false to get it working. Use events instead.
For example:
function test () {
$.ajax({
'url': "http://192.168.168.120:8090/fcmobile/getTest",
'dataType': 'json',
'success': function (json_data) {
$(document).trigger('test_json_data_loaded');
console.log(data);
}
});
}
$(document).on('test_json_data_loaded', function () {
$.mobile.changePage('#page_column');
});
When you set async to false, you're basically making it so that every time this AJAX request is made, the user will have to wait until all the data is fully loaded before the application/website can do/execute anything else...not good.
When i use jquery's $.post ajax function, page freezes for 2-3 seconds and then data received. Freezing time can change depends on the data received.
How can i prevent this ?
EDIT:
COde i am using, it actually receives very large data
$.post("../ajax_updates.php", { time: last_update }, function(data) {
if (data) {
if (data != "") {
$("#news_feed").prepend($(data).fadeIn('slow'));
}
}
});
If you load big amount of data through JavaScript this is normal, the problem is caused because your request is synchronous which will make your browser to wait this request to end before do anything else.
You need to make your request asynchronous
P.S. Use $.get instead of $.post to get information from the server, in some cases - specially if you code work under Windows IIS you will get an error about that.
P.S-1. And it make sense $.get is for getting data from the server and $.post is for sending data.
Try this:
$.ajaxSetup({
async: true
});
$.get("../ajax_updates.php", { time: last_update }, function(data) {
if (data && data != "") {
$("#news_feed").prepend($(data).fadeIn('slow'));
}
});
When you send the ajax request make sure that async is set to true. If it is set to false, the browser will freeze untill a response is received.
http://api.jquery.com/jQuery.ajax/
My AJAX calls from a page I wrote is hanging after an indeterminate number of calls. The page makes a request after a preset amount of time (currently 5 seconds) gets data from my server then waits the amount of time again. When I put the following as my AJAX Request:
myAjax = new Ajax.Request(
url,
{
method: 'get',
asynchronous: true,
url: url,
parameters: querystring,
onInteractive: document.getElementById('meh').innerHTML='Interactive',
onSuccess: processXML
});
The div with the id "meh" will get the word Interactive written to it, but the Success condition never gets executed (same if onSuccess is replaced with onComplete).
So why is my code doing this? Thanks.
Shouldn't the onInteractive event handler be a reference to a function?
as pb said, shouldn't it be
onInteractive: function(){
document.getElementById('meh').innerHTML='Interactive'
}