How to implement a confirmation window correctly using jquery, html and the Twitter boot framework

advertisements

im using the twitter bootstrap framework and im a little confuse triyng to implement correctly a modal (a confirmation window).

The thing is, at the moment my site renders a table with links, ammong each link there is a "delete button", when the user hits it they go to another page asking for confirmation, the button to confirm is just a link like delete.php?ref=THE-LINK. The string THE-LINK is just an unique id passed by jquery in order to identify what link to delete:

$('.remove_link').live('click', function(e) {   window.location = 'delete.php?ref=' + $(this).attr('id');  });

Ok, now i dont want the user to go from the table page to the delete page, i want to use a modal. The twitter modal works very easy, just including the html for the format and the javascript:

<script src="JS/jquery-1.7.min.js"></script>
<script src="JS/bootstrap-modal.js"></script>
          <div id="modal-from-dom" class="modal hide fade">
            <div class="modal-header">
              <a href="#" class="close">&times;</a>
              <h3>Delete URL</h3>
            </div>
            <div class="modal-body">
              <p>You are about to delete one track url, this procedure is irreversible.</p>
              <p>Do you want to proceed?</p>
            </div>
            <div class="modal-footer">
              <a href="delete.php?confirm=yes&ref=THE-URL" class="btn danger">Yes</a>
              <a href="#" class="btn secondary">No</a>
            </div>
          </div>

Then you can fire it up just by: $('#modal-from-dom').modal('show'); . The thing is, how can i pass the id THE-URL to the modal in order to make it dynamic, because at this point the modal ask me for two options (links, yes or no) but the links have to be dynamics, has to change depending of the id of the delete button ($(#remove_link).attr('id')) who call it. So how can i make this work? Thanks for any help!


Check this example I've created: http://jsfiddle.net/MjmVr/1/
It's not ideal but do the job.