I successfully implemented ajax on my website to update the content without refreshing the page. However, I am facing an issue where I can't replace the old content with the new one that is returned. When I use console.log(data), I can see the new HTML but I'm struggling to display it to the user.
Below is the Ajax code for submitting the form:
<script>
$(function() {
$("#show_type").submit(function(event) {
// Prevent form from submitting normally
event.preventDefault();
let friendForm = $(this);
// Send the data using post
let posting = $.post(friendForm.attr('action'), friendForm.serialize());
// if success:
posting.done(function(data) {
console.log(data); // New HTML
window.alert("Action successful");
// Perform success actions, such as changing the submit button text to 'Friend Added'
});
// if failure:
posting.fail(function(data) {
window.alert("Action failed");
// Alert the user about any 4xx or 5xx response error
});
});
});
</script>
The Google Chrome console log shows the new HTML that I want to display on the browser, but I'm unsure how to do it:
<div class="grid-container">
<div class="grid-item" start_at="10 août 2021 12:46" end_at="10 août 2021 17:45">
<span class="device-title">Device nostart [ID]: C23</span>
<div class="device-info">
<span class="left-text-icon map">Location: HIDE</span>
<span class="left-text-icon start">Start: 10 août 2021 12:46</span>
<span class="left-text-icon end">End: 10 août 2021 17:45</span>
<span class="left-text-icon chief-go">Chief GO: cdcd chieffunc</span>
<span class="left-text-icon dchief-go">Deputy Chief GO: did azda</span>
<span class="left-text-icon dso">DSO: Souris azd</span>
<div class="resume">
<div class="resume title">Unit Summary</div>
<div class="resume content left-resume-icon hurt">Injured 0</div>
<div class="resume content left-resume-icon arrest">Arrests: 0</div>
<div class="resume content left-resume-icon grenade">Grenades fired: 0</div>
<div class="resume content left-resume-icon water">Liters of water used: 0</div>
<div class="resume content">UUID </div>
</div>
</div>
<form action="/home/delete_device/9/" method="post">
<input type="hidden" name="csrfmiddlewaretoken" value="HIDE">
<input type="submit" value="Delete device">
</form>
</div>
</div>
Your assistance is greatly appreciated!