I'm experiencing an issue with a button that opens a modal.
When clicking the button, it's supposed to open a new page in the modal and also make an API call for processing before loading the new page.
<a class="btn btn-primary" type='button' id="btn_prev" onclick="prev({{charm_id}})" data-toggle="modal" data-target="#innerModal" href="{% url 'gifcharm:showpreview' %}">Preview</a>
This is the button element in question.
Initially, when I click the button for the first time, both the onclick function and the href link work as expected. The onclick triggers the background processing and the href loads the new content seamlessly.
However, after the initial click, only the onclick function works while the href link isn't executed. This means that the old content keeps reloading instead of fetching the new content I need.
So, why isn't the href call being made after the first click? What could be causing this behavior?
EDIT - Attached JS File.
function prev(charm_id) {
var imageselected = [];
$("input:checkbox").each(function() {
var $this = $(this);
if ($this.is(":checked")) {
imageselected.push($this.attr("id"));
}
});
console.log(imageselected);
var url_creategif = "http://localhost:8000/gifcharm/convert_to_gif/" + charm_id;
console.log(url_creategif);
jQuery.ajax({
type: "GET",
url: url_creategif,
cache: false,
data: {
'images': imageselected
},
success: function(data) {
if (data == "0") {
alert("Problem Creating Gif");
} else {
//alert("Circle Image is successfully created");
}
}
});
}