Showing ajax call result in bootstrap modal
Solution 1
You are binding the click event when the modal gets shown and you never show the modal so the click handler never gets bound.
You can do something like this:
$('.see-user').on('click', function(e) {
e.preventDefault();
var id = $(this).data('id');
$.ajax({
url: 'getUser',
type: 'POST',
data: {id: id},
success: function(html){
$('#seeProfile .modal-body p').html('test');
$('#seeProfile').modal('show');
},
error: function(){
alert("error");
}
});
});
If you do want to add the click handler when the modal gets shown, you need to use the appropriate handlers. You can find them here (below Events).
Solution 2
You should replace
$('#seeProfile .modal-body .p').html('test');
By
$('#seeProfile .modal-body p').html('test');
Because you're are looking for a class called 'p'
if you insert a dot before. For a html tag <p></p>
you just have to write 'p
' in the selector.
And complete with the "$('#seeProfile').modal('show');
" to show the modal.
Comments
-
Limon almost 2 years
I need to show multiple data in a Bootstrap modal. For that what I did was this:
js file:
$('#seeProfile').on('show', function() { $('.see-user').on('click', function(e) { e.preventDefault(); var id = $(this).data('id'); $.ajax({ url: 'getUser', type: 'POST', data: {id: id}, success: function(html){ $('#seeProfile .modal-body .p').html('test'); }, error: function(){ alert("error"); } }); }); });
view snippet (modal):
<div id="seeProfile" class="modal hide fade" tabindex="-1" data-replace="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button> <h3>Perfil de Usuario</h3> </div> <div class="modal-body"> <p></p> </div> <div class="modal-footer"> <button type="button" data-dismiss="modal" class="btn">Close</button> </div>
This is not working. Modal is not showing up, but when inspecting this no errors appear. What am I doing wrong?
EDIT
Given the answers I have realized I missed a dot, so success function should be like:
$('#seeProfile .modal-body p').html("test");
Now That modal is working I need to know how to "insert" data into this new modal organization:
<div id="seeProfile" class="modal hide fade" tabindex="-1" data-replace="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button> <h3>Perfil de Usuario</h3> </div> <div class="modal-body"> <div class="scroller" style="height:300px" data-always-visible="1" data-rail-visible="1"> <div class="row-fluid"> <div class="span6"> <h5>Usuario</h5> <p><input type="text" class="span12 m-wrap" id="username" readonly></p> <h5>Nombre</h5> <p><input type="text" id="name" class="span12 m-wrap" value="" readonly></p> </div> <div class="span6"> <h5>Email</h5> <p><input type="text" class="span12 m-wrap" readonly></p> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" data-dismiss="modal" class="btn">Close</button> </div>
as you can see there are many "< p >" tags inside modal-body. I have tried inserting an id to it so it can be distinct but it's not working for me. How can I do this?