1

In my HTML page , I have the following div:

<div id="notification"></div>

An ajax call add some attribute to that div after receiving successful response.This is what the ajax success does:

$("form").on("submit", function (e) {
        e.preventDefault();
        $.ajax({
            dataType: 'json',
            type: "POST",
            url: "/dummy/url",
            data: {Redacted},
            success: function (data) {
                $('#notification').attr({'data-status': data['status'], 'data-message': data['message']});
                $('#notification').click();
                $('#notification').removeAttr("data-status data-message");
            }
        });
    });

The problem is the attributes of #notification does not go away after using removeAttr. I mean it removes the attributes from the page, but remains as cached. Thats why I am getting same data-message on every click though the server returns different data-message.

For example:

In my first ajax call, server returned:

{"status":"success","message":"Invitation sent"} In this case the #notification triggers and shows me data-message="Invitation Sent". But in my second call server returned:

{"status":"danger","message":"Invitation sending failed"} But #notification shows data-message="Invitation Sent" again.

Any suggestion for me on this? How can I remove the cached data? Or is there any alternative of what I am doing up there?

Tarek Siddiki
  • 137
  • 1
  • 2
  • 12
  • Check the value of `data` inside your `success` callback. Is it being cached? If so, [this solution](http://stackoverflow.com/a/18880122/901048) may be all you need. – Blazemonger Oct 22 '15 at 14:50
  • use `data()` and `removeData()` instead – epascarello Oct 22 '15 at 14:50
  • If I had to guess, there's an click event listener on `#notification` that grabs the `data-status` and `data-message` data to pass into another function. Why not just skip simulating the click and handling resulting event and instead pass `data.status` and `data.message` directly into the method called by the click listener? – bcr Oct 22 '15 at 14:50
  • what @Brian suggests is better way to handle the notifications. You should go with it. And if you can provide some jsbin or jsfiddle for your problem we could provide better solution or explanation to your problem. – guleria Oct 22 '15 at 15:00
  • *"But #notification shows data-message="Invitation Sent" again."* Where? – Kevin B Oct 22 '15 at 15:03
  • @Blazemonger , data inside success is not being cached. – Tarek Siddiki Oct 22 '15 at 15:05
  • @KevinB the attributes are changing in my div after success call. But it shows the old attributes when triggers. – Tarek Siddiki Oct 22 '15 at 15:06
  • @TarekSiddiki How are you testing that? – Kevin B Oct 22 '15 at 15:06
  • @TarekSiddiki my first comment is the correct way to do this, but to completely prevent caching add a timestamp query string to the URL you're calling. – bcr Oct 22 '15 at 15:06
  • @Brian the ajax request isn't being cached. – Kevin B Oct 22 '15 at 15:07
  • 1
    The difficulty in this question is the misconception that something is being cached. Nothing is being cached, you're using a POST request, and .attr doesn't do any kind of caching. The problem isn't being described very well, and with such little code in the question, it's impossible to figure out what the real problem is. My only guess is that inside the click handler you are triggering you are using .data() to retrieve the attribute value which of course copies the values from teh attribute to an internal data storage *that is from then on completely separated from attributes*. – Kevin B Oct 22 '15 at 15:13
  • If that were the case, simply switching to using .attr across the board would fix it. – Kevin B Oct 22 '15 at 15:17
  • @KevinB [Relevant example](http://stackoverflow.com/questions/19520349/changing-data-attribute-isnt-working/19520429#19520429). If that's the real problem, this question should be considered a duplicate. – Blazemonger Oct 22 '15 at 15:33
  • @KevinB to add to what you said - if you change a data-* attribute's value, you need to access it using `attr('data-*')` instead of `data()`. – bcr Oct 22 '15 at 17:43

1 Answers1

0

Instead of using attribute, use data(). If you had already used data() to read the attribute it is going to be cached as a property of the element.

success: function (data) {
    var elementData = {
        status: data['status'],
        message: data['message']
    }

    $('#notification').data(elementData);
    $('#notification').click();
    // not sure why it needs to be removed here
    // if it does use `removeData()

}
charlietfl
  • 170,828
  • 13
  • 121
  • 150