RSS

Most votes on ajax questions 7

Most votes on ajax questions 7. #61 How to Convert JSON object to Custom C# object? #62 JavaScript/jQuery to download file via POST with JSON data #63 Pass request headers in a jQuery AJAX GET call #64 Can you call ko.applyBindings to bind a partial view? #65 How do I make jQuery wait for an Ajax call to finish before it returns? #66 How to use FormData for AJAX file upload? #67 How to get the jQuery $.ajax error response text? #68 Jquery Ajax Posting JSON to webservice #69 How to cancel/abort jQuery AJAX request? #70 Stop jQuery .load response from being cached

Read all the top votes questions and answers in a single page.

#61: How to Convert JSON object to Custom C# object? (Score: 266)

Created: 2010-02-11 Last updated: 2019-04-09

Tags: c#, asp.net, .net, ajax, json

Is there an easy way to populate my C# Object with the JSON object passed via AJAX?

This is the JSON Object passed to C# WEBMETHOD from the page using JSON.stringify

{
    "user": {
        "name": "asdf",
        "teamname": "b",
        "email": "c",
        "players": ["1", "2"]
    }
}

C# WebMetod That receives the JSON Object

[WebMethod]
public static void SaveTeam(Object user)
{
        
}

C# Class that represents the object structure of JSON Object passed in to the WebMethod

public class User
{
    public string name { get; set; }
    public string teamname { get; set; }
    public string email { get; set; }
    public Array players { get; set; }
}

#61 Best answer 1 of How to Convert JSON object to Custom C# object? (Score: 239)

Created: 2015-01-21 Last updated: 2018-12-19

Since we all love one liners code

Newtonsoft is faster than java script serializer. … this one depends on the Newtonsoft NuGet package, which is popular and better than the default serializer.

if we have class then use below.

Mycustomclassname oMycustomclassname = Newtonsoft.Json.JsonConvert.DeserializeObject<Mycustomclassname>(jsonString);

no class then use dynamic

var oMycustomclassname = Newtonsoft.Json.JsonConvert.DeserializeObject<dynamic>(jsonString);

#61 Best answer 2 of How to Convert JSON object to Custom C# object?(Score: 228)

Created: 2010-02-11 Last updated: 2019-03-08

A good way to use JSON in C# is with JSON.NET

Quick Starts & API Documentation from JSON.NET - Official site help you work with it.

An example of how to use it:

public class User
{
    public User(string json)
    {
        JObject jObject = JObject.Parse(json);
        JToken jUser = jObject["user"];
        name = (string) jUser["name"];
        teamname = (string) jUser["teamname"];
        email = (string) jUser["email"];
        players = jUser["players"].ToArray();
    }

    public string name { get; set; }
    public string teamname { get; set; }
    public string email { get; set; }
    public Array players { get; set; }
}

// Use
private void Run()
{
    string json = @"{""user"":{""name"":""asdf"",""teamname"":""b"",""email"":""c"",""players"":[""1"",""2""]}}";
    User user = new User(json);

    Console.WriteLine("Name : " + user.name);
    Console.WriteLine("Teamname : " + user.teamname);
    Console.WriteLine("Email : " + user.email);
    Console.WriteLine("Players:");

    foreach (var player in user.players)
        Console.WriteLine(player);
 }

See also original question in stackoverflow

#62: JavaScript/jQuery to download file via POST with JSON data (Score: 260)

Created: 2010-08-17 Last updated: 2017-05-12

Tags: javascript, jquery, ajax, rest

I have a jquery-based single-page webapp. It communicates with a RESTful web service via AJAX calls.

I’m trying to accomplish the following:

  1. Submit a POST that contains JSON data to a REST url.
  2. If the request specifies a JSON response, then JSON is returned.
  3. If the request specifies a PDF/XLS/etc response, then a downloadable binary is returned.

