modal is not showing up at once

Question

I have a table and each row has a delete button. Once that delete button is pressed, a modal should show up to ask for some confirmation.

The problem here is that, the very first time i load the page, I have to click twice (in the delete button i want) to see the modal. Once i did that, the next time i press on any delete button of any row the modal shows up at once...just one click is needed.

I would like to know why and how i can correct it.

View:

<!-- modal -->
  <div id="myModal3" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
     <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h3 id="myModalLabel3">Eliminar</h3>
     </div>
     <div class="modal-body">
        <p></p>
     </div>
     <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button>
        <button data-dismiss="modal" class="btn red" id="btnYes">Confirmar</button>
     </div>
   </div>
   <!-- end modal -->

js file:

function callToModal(data){
 $('#myModal3 .modal-body p').html("Desea eliminar al usuario " + '<b>' + data + '</b>' + ' ?');

  $('.confirm-delete').on('click', function(e) {
  e.preventDefault();
  var id = $(this).data('id');
  $('#myModal3').data('id', id).modal('show');
  });

  $('#btnYes').click(function() {
  // handle deletion here
  var id = $('#myModal3').data('id');
  // alert(id);
  $.ajax({
    url: "deleteFrontUser",
    type: 'POST',
    data: 'id='+id,
      success: function(html){
        // alert(html);
        $('[data-id='+id+']').parents('tr').remove();
        $('#myModal3').modal('hide');
      }      
    });
   return false;
  });
};

Answer 1

the problem was that i was calling a function (one click) and then nothing triggered. I change the code and now it's working super! here you can check it out:

http://bootply.com/97366

View:

Is the same that in my question, but only changed the modal name to "myModal".

Js File:

$('#myModal').on('show', function() {
 var id = $(this).data('id'),
 username = $(this).data('usern');

 $('#myModal .modal-body p').html("Desea eliminar al usuario " + '<b>' + username + '</b>' + ' ?');
})

$('.confirm-delete').on('click', function(e) {
  e.preventDefault();

  var id = $(this).data('id');
  var user = $(this).data('title');

  $('#myModal').data('id', id).modal('show');
  $('#myModal').data('usern', user).modal('show');
});

$('#btnYes').click(function() {
var id = $('#myModal').data('id');

$.ajax({
  url: 'deleteFrontUser',
  type: 'POST',
  data: 'id='+id,
  success: function(html){

    $('[data-id='+id+']').parents('tr').remove();
    $('#myModal').modal('hide');
  }      
});
return false;
});

What i also did, was to add "data-title" atribute in the html, like this:

<td><a href="#" class="confirm-delete btn mini red-stripe" role="button" data-title="{$frontuser->username}" data-id="{$frontuser->id}">Eliminar {$frontuser->id} {$frontuser->username} </a></td>

data-title stores the username so jquery can sustract it later. Please notice that i'm using smarty template engine.

Hope this can help newbies like me :)

Answer 2

Try saving the id you pass there (I suppose it's the id of the user in the list) to a global variable which will be always overridden with the last id of the corresponding row where you pressed the delete button.

and then you can just call the modal like this:

 $('#myModal3').modal('show');

After this you can get the id from the global variable and pass it to the ajax post