How to pass a string to a bootstrap modal?

Question

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!

score 4 · Accepted Answer · answered Nov 19 '13 at 15:48

4

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>

answered Nov 19 '13 at 15:48

Limon

1,772
7
32
61

@Daved yes :) i just needed the quotes ' ' – Limon Nov 20 '13 at 21:49

score 1 · Answer 2 · answered Nov 18 '13 at 20:53

1

Why do you have the comma 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 coming from the function call in the delete row? Just change the comma 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);

answered Nov 18 '13 at 20:53

Daved

2,082
1
18
23

thx a lot for the answer. I changed the comma for a + and now it works but only with numbers, not with a string as i want. I was doing some test, and instead of sending as a parameter the username, i sended his ID and it perfectly appears on the modal. But that's not the case of the string i can't figure out why. Yes, data is the parameter i send from this sentence: Delete – Limon Nov 19 '13 at 14:28
when i inspect on my browser, 1 error appears, it says that the user is not defined. I don't really understand why. I think the problem could be because the function call is inside a foreach – Limon Nov 19 '13 at 15:13

How to pass a string to a bootstrap modal?

2 Answers2