I have 1 & 2 working now, and the client jquery app displays the returned data in the web page by creating DOM elements based on the JSON data. I also have #3 working from the web-service point of view, meaning it will create and return a binary file if given the correct JSON parameters. But I’m unsure the best way to deal with #3 in the client javascript code.

Is it possible to get a downloadable file back from an ajax call like this? How do I get the browser to download and save the file?

$.ajax({
	type: "POST",
	url: "/services/test",
	contentType: "application/json",
	data: JSON.stringify({category: 42, sort: 3, type: "pdf"}),
	dataType: "json",
	success: function(json, status){
        if (status != "success") {
            log("Error loading data");
            return;
        }
        log("Data loaded!");
	},
	error: function(result, status, err) {
        log("Error loading data");
        return;
	}
});

The server responds with the following headers:

Content-Disposition:attachment; filename=export-1282022272283.pdf
Content-Length:5120
Content-Type:application/pdf
Server:Jetty(6.1.11)

Another idea is to generate the PDF and store it on the server and return JSON that includes a URL to the file. Then, issue another call in the ajax success handler to do something like the following:

success: function(json,status) {
    window.location.href = json.url;
}

But doing that means I would need to make more than one call to the server, and my server would need to build downloadable files, store them somewhere, then periodically clean up that storage area.

There must be a simpler way to accomplish this. Ideas?


EDIT: After reviewing the docs for $.ajax, I see that the response dataType can only be one of xml, html, script, json, jsonp, text, so I’m guessing there is no way to directly download a file using an ajax request, unless I embed the binary file in using Data URI scheme as suggested in the @VinayC answer (which is not something I want to do).

So I guess my options are:

  1. Not use ajax and instead submit a form post and embed my JSON data into the form values. Would probably need to mess with hidden iframes and such.

  2. Not use ajax and instead convert my JSON data into a query string to build a standard GET request and set window.location.href to this URL. May need to use event.preventDefault() in my click handler to keep browser from changing from the application URL.

  3. Use my other idea above, but enhanced with suggestions from the @naikus answer. Submit AJAX request with some parameter that lets web-service know this is being called via an ajax call. If the web service is called from an ajax call, simply return JSON with a URL to the generated resource. If the resource is called directly, then return the actual binary file.

The more I think about it, the more I like the last option. This way I can get information back about the request (time to generate, size of file, error messages, etc.) and I can act on that information before starting the download. The downside is extra file management on the server.

Any other ways to accomplish this? Any pros/cons to these methods I should be aware of?

#62 Best answer 1 of JavaScript/jQuery to download file via POST with JSON data (Score: 170)

Created: 2011-12-06 Last updated: 2015-11-06

letronje’s solution only works for very simple pages. document.body.innerHTML += takes the HTML text of the body, appends the iframe HTML, and sets the innerHTML of the page to that string. This will wipe out any event bindings your page has, amongst other things. Create an element and use appendChild instead.

$.post('/create_binary_file.php', postData, function(retData) {
  var iframe = document.createElement("iframe");
  iframe.setAttribute("src", retData.url);
  iframe.setAttribute("style", "display: none");
  document.body.appendChild(iframe);
}); 

Or using jQuery

$.post('/create_binary_file.php', postData, function(retData) {
  $("body").append("<iframe src='" + retData.url+ "' style='display: none;' ></iframe>");
}); 

What this actually does: perform a post to /create_binary_file.php with the data in the variable postData; if that post completes successfully, add a new iframe to the body of the page. The assumption is that the response from /create_binary_file.php will include a value ‘url’, which is the URL that the generated PDF/XLS/etc file can be downloaded from. Adding an iframe to the page that references that URL will result in the browser promoting the user to download the file, assuming that the web server has the appropriate mime type configuration.

#62 Best answer 2 of JavaScript/jQuery to download file via POST with JSON data(Score: 56)

Created: 2014-09-30 Last updated: 2017-05-12

I’ve been playing around with another option that uses blobs. I’ve managed to get it to download text documents, and I’ve downloaded PDF’s (However they are corrupted).

