I'm not sure what I'm doing wrong, but I've searched in all "passing data to a bootstrap modal" posts, but still can't find the answer.

I have a table with users. In each row there is a "delete user button". When you click on "delete", a modal shows up which the legend: "Are you sure you want to delete?"

I want the username to be displayed in that legend, so I send the username to a JS file but it doesn't show. Nothing appears.

This is the delete button in every row:

   <td><a href="#" onclick="callToModal({$frontuser->username});return false;" class="btn mini red-stripe" role="button" >Delete</a></td>

I'm using smarty that's why the parameter looks like this: {$frontuser->username}

Above that code, I have the definition of the modal:

 <!-- 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"></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 blue" id="deleteok">Confirmar</button>
       </div>
</div>
<!-- end modal -->

Then my JS file is:

function callToModal(data) {
  $("#myModal3 .modal-header h3").html("Eliminar");
  $("#myModal3 .modal-body p").html("Are you sure you want to delete: ", data);
  $("#myModal3").modal("show");
}

Any help would be much appreciated!

I'm not sure what I'm doing wrong, but I've searched in all "passing data to a bootstrap modal" posts, but still can't find the answer.

I have a table with users. In each row there is a "delete user button". When you click on "delete", a modal shows up which the legend: "Are you sure you want to delete?"

I want the username to be displayed in that legend, so I send the username to a JS file but it doesn't show. Nothing appears.

This is the delete button in every row:

   <td><a href="#" onclick="callToModal({$frontuser->username});return false;" class="btn mini red-stripe" role="button" >Delete</a></td>

I'm using smarty that's why the parameter looks like this: {$frontuser->username}

Above that code, I have the definition of the modal:

 <!-- 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"></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 blue" id="deleteok">Confirmar</button>
       </div>
</div>
<!-- end modal -->

Then my JS file is:

function callToModal(data) {
  $("#myModal3 .modal-header h3").html("Eliminar");
  $("#myModal3 .modal-body p").html("Are you sure you want to delete: ", data);
  $("#myModal3").modal("show");
}

Any help would be much appreciated!

• javascript
• jquery
• twitter-bootstrap
• modal-dialog
• smarty

2 Answers 2

Finally after searching about smarty and js sintax, i found what the problem was.

Simply, it needed some ' ' wrapping the parameter.

So the right way of sending a parameter to JS from SMARTY is this:

<td><a href="#" onclick="callToModal('{$frontuser->username}');" class="btn mini red-stripe" role="button" >Eliminar</a></td>

Why do you have the ma in your .html() call? Simple typo maybe?

$("#myModal3 .modal-body p").html("Are you sure you want to delete: ", data);

It looks like "data" is the name ing from the function call in the delete row? Just change the ma to a + to add the name to the string if that's what you're trying to do.

$("#myModal3 .modal-body p").html("Are you sure you want to delete: "+ data);