I am using jQuery 3.6
I am deleting a nested element from a portion of my page, and I want that section of the page to automatically update, to reflect the change - I was expecting the browser to automatically update the modified section, but it doesn't and the change is only visible when I refresh the page.
Here is a snippet of the HTML:
<div id="foo" class="row text-center text-lg-left">
<div class="col-lg-3 col-md-4 col-6">
<a id="abc-1"><img src="image1"></a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a id="abc-2"><img src="image2"></a>
</div>
<!-- etc -->
</div>
Here is my Javascript snippet:
$.ajax({
type: 'post',
url: "/path/to/post/to",
data: {'identifier': $(this).attr('id'), 'status':1, 'csrfmiddlewaretoken': '1234567abc'},,
success: function(data) {
/* assume we have variable named 'identifier' ... */
$(`a#${identifier}`).parent().remove();
/* next two lines is a brute-force attempt to
force the element to update - but it still
doesn't update, until I refresh the page!
*/
let remaining_content = $('div#foo').html()
$('div#foo').html(remaining_content);
},
error: function(xhr, status, error) {
var err = JSON.parse(xhr.responseText);
alert(status);
alert(error);
alert(err.Message);
}
});
How do I get the div with id foo
to update (ideally with some nice color fade-in/out) when it's content changes (deletion of elements in this case) - without having to refresh the browser to observe the change?
Comments
Post a Comment