Using the blob API you will be able to do the following:

$.post(/*...*/,function (result)
{
    var blob=new Blob([result]);
    var link=document.createElement('a');
    link.href=window.URL.createObjectURL(blob);
    link.download="myFileName.txt";
    link.click();

});

This is IE 10+, Chrome 8+, FF 4+. See https://developer.mozilla.org/en-US/docs/Web/API/URL.createObjectURL

It will only download the file in Chrome, Firefox and Opera. This uses a download attribute on the anchor tag to force the browser to download it.

See also original question in stackoverflow

#63: Pass request headers in a jQuery AJAX GET call (Score: 258)

Created: 2010-07-15 Last updated: 2015-04-19

Tags: jquery, ajax, client-side

I am trying to pass request headers in an AJAX GET using jQuery. In the following block, “data” automatically passes the values in the querystring. Is there a way to pass that data in the request header instead ?

$.ajax({
         url: "http://localhost/PlatformPortal/Buyers/Account/SignIn",
         data: { signature: authHeader },
         type: "GET",
         success: function() { alert('Success!' + authHeader); }
      });

The following didn’t work either

$.ajax({
         url: "http://localhost/PlatformPortal/Buyers/Account/SignIn",
         beforeSend: { signature: authHeader },
         async: false,                    
         type: "GET",
                    success: function() { alert('Success!' + authHeader); }
      });

#63 Best answer 1 of Pass request headers in a jQuery AJAX GET call (Score: 415)

Created: 2012-09-11

As of jQuery 1.5, there is a headers hash you can pass in as follows:

$.ajax({
    url: "/test",
    headers: {"X-Test-Header": "test-value"}
});

From http://api.jquery.com/jQuery.ajax:

headers (added 1.5): A map of additional header key/value pairs to send along with the request. This setting is set before the beforeSend function is called; therefore, any values in the headers setting can be overwritten from within the beforeSend function.

#63 Best answer 2 of Pass request headers in a jQuery AJAX GET call(Score: 309)

Created: 2010-07-15 Last updated: 2013-01-18

Use beforeSend:

$.ajax({
         url: "http://localhost/PlatformPortal/Buyers/Account/SignIn",
         data: { signature: authHeader },
         type: "GET",
         beforeSend: function(xhr){xhr.setRequestHeader('X-Test-Header', 'test-value');},
         success: function() { alert('Success!' + authHeader); }
      });

http://api.jquery.com/jQuery.ajax/

http://www.w3.org/TR/XMLHttpRequest/#the-setrequestheader-method

See also original question in stackoverflow

#64: Can you call ko.applyBindings to bind a partial view? (Score: 258)

Created: 2011-09-08 Last updated: 2016-12-27

Tags: ajax, html, knockout.js

I’m using KnockoutJS and have a main view and view model. I want a dialog (the jQuery UI one) to popup with another view which a separate child view model to be bound to.

The HTML for the dialog content is retrieved using AJAX so I want to be able to call ko.applyBindings once the request has completed, and I want to bind the child view model to just the portion of the HTML loaded via ajax inside the dialog div.

Is this actually possible or do I need to load ALL my views and view models when the page initially loads and then call ko.applyBindings once?

#64 Best answer 1 of Can you call ko.applyBindings to bind a partial view? (Score: 431)

Created: 2011-09-08 Last updated: 2013-01-18

ko.applyBindings accepts a second parameter that is a DOM element to use as the root.

This would let you do something like:

<div id="one">
  <input data-bind="value: name" />
</div>

<div id="two">
  <input data-bind="value: name" />
</div>

<script type="text/javascript">
  var viewModelA = {
     name: ko.observable("Bob")
  };

  var viewModelB = {
     name: ko.observable("Ted")
  };

  ko.applyBindings(viewModelA, document.getElementById("one"));
  ko.applyBindings(viewModelB, document.getElementById("two"));
</script>

