Ajax clear cache of selected data - javascript

I use ajax in Arcgis Javascript (if you are familiar, i just inform you that i use it, never mind) to select some data and show it in modal window, but i have problem, e.g. i clicked several feature on map (e.g. 3 features) and on each click i get different info, but if i click info button again and again it shows these selected features one by one even though i have selected different feature on map, it stores data and does not show correct info when i continue click and get info from a map.
I use 'cache: false' in $.ajax but it's not working.
Any help please, i checked this article, but it didn't help.
here is a piece of code i use
$(document).on('click', '#vf', function () //
{
var folder_name = 'inv_images/' + graphic.attributes.Wis_invent_N;
var action = "fetch_files";
$.ajax({
url: "action.php",
method: "POST",
data:{
action:action, folder_name:folder_name,
},
cache: false,
success: function(data)
{
$('#file_list').html(data);
$('#filelistModal').modal('show');
}
})
});
});

If it's the browser that's caching the ajax request (ex. IE does that) then you can change the actual request that's done by adding a timestamp to the url:
...
$.ajax({
url: "action.php?t=" + new Date().getTime(),
...
The backend should ignore the extra t parameter, but your browser thinks it's a different url therefore doesn't use the cached response.

Related

JQuery - Send inputs via ajax (which were obtained by ajax)

I have an application that after performing a search, returns me multiple "fieldsets" with some hidden inputs (via AJAX!).
I want to use these inputs to send information to the server (again) via AJAX.
The names of these inputs are automatically listed with a prefix:
"video_url_1", "video_url_2", etc.
When the user clicks the button, the value of "video_url_1" or "video_url_2" will be sent via AJAX depending on the button to which it has clicked. To solve this I got the name of the button that was clicked and then I cut the name so that I only have one number, this number I put in a variable and then use it in the "data" section of AJAX.
I did the test by sending a locally stored input and it worked but when trying to send the inputs that were previously obtained by an ajax, it does not work.
What can be wrong? This is my code:
$(document).ajaxComplete(function(){
$('a.report_video').click(function() {
var idbutton = $(this).attr('id');
var idreport = idbutton.replace('report_video_', '');
//I'm still not using these variables, can they be used to pass the input data to ajax?
var videourl = $("#video_url_" + idreport).val();
var videoid = $("#video_id_" + idreport).val();
var videoserver = $("#server").val();
///////////
$.ajax({
type : 'POST',
url : 'https://example.com/script/script.php',
data : $($("#video_url_" + idreport)).serialize(), //It doesn't work
//For example, data: $("#server").serialize()
//Work fine, this input is stored locally.
beforeSend: function(){
$('#video_report_' + idreport).html('<img src="'+pluginUrl+'./assets/img/loading.svg" />');
}
}).done(function(data) {
$('#video_report_' + idreport).html(data);
});
return false;
});
});
Edit:
I just did some tests as suggested by Kevin B and I see that the problem I have is in the syntax when trying to send two dynamic ID's by Ajax.
The problem is that I do not know how to write them correctly, I know that is the problem because when I tried to send them separately they did work...
data : $($("#video_id_" + idreport), $("#video_url_" + idreport)).serialize(),
I'm not sure I completely understand your problem, but this might help.
You call your second AJAX call in the .success() method of the first AJAX call. Essentially chaining the responses.
$('#btn').click(function() {
$.ajax({
type: "POST",
url: 'someURL',
data: someData
}).done(function(firstCallData) {
// This OPTIONAL method fires when the AJAC call succeeded
// You can also put another AJAX call in here with the data returned from the first call
$.ajax({
type: "POST",
url: 'someURL',
data: firstCallData
}).done(function(data) {
// Do something with second AJAX call with data
}).fail(function(data) {
// Second AJAX call failed, handle error
});
}).fail(function(data) {
// This OPTIONAL method fires when the first response failed
}).always(function(data) {
// This OPTIONAL method fires regardless if the first call succeeded or failed.
});
});

Prevent caching after page refreshes every x seconds

I'm building a news app. I refresh a div with the class of .new_feed every 10 seconds, to check for new updates, and when there is it shows up. Now the problem is, when there is a new feed in it, and the 10 seconds is up, and you don't click to see, and wait for 40 seconds before you click,it brings up 4 records instead of 1. I think the problem has to do with caching.
Refresh script that gets the headline of the news
$(document).ready(function() {
$.ajaxSetup({ cache: false });
setInterval(function() {
$('.new_feed').load('headline.asp');
}, 10000);
});
Getting the feeds
$(function() {
//More Button
$('.more2').live("click",function() {
var u_pic_id = $(this).attr("id");
if (u_pic_id) {
$("#more2"+u_pic_id).html('<img src="moreajax.gif" />');
$.ajax({
type: "POST",
url: "show_more.asp",
data: "lastmsg="+ id,
cache: false,
success: function(html) {
$("ol#updates2").append(html);
$("#more2"+id).remove();
}
});
}
return false;
});
});
</script>
HTML
<div id="more2<%=(rs_ncount_id.Fields.Item("id").Value)+1%>" class="morebox2">
<a href="#" class="more2" id="<%=(rs_ncount_id.Fields.Item("id").Value)+1%>">
Load New Feeds
</a>
</div>
Using HTTP header
You have to set the Cache-Control HTTP/1.1 header at the server side. This is the recommended approach.
Using a nonce in the request
However you can also use a hacky solution, if you can't change the server settings. Use a nonce in the request:
$('.new_feed').load('headline.asp?' + nonce);
Because it will look like a different request to the browser, it will ignore the cached value.
The simplest solution for a nonce is using the current time:
var date = new Date();
var nonce = date.getMilliseconds();
I had an answer written up that pointed out the cache:false option for $.ajax but upon reviewing your OP I realized you were already using it. The documentation indicates the cache:false option will only append a timestamp on GET requests (and POST requests for IE8).
Since you're using a POST its unlikely the cache:false option is actually going to help (unless you're using IE8?). Instead, like #meskobalazs states you'll need to create and append a nonce.
One way to implement this might be like:
function getValues(id) {
var url = 'myUrl?id=' + id;
$.ajax({
type: "POST",
url: url + '&_=' + (new Date()).getTime()
}).done(function(response) {
// do stuff
})
}
Of course if you have access to the server the appropriate way to handle this would be to correctly set the response headers. You may also consider using a more RESTful approach where the GET verb and route is used to request data.

how to stop ajax call and start a new one with new parameters?

I've made an ajax call with a jQuery.everyTime() function.
I got a combo box where i select some graph names and dynamically calls to an ajax function, returns a json and creates the chart in the View every 10 seconds.
Everything goes fine but when i select another graph name and click in the function, i don't only have the new graph but i got the old one as well (as a request), so every time i click in a new one (let's say 8 names) i would get 8 requests simultaneously and ofc the latest will be shown (but if you check in firebug you will see the 8 requests).
This is my ajax function:
var selected = $("#name_list :selected").val();
$(".title_graph").text(selected);
var j = jQuery.noConflict();
j("#hour").everyTime(10000,function(i){
j.ajax({
type: "GET",
url: "getchartdata?graphName=" + selected +"&subgroup=hour",
cache: false,
success: function(jsonData){
var data = eval(jsonData);
drawChart(data, data[0][0], data[0][1]);
}
})
});
I would like to cancel previus ajax calls without having to refresh the page. Am i able to do that? like put some kind of "stop" at the very beginning of the function, don't really know. I've seen ajaxName.abort() solution, but i believe it couldn't be applied to what i need.
Thanks in advance.
ADDED:
This is how it looks now with Travis' suggestion:
function getChartsByGraphName() {
var selected = $("#name_list :selected").val();
var ajaxCallHour;
$(".title_graph").text(selected);
var j = jQuery.noConflict();
j("#hour").everyTime(10000,function(i){
ajaxCallHour && ajaxCallHour.abort();
ajaxCallHour = j.ajax({
type: "GET",
url: "getchartdata?graphName=" + selected +"&subgroup=hour",
cache: false,
success: function(jsonData){
var data = eval(jsonData);
drawChart(data, data[0][0], data[0][1]);
}
})
});
}
But it's still sending old ajax requests.
See this answer: Abort Ajax requests using jQuery
Create a variable outside of your everyTime that stores the xhr, then stop it before issuing a new one.
var xhr;
j("#hour").everyTime(10000,function(i){
xhr && xhr.abort();
xhr = j.ajax();
});

