0

I have a Bootstrap modal on my site that is launched once on the homepage to direct the user to the appropriate section of the site. The code with the data attributes can be see in a previous question I recently posted.

I just realized that when I click on a link, the data attributes are passed into the modal as expected, but if I close the modal to click a different link, the previous data is still in cache and is being entered into the new link along with the new link values.

In order to try and clear the modal values, I looked at other posts but can't seem to get it to work. Below is one of my many non-working efforts.

$(".modal").on("hidden.bs.modal", function(){
    $('.modal-content a').removeData('category', 'subcategory');
});
Charles Smith
  • 3,201
  • 4
  • 36
  • 80

1 Answers1

1

data and removeData never write to or remove data-* attributes. data and removeData manage jQuery's data cache, which is only initialized from data-* attributes.

To actually remove a data-* attribute, use attr("name", null) or .attr({name: null, anotherName: null}).

$(".modal").on("hidden.bs.modal", function(){
    $('.modal-content a').attr({
        'data-category': null,
        'data-subcategory': null
    });
});

Note that to include - in the attribute names, you'll need to use quotes around the property name (either single or double quotes are fine).

See also: jQuery .data() does not work, but .attr() does. If you're not using the features of the jQuery data cache, you probably want to change your code in the other question to use attr to get the values instead. No need to duplicate the data to cache if you're not going to use that going forward.

Live Example:

$("#btn").on("click", function(){
    $('.modal-content a').attr({
        'data-category': null,
        'data-subcategory': null
    });
    $("<p>").text("Now right-click and check again").appendTo(document.body);
});
<p>Right-click the link below and use Inspect Element to look at its attributes, then press <button id="btn" type="button">this button</button></p>
<div class="modal-content">
  <a href="#" data-category="cat" data-subcategory="subcat">this is the link</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • So I adjusted my other code as suggested to use attr and the function still works and I used the code above to clear the attributes but its still not clearing. Any ideas? – Charles Smith Jan 01 '18 at 02:39
  • @StudioRooster: The above clearly works (I've added a live example). You'll need to update your question with a [mcve] demonstrating the problem, ideally a **runnable** one using Stack Snippets (the `[<>]` toolbar button; [here's how to do one](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-do-a-runnable-example-with-stack-snippets-how-do-i-do-tha)). – T.J. Crowder Jan 01 '18 at 10:15
  • T.J. Removing the turbolinks gem from my app and your solution worked. Thanks, – Charles Smith Jan 06 '18 at 00:35