I am new to the web development and to Laravel. I am creating a local web application that will run on one pc using windows. I have a script in it that reads data from the camera device. This script is started when the user press a button. this button opens a dialog and creates an ajax call to get data from the php script.
What I need here is to make a cancel button in the dialog that will terminate the calling of php script.
What happens so far? I create an ajax call from the cancel button two. But this called PHP script is never executed until i turn the other script off manually (shutting down my camera).
I am ready to change the design idea. I am just stuck now and don't have enough experience to decide what to do.
here is the script so far:
<script>
var updateBtn = document.getElementById("update");
var favDialog = document.getElementById("favDialog");
var cancelBtn = document.getElementById("cancel");
updateBtn.addEventListener("click", function onOpen() {
favDialog.showModal();
$.ajax({
type: 'GET',
url: '/getBar',
data: '_token = <?php echo csrf_token() ?>',
success: function(data) {
window.location.assign("/view?qr=" + data);
}
});
});
cancelBtn.addEventListener("click", function onOpen() {
$.ajax({
type: 'GET',
url: '/closeApp',
data: '_token = <?php echo csrf_token() ?>',
success: function() {}
});
});
</script>
EDIT: ajax call abort() does work.
I think what you are looking for is abort(), assuming that you are using jQuery 3.x.
Most of the jQuery Ajax methods return an XMLHttpRequest (or the equivalent) object.
See the documentation:
abort. If the request has been sent already, this method will abort the request
<script>
var updateBtn = document.getElementById("update");
var favDialog = document.getElementById("favDialog");
var cancelBtn = document.getElementById("cancel");
var request = null;
updateBtn.addEventListener("click", function onOpen() {
favDialog.showModal();
request = $.ajax({
type: 'GET',
url: '/getBar',
data: '_token = <?php echo csrf_token() ?>',
success: function(data) {
window.location.assign("/view?qr=" + data);
}
});
});
cancelBtn.addEventListener("click", function onOpen() {
if (request != null) {
request.abort();
}
});
</script>