How do you update an existing Bootstrap modal data-target?

Question

I tried to update an existing data-target with a data-target="#testModal1" to point to the #testModal2 modal using jquery .data, but even after the data attribute change it still is linked to #testModal1

//Jquery:

$('#testButton').data('target', '#testModal2')

<!-- HTML: -->


<button id='testButton' data-toggle="modal" data-target="#testModal1">
      Test
    </button>

<div class="modal fade" id="testModal1" tabindex="-1" role="dialog" aria-hidden="true" style='display:none'>
  <div class="modal-dialog">
    <div class="modal-content">
      Testing Testing 1
    </div>
  </div>
</div>

<div class="modal fade" id="testModal2" tabindex="-1" role="dialog" aria-hidden="true" style='display:none;'>
  <div class="modal-dialog">
    <div class="modal-content">
      Testing Testing 2
    </div>
  </div>
</div>

Answer 1

Let's look in the jQuery documetation what .data() is:

.data()

Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.

.data( key, value )

Description: Store arbitrary data associated with the matched elements.

• key

  Type: String

  A string naming the piece of data to set.

• value

  Type: Object

  The new data value; it can be any Javascript type including Array or Object.

---

Using $('#testButton').data('target','#testModal2') you will not modify the data-target attribute but you will store the string "#testModal2" in "target" field. Then $('#testButton').data('target') will return "#testModal2".

It's true that .data('key') can be used to return the data-key attribute value. But you cannot set it using .data('key', 'newValue').

To set an attribute value the most common and easy way is to use .attr() method.

So, the answer is easy: change data in attr and use data-target instead of target:

$('#testButton').attr('data-target','#testModal2');

JSFIDDLE