I'm building a NodeJs App with some Bootstrap modals in the same view. The HTML(ejs) looks like:
<!--Main link-->
<a id = "myLink" data-toggle="modal" href="/path/to/myModal.ejs" data-nom="<%=user.name%>" data-id="<%=user._id%>" data-curs="<%=user.level%>" data-body = "<%=user.body%>" data-target="#ModalUpd">Update body</a>
<!-- Call the remote Modal-->
<div class="modal fade" id="modalUpd" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
</div>
</div>
</div>
This link calls this remote Modal:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Update user</title>
</head>
<body>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
Update user
</div>
<div class="modal-body">
<strong>User: </strong><span id="userNom"></span>
<strong>Curs: </strong><span id="userCurs"></span>
<!--BODY UPDATE-->
<form role="form" method="post" id="upd">
<label for="BodyUpd">Body</label>
<textarea class="form-control" rows="3" id="BodyUpd" form="upd"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" form="upd" class="btn btn-success btn-block" id="updBtn">Update</button>
</div>
</body>
</html>
and there is a jQuery file containing:
$(document).on("click", "#myLink", function (e) {
e.preventDefault();
var userN = $(this).data('nom');
var userC = $(this).data('curs');
var userId = $(this).data('id');
var userbody = $(this).data('body');
jQuery(document).ready(function (){
$("#userN").text(userN);
$("#userC").text(userC);
$("#BodyUpd").attr("name", "user.body");
$("#BodyUpd").val(body);
$('#updBtn').on('submit', function(e){
e.preventDefault();
var urlPost = "/path/" + userId + "/otherpath/" + "?_method=put";
$('#modalUpd').modal('toggle');
$.ajax({
url: urlPost
type: 'POST',
data: $('#upd').serialize()
});
location.reload();
});
});
});
It works perfect, but never on first call. The first time I call the modal, all the fields are empty, with no user data. When I close the modal and re-call, then appears all the user data in the modal. I'm pretty new in jQuery and I think I'm doing something wrong with "$(document).ready" but I don't know what... I've tried a lot of different possibilities, but this is the best I found. Hope you can help me. Thanks!
via cfibla
No comments:
Post a Comment