Redirect in the middle of an ajax request

I have a site where users can publish links. Users fill a form with 2 fields:
Title
URL
When the user clicks "submit" I have a crawler that looks for an image of the link provided and makes a thumbnail.
The problem is that the crawler usually takes about 5-10 seconds to finish loading and cropping the thumb.
I thought I could do an ajax call like this. As you can see, when the user submits a link first we see if its valid (first ajax call) then if succesful we do another ajax call to try to find and save the image of this link.
My idea was to do that while I move the user to the links.php page, however, I find that if I do it like this the AJAX call breaks and the function in save_image.php doesn't run.
What can I do to avoid making my users wait for the save_image.php process? I need this process to run, but I don't need any data returned.
$.ajax({
url: 'publish/submit_link.php',
type: 'POST',
dataType: 'JSON',
data: {
link : link,
title : title,
},
success: function (data) {
if (data)
{
$.ajax({
url: 'publish/save_image.php', type: 'POST',
data: {
id : data.id,
type : data.type,
url : url,
csrf_test_name : csrf
}
});
}
//THIS NEXT LINE BREAKS SECOND AJAX CALL
window.location = 'links.php';
}
});
Thanks in advance!
SUMMING UP: I want the user to submit a link and redirect the user to the links page while the thumbnail for that link is being generated. I don't want to show the thumbnail to the user.
The AJAX request seems to fail, because when you navigate away, the user request is aborted. Because of that, the execution of save_image.php is interrupted.
You can use PHP's ignore_user_abort to force the PHP process to continue in the background. Put it at the top of save_image.php:
<?php
ignore_user_abort(true);
// ... save image, etc.
?>
For this to work, you have to send (and flush) some output to the client:
PHP will not detect that the user has aborted the connection until an attempt is made to send information to the client. Simply using an echo statement does not guarantee that information is sent, see flush().
Any output should work (e.g. "OK"). This might be a bit of a challenge considering you're using a framework, but it shouldn't be impossible. This might work: Flushing with CodeIgniter
You can read more about PHP connection handling here.
force user to fill first the url and then the title, when user go to title field start crawl data, till finish the title and press sumbit you will gain some time and make the proccess apparently faster.
Why use XHR at all if you don't need the data returned? Just let your form submit the link to links.php and let it save the image there!
to understand your problem, we need to understand the working of javascript
your code is as follows
$.ajax({
url: 'publish/submit_link.php',
type: 'POST',
dataType: 'JSON',
data: {
link : link,
title : title,
},
success: function (data) {
if (data)
{
$.ajax({
url: 'publish/save_image.php', type: 'POST',
data: {
id : data.id,
type : data.type,
url : url,
csrf_test_name : csrf
}
});
}
//THIS NEXT LINE BREAKS SECOND AJAX CALL
window.location = 'links.php';
}
});
from the above i can say that as soon as ajax request is made, java script executes the second line regardless of the response.
we can take the following example
$.ajax({
url: 'publish/submit_link.php',
type: 'POST',
dataType: 'JSON',
data: {
link : link,
title : title,
},
success: function (data)
{
console.log(data);
}
});
for(var i = 0; i < 15000000; i++)
{
console.log(i);
}
you may see the output as follows
1
2
3
.
.
.
1000
data//response of ajax
.
.
14999999
so to avoid that you can use either jQuery.when() our ajax success function.
Hopefully this will help you

Change window location Jquery

I am using ajax to load my website content and want to update the window location when ajax is successful.
How can I update the window location to "/newpage"?? I need users to be able to go back and to refresh. Is this possible??
I'm assuming you're using jquery to make the AJAX call so you can do this pretty easily by putting the redirect in the success like so:
$.ajax({
url: 'ajax_location.html',
success: function(data) {
//this is the redirect
document.location.href='/newpage/';
}
});
You can set the value of document.location.href for this purpose. It points to the current URL. jQuery is not required to do this.
you can use the new push/pop state functions in the history manipulation API.
Assuming you want to change the url to another within the same domain, you can use this:
history.pushState('data', '', 'http://www.yourcurrentdomain.com/new/path');
If you want to use the back button, check this out. https://stackoverflow.com/questions/116446/what-is-the-best-back-button-jquery-plugin
Use document.location.href to change the page location, place it in the function on a successful ajax run.
I'm writing common function for change window
this code can be used parallel in all type of project
function changewindow(url,userdata){
$.ajax({
type: "POST",
url: url,
data: userdata,
dataType: "html",
success: function(html){
$("#bodycontent").html(html);
},
error: function(html){
alert(html);
}
});
}

Categories