Level 28
Is your .done() callback executed correctly?
May 7, 2019
3
Level 1
Script works in console but not in original code
$('#edit-post').modal('hide'); works in console, but doesn't work in the script file. I also don't see the new information unless I refresh the page. Thanks in advance!
The script file:
var postId = 0;
var postBodyElement = null;
$('.post').find('.interaction').find('.edit').on('click',function(event){
event.preventDefault();
postBodyElement = event.target.parentNode.parentNode.childNodes[1];
var postBody = postBodyElement.textContent;
//postId = event.target.parentNode.parentNode.dataset['postid'];
postId = event.target.dataset.postid;
$('#post-content').val(postBody);
$('#edit-post').modal();
});
$('#modal-save').on('click',function(){
$.ajax({
method: 'POST',
url: url,
data: {body: $('#post-content').val(), postId: postId, _token: token}
})
.done(function (msg){
//console.log(msg['message']);
//console.log(JSON.stringify(msg));
$(postBodyElement).text(msg['new_content']);
$('#edit-post').modal('hide');
})
});
The file is loaded in the master html using:
...
</head>
<body>
@include('includes.header')
<div class="container">
@yield('content')
</div>
<!--<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>-->
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src={{ URL::to('src/js/app.js') }}></script>
</body>
</html>
After I hit "save" button in the modal it should close automatically and the page should be reflect the new data.
Level 67
wrap your js in a domready event, so it only gets triggered once the dom is complete and all elements present. The dom is already completed when you add it in via console.
Please or to participate in this conversation.