So, you can use this technique to bind a viewModel to the dynamic content that you load into your dialog. Overall, you just want to be careful not to call applyBindings multiple times on the same elements, as you will get multiple event handlers attached.

#64 Best answer 2 of Can you call ko.applyBindings to bind a partial view?(Score: 61)

Created: 2012-02-29 Last updated: 2014-10-05

While Niemeyer’s answer is a more correct answer to the question, you could also do the following:

<div>
  <input data-bind="value: VMA.name" />
</div>

<div>
  <input data-bind="value: VMB.name" />
</div>

<script type="text/javascript">
  var viewModels = {
     VMA: {name: ko.observable("Bob")},
     VMB: {name: ko.observable("Ted")}
  };

  ko.applyBindings(viewModels);
</script>

This means you don’t have to specify the DOM element, and you can even bind multiple models to the same element, like this:

<div>
  <input data-bind="value: VMA.name() + ' and ' + VMB.name()" />
</div>

See also original question in stackoverflow

#65: How do I make jQuery wait for an Ajax call to finish before it returns? (Score: 257)

Created: 2009-04-16 Last updated: 2010-05-31

Tags: jquery, ajax

I have a server side function that requires login. If the user is logged in the function will return 1 on success. If not, the function will return the login-page.

I want to call the function using Ajax and jQuery. What I do is submit the request with an ordinary link, with a click-function applied on it. If the user is not logged in or the function fails, I want the Ajax-call to return true, so that the href triggers.

However, when I use the following code, the function exits before the Ajax call is done.

How can I redirect the user gracefully to the loginpage?

$(".my_link").click(
    function(){
    $.ajax({
        url: $(this).attr('href'),
        type: 'GET',
        cache: false,
        timeout: 30000,
        error: function(){
            return true;
        },
        success: function(msg){	
            if (parseFloat(msg)){
                return false;
            } else {
                return true;
            }
        }
    });
});

#65 Best answer 1 of How do I make jQuery wait for an Ajax call to finish before it returns? (Score: 379)

Created: 2009-04-16 Last updated: 2020-09-15

If you don’t want the $.ajax() function to return immediately, set the async option to false:

$(".my_link").click(
    function(){
    $.ajax({
        url: $(this).attr('href'),
        type: 'GET',
        async: false,
        cache: false,
        timeout: 30000,
        fail: function(){
            return true;
        },
        done: function(msg){ 
            if (parseFloat(msg)){
                return false;
            } else {
                return true;
            }
        }
    });
});

But, I would note that this would be counter to the point of AJAX. Also, you should be handling the response in the fail and done functions. Those functions will only be called when the response is received from the server.

#65 Best answer 2 of How do I make jQuery wait for an Ajax call to finish before it returns?(Score: 47)

Created: 2012-05-15 Last updated: 2016-11-24

I am not using $.ajax but the $.post and $.get functions, so if I need to wait for the response, I use this:

$.ajaxSetup({async: false});
$.get("...");

See also original question in stackoverflow

#66: How to use FormData for AJAX file upload? (Score: 248)

Created: 2014-01-10 Last updated: 2021-01-05

Tags: javascript, jquery, ajax, file-upload

This is my HTML which I’m generating dynamically using drag and drop functionality.

<form method="POST" id="contact" name="13" class="form-horizontal wpc_contact" novalidate="novalidate" enctype="multipart/form-data">
<fieldset>
	<div id="legend" class="">
        <legend class="">file demoe 1</legend>
        <div id="alert-message" class="alert hidden"></div>
    </div>

    <div class="control-group">
        <!-- Text input-->
        <label class="control-label" for="input01">Text input</label>
        <div class="controls">
            <input type="text" placeholder="placeholder" class="input-xlarge" name="name">
            <p class="help-block" style="display:none;">text_input</p>
        </div>
        <div class="control-group">  </div>
        <label class="control-label">File Button</label>

        <!-- File Upload --> 
        <div class="controls">
            <input class="input-file" id="fileInput" type="file" name="file">
        </div>
    </div>
	<div class="control-group">    

        <!-- Button --> 
        <div class="controls">
            <button class="btn btn-success">Button</button>
        </div>
    </div>
</fieldset>
</form>	

This is my JavaScript code:

<script>
    $('.wpc_contact').submit(function(event){
        var formname = $('.wpc_contact').attr('name');
        var form = $('.wpc_contact').serialize();               
        var FormData = new FormData($(form)[1]);

        $.ajax({
            url : '<?php echo plugins_url(); ?>'+'/wpc-contact-form/resources/js/tinymce.php',
            data : {form:form,formname:formname,ipadd:ipadd,FormData:FormData},
            type : 'POST',
            processData: false,
            contentType: false,
            success : function(data){
            alert(data); 
            }
        });
   }

#66 Best answer 1 of How to use FormData for AJAX file upload? (Score: 523)

Created: 2014-01-10 Last updated: 2018-01-22

For correct form data usage you need to do 2 steps.

Preparations

You can give your whole form to FormData() for processing

var form = $('form')[0]; // You need to use standard javascript object here
var formData = new FormData(form);

or specify exact data for FormData()

var formData = new FormData();
formData.append('section', 'general');
formData.append('action', 'previewImg');
// Attach file
formData.append('image', $('input[type=file]')[0].files[0]); 

Sending form

Ajax request with jquery will looks like this:

$.ajax({
    url: 'Your url here',
    data: formData,
    type: 'POST',
    contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
    processData: false, // NEEDED, DON'T OMIT THIS
    // ... Other options like success and etc
});

After this it will send ajax request like you submit regular form with enctype="multipart/form-data"

Update: This request cannot work without type:"POST" in options since all files must be sent via POST request.

Note: contentType: false only available from jQuery 1.6 onwards

#66 Best answer 2 of How to use FormData for AJAX file upload?(Score: 41)

Created: 2014-10-13 Last updated: 2015-02-27

I can’t add a comment above as I do not have enough reputation, but the above answer was nearly perfect for me, except I had to add

type: “POST”

to the .ajax call. I was scratching my head for a few minutes trying to figure out what I had done wrong, that’s all it needed and works a treat. So this is the whole snippet:

Full credit to the answer above me, this is just a small tweak to that. This is just in case anyone else gets stuck and can’t see the obvious.

  $.ajax({
    url: 'Your url here',
    data: formData,
    type: "POST", //ADDED THIS LINE
    // THIS MUST BE DONE FOR FILE UPLOADING
    contentType: false,
    processData: false,
    // ... Other options like success and etc
})

See also original question in stackoverflow

#67: How to get the jQuery $.ajax error response text? (Score: 248)

Created: 2009-10-28 Last updated: 2015-02-09

Tags: php, javascript, jquery, ajax, error-handling

I am sending an error response to my jQuery. However, I can not get the response text (in the example below this would be Gone to the beach)

The only thing jQuery says is ‘error’.

See this example for details:

php

<?
    header('HTTP/1.1 500 Internal Server Error');
    print "Gone to the beach"
?>

jQuery

$.ajax({
    type:     "post",
    data:     {id: 0},
    cache:    false,
    url:      "doIt.php",
    dataType: "text",
    error: function (request, error) {
        console.log(arguments);
        alert(" Can't do because: " + error);
    },
    success: function () {
        alert(" Done ! ");
    }
});

Now my result ist:

log:

 [XMLHttpRequest readyState=4 status=500, "error", undefined]

alert:

Can’t do because: error

Any ideas?

#67 Best answer 1 of How to get the jQuery $.ajax error response text? (Score: 322)

Created: 2009-10-28 Last updated: 2017-06-23

Try:

error: function(xhr, status, error) {
  var err = eval("(" + xhr.responseText + ")");
  alert(err.Message);
}

#67 Best answer 2 of How to get the jQuery $.ajax error response text?(Score: 54)

Created: 2013-08-15

For me, this simply works:

error: function(xhr, status, error) {
  alert(xhr.responseText);
}

See also original question in stackoverflow

#68: Jquery Ajax Posting JSON to webservice (Score: 247)

Created: 2011-06-12 Last updated: 2021-04-01

Tags: jquery, ajax, web-services, json

I am trying to post a JSON object to a asp.net webservice.

My json looks like this:

var markers = { "markers": [
  { "position": "128.3657142857143", "markerPosition": "7" },
  { "position": "235.1944023323615", "markerPosition": "19" },
  { "position": "42.5978231292517", "markerPosition": "-3" }
]};

I am using the json2.js to stringyfy my JSON object.

and I am using jquery to post it to my webservice.

  $.ajax({
        type: "POST",
        url: "/webservices/PodcastService.asmx/CreateMarkers",
        data: markers,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(data){alert(data);},
        failure: function(errMsg) {
            alert(errMsg);
        }
  });

I am getting the following error:

Invalid JSON primitive

I have found a bunch of posts relating to this and it seems to be a really common problem but nothing i try fixes the issue.

When firebug what is being posted to the server it looks like this:

markers%5B0%5D%5Bposition%5D=128.3657142857143&markers%5B0%5D%5BmarkerPosition%5D=7&markers%5B1%5D%5Bposition%5D=235.1944023323615&markers%5B1%5D%5BmarkerPosition%5D=19&markers%5B2%5D%5Bposition%5D=42.5978231292517&markers%5B2%5D%5BmarkerPosition%5D=-3

My webservice function that is being called is:

[WebMethod]
public string CreateMarkers(string markerArray)
{
    return "received markers";
}

#68 Best answer 1 of Jquery Ajax Posting JSON to webservice (Score: 410)

Created: 2011-06-12 Last updated: 2020-09-14

You mentioned using json2.js to stringify your data, but the POSTed data appears to be URLEncoded JSON You may have already seen it, but this post about the invalid JSON primitive covers why the JSON is being URLEncoded.

I’d advise against passing a raw, manually-serialized JSON string into your method. ASP.NET is going to automatically JSON deserialize the request’s POST data, so if you’re manually serializing and sending a JSON string to ASP.NET, you’ll actually end up having to JSON serialize your JSON serialized string.

I’d suggest something more along these lines:

var markers = [{ "position": "128.3657142857143", "markerPosition": "7" },
               { "position": "235.1944023323615", "markerPosition": "19" },
               { "position": "42.5978231292517", "markerPosition": "-3" }];

$.ajax({
    type: "POST",
    url: "/webservices/PodcastService.asmx/CreateMarkers",
    // The key needs to match your method's input parameter (case-sensitive).
    data: JSON.stringify({ Markers: markers }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(data){alert(data);},
    error: function(errMsg) {
        alert(errMsg);
    }
});

The key to avoiding the invalid JSON primitive issue is to pass jQuery a JSON string for the data parameter, not a JavaScript object, so that jQuery doesn’t attempt to URLEncode your data.

On the server-side, match your method’s input parameters to the shape of the data you’re passing in:

public class Marker
{
  public decimal position { get; set; }
  public int markerPosition { get; set; }
}

[WebMethod]
public string CreateMarkers(List<Marker> Markers)
{
  return "Received " + Markers.Count + " markers.";
}

You can also accept an array, like Marker[] Markers, if you prefer. The deserializer that ASMX ScriptServices uses (JavaScriptSerializer) is pretty flexible, and will do what it can to convert your input data into the server-side type you specify.

#68 Best answer 2 of Jquery Ajax Posting JSON to webservice(Score: 19)

Created: 2011-06-12 Last updated: 2020-06-20

  1. markers is not a JSON object. It is a normal JavaScript object.
  2. Read about the data: option:

    Data to be sent to the server. It is converted to a query string, if not already a string.

If you want to send the data as JSON, you have to encode it first:

data: {markers: JSON.stringify(markers)}

jQuery does not convert objects or arrays to JSON automatically.


But I assume the error message comes from interpreting the response of the service. The text you send back is not JSON. JSON strings have to be enclosed in double quotes. So you’d have to do:

return "\"received markers\"";

I’m not sure if your actual problem is sending or receiving the data.

See also original question in stackoverflow

#69: How to cancel/abort jQuery AJAX request? (Score: 247)

Created: 2010-12-29 Last updated: 2013-11-28

Tags: ajax, jquery

I’ve an AJAX request which will be made every 5 seconds. But the problem is before the AJAX request if the previous request is not completed I’ve to abort that request and make a new request.

My code is something like this, how to resolve this issue?

$(document).ready(
    var fn = function(){
        $.ajax({
            url: 'ajax/progress.ftl',
            success: function(data) {
                //do something
            }
        });
    };

    var interval = setInterval(fn, 500);
);

#69 Best answer 1 of How to cancel/abort jQuery AJAX request? (Score: 362)

Created: 2010-12-29 Last updated: 2021-04-05

The jquery ajax method returns a XMLHttpRequest object. You can use this object to cancel the request.

The XMLHttpRequest has a abort method, which cancels the request, but if the request has already been sent to the server then the server will process the request even if we abort the request but the client will not wait for/handle the response.

The xhr object also contains a readyState which contains the state of the request(UNSENT-0, OPENED-1, HEADERS_RECEIVED-2, LOADING-3 and DONE-4). we can use this to check whether the previous request was completed.

$(document).ready(
    var xhr;
    
    var fn = function(){
        if(xhr && xhr.readyState != 4){
            xhr.abort();
        }
        xhr = $.ajax({
            url: 'ajax/progress.ftl',
            success: function(data) {
                //do something
            }
        });
    };

    var interval = setInterval(fn, 500);
);

#69 Best answer 2 of How to cancel/abort jQuery AJAX request?(Score: 6)

Created: 2013-03-26 Last updated: 2017-11-28

When you make a request to a server, have it check to see if a progress is not null (or fetching that data) first. If it is fetching data, abort the previous request and initiate the new one.

var progress = null

function fn () {    
    if (progress) {
        progress.abort();
    }
    progress = $.ajax('ajax/progress.ftl', {
        success: function(data) {
            //do something
            progress = null;
        }
    });
}

See also original question in stackoverflow

#70: Stop jQuery .load response from being cached (Score: 246)

Created: 2008-10-03

Tags: jquery, ajax, caching

I have the following code making a GET request on a URL:

$('#searchButton').click(function() {
    $('#inquiry').load('/portal/?f=searchBilling&pid=' + $('#query').val());            
});

But the returned result is not always reflected. For example, I made a change in the response that spit out a stack trace but the stack trace did not appear when I clicked on the search button. I looked at the underlying PHP code that controls the ajax response and it had the correct code and visiting the page directly showed the correct result but the output returned by .load was old.

If I close the browser and reopen it it works once and then starts to return the stale information. Can I control this by jQuery or do I need to have my PHP script output headers to control caching?

#70 Best answer 1 of Stop jQuery .load response from being cached (Score: 422)

Created: 2008-10-03 Last updated: 2010-11-17

You have to use a more complex function like $.ajax() if you want to control caching on a per-request basis. Or, if you just want to turn it off for everything, put this at the top of your script:

$.ajaxSetup ({
	// Disable caching of AJAX responses
	cache: false
});

#70 Best answer 2 of Stop jQuery .load response from being cached(Score: 110)

Created: 2010-01-28 Last updated: 2013-08-13

Here is an example of how to control caching on a per-request basis

$.ajax({
    url: "/YourController",
    cache: false,
    dataType: "html",
    success: function(data) {
        $("#content").html(data);
    }
});

See also original question in stackoverflow


Notes:
  1. This page use API to get the relevant data from stackoverflow community.
  2. Content license on this page is CC BY-SA 3.0.
  3. score = up votes - down votes.