title: How to set Bootstrap modal button attribute by JavaScript
body: <p>I have two Bootstrap buttons in a Grails application triggering similar functions, each opening the same modal to ask the user to enter credentials:</p>
  
  <pre><code>&lt;button type="button" class="btn btn-success" data-toggle="modal" mykey="postcard" data-target="#credentialsModal"&gt;Send a postcard&lt;/button&gt;
  &lt;button type="button" class="btn btn-success" data-toggle="modal" mykey="letter" data-target="#credentialsModal"&gt;Send a letter&lt;/button&gt;
  &lt;div class="modal fade" id="credentialsModal" role="dialog"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
          &lt;h4 class="modal-title"&gt;Please enter your credentials&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;g:form&gt;
            &lt;div class="input-group"&gt;
              &lt;span class="input-group-addon"&gt;User&lt;/span&gt;
              &lt;g:textField name="myUsername" size="24" class="form-control" /&gt;
            &lt;/div&gt;
            &lt;div class="input-group"&gt;
              &lt;span class="input-group-addon"&gt;Password&lt;/span&gt;
              &lt;g:textField name="myPassword" size="24" class="form-control" /&gt;
            &lt;/div&gt;
            &lt;div align="right"&gt;
              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
              &lt;g:actionSubmit action="" value="Send" class="btn btn-success" name="cred-modal-btn-send" data-toggle="tooltip" data-placement="top" title="Enable JavaScript" /&gt;
            &lt;/div&gt;
          &lt;/g:form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
    $('#credentialsModal').on('show.bs.modal', function (event) {
      var key = $(event.relatedTarget)[0].getAttribute("mykey");
      if (key.localeCompare('postcard') == 0){
          $(this).find('.modal-body .cred-modal-btn-send').attr('action', 'sendPostcard');
          $(this).find('.modal-body .cred-modal-btn-send').attr('name', '_action_sendPostcard');
      }
      else if (key.localeCompare('letter') == 0){
          $(this).find('.modal-body .cred-modal-btn-send').attr('action', 'sendLetter');
          $(this).find('.modal-body .cred-modal-btn-send').attr('name', '_action_sendLetter');
      }
    })
  &lt;/script&gt;
  </code></pre>
  
  <p>Problem is: my attempt to address the button's attributes with <code>$(this).find('.modal-body .cred-modal-btn-send').attr(...)</code> fails. The rendered HTML still shows the original attribute values, unmodified by the script. I've checked that I do address the modal by <code>$(this).find('.modal-body')</code>. What's wrong here?</p>