We Keep Coding

JQuery AJAX, Deleting from a table when successful and keeping when unsuccessful

$.ajax({
type: "GET",
dataType: 'html',
url: "submitreef" + "?id=" + $id,
timeout: 5000,
cache: false,
success: function(data, status, xhr) {
Materialize.toast('Deleted', 4000);
},
error: function(xhr, ajaxOptions, thrownError) {
Materialize.toast('Error, we could not delete the campaign, please try again later', 4000);
$error = 'true';
}
});
}
if ($error != '') {
$(this).closest('tr').remove();
}
});
My problem is that when a button is pressed to delete a record from a table it works flawlessly, but when the error function is called it does not delete, I am trying to fix this, and my attempted fix is above, but it didn't work.
If you tried to delete it twice and there were 2 errors, it would then work, but that of course isn't very useful.
I really hope someone could help me out.
Many thanks.

var trToRemove = $(this).closest('tr');
$.ajax({
type: "GET",
dataType: 'html',
url: "submitreef"+"?id="+$id,
timeout: 5000,
cache: false,
success: function(data, status, xhr) {
trToRemove.remove();
Materialize.toast('Deleted', 4000);
},
error: function(xhr, ajaxOptions, thrownError) {
Materialize.toast('Error, we could not delete the campaign, please try again later', 4000);
}
});
so its basically the problem with asynchronous ajax. your error or success gets called only when it receives a response from server. but your following code gets executed before that.
if ($error != '') {
$(this).closest('tr').remove();
}
so thats why its producing unexpected removal of the element.
as suggested by #MuhammadOmerAslam You must also keep in mind that success callback may get called but your actual data has not been deleted. so its better to return something after you deleted the data on server side and compare it in your success handler before removing the tr element.
if you return "success" after data is deleted on server side then your success function should look something like the following:
success: function(data, status, xhr) {
if(data=='success'){
trToRemove.remove();
Materialize.toast('Deleted', 4000);
}else{
Materialize.toast('Error, we could not delete the campaign, please try again later', 4000);
}
},

Wait until data (30,000 rows) is displayed after AJAX request before calling function

Basically I have a function that cannot be called until it's data has been processed.
My data.done function apparently did not work, there is about 30,000 + records so therefore the browser lags for about 5 seconds, and the function is called before the data has been processed meaning the function will not work.
$('#order').html(data) is the culprit, and I need to find a way to know when it has finished processing the data?
I really hope you guys/gals can help me on this one.
<script>
function DataTable() {
$('#dataTables-example').DataTable({
responsive: true
});
}
</script>
<script type="text/javascript">
$(document).ajaxStart(function() {
$("#loading").show();
}).ajaxStop(function() {
$("#loading").hide();
DataTable()
});
$(document).ready(function() {
$('.text').text('');
$.ajax({
type: "GET",
dataType: 'html',
url: "vieworderhistory",
timeout: 120000,
cache: true,
success: function(data, status, xhr) {
$('#order').html(data).done(function() {
alert("Data processed.");
DataTable() //This is the function I want to be called when the data has been processed and is on the browser page.
});
},
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
});
</script>

$('#order').html(data);
alert("Data processed.");
DataTable();
This should work. The alert will show up only when $('#order').html(data) will be done.

Javascript code after file Download

I want to start some Javascript code after some file download from another domain.
jQuery.support.cors = true;
var formVars = $("form[name='myForm']").serialize();
var ajaxUrl = "http://some/path/openFilename.xlsx";
$.ajax({
url: ajaxUrl, type: 'GET', cache: false, data: formVars, timeout: 300000,
success: function (data) {
//Do some stuff here
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Error" + thrownError);
},
complete: function (data) {
closeWaitScreen();
}
});
Often read solution is
window.location = ajaxUrl;
but this does not work for me, because it starts a new request without submitting the data from the form. (Same with window.open)
Here is my code that works without option to handle closeWaitScreen() after:
$("form[name='jasperlogin']").submit();
Of course also starts a new request when its used in the $.ajax
Any ideas how to handle it?

Variable undefined after Ajax request

I have a globally defined JavaScript function which performs an ajax request to fetch some data from a model. The issue I am having is that when I load the page and inspect element, it gives the error:
Uncaught ReferenceError: response is not defined
Here is the function:
function getRating(work_id)
{
$.ajax({
url: '/read/getRatings',
type: 'GET',
async: true,
data: { field1: work_id},
success: function (data) {
//your success code
response = data;
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Error: " + thrownError);
}
});
return response;
}
The function gets called in my HTML like this:
<div class="extra">
<script>
document.write(getRating(112));
</script>
</div>
Error in browser console]:
The Ajax request works fine as when I inspect it in Chrome's developer tools, the correct response comes back. However the variable response does not get initialized in the $.ajax() method.
When I try to add $response = ""; at the start of the function so that it gets explicitly defined, it always returns the empty string and the variable does not get changed inside the ajax request as it should.
Anyone know what's going wrong here?

This is a common misunderstanding of asynchronous programming. You don't have a result to return when the initial call ends-- you need a callback to do the writing for you (the success part).
function getRating(work_id, selectorToWriteTo)
{
$.ajax({
url: '/read/getRatings',
type: 'GET',
async: true,
data: { field1: work_id},
success: function (data) {
//your success code
$(selectorToWriteTo).html(data);
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Error: " + thrownError);
}
});
}
HTML:
<div class="extra" id="myDiv">
<script>
getRating(112, '#myDiv')
</script>
</div>

JQuery - Dynamic elements not recognized

JQuery not recognizing the dynamically added data of the table. The first two button below the sample label function well, which i declared as a static markup just to test and it works, but the button with the same class in the table not function. Im so nuts with this problem.
<a class='btnView' href='#viewModal' data-toggle'modal' =value='FA-0000000'><i class='icon-eye'></i></a>
loadTable.js
var base_url = window.location.origin;
$(document).ready(function(){
url = base_url+"/codeigniter/index.php/AssistanceMonitoringModule/assistanceMonitoring/loadTbodyHome";
alert("loadtable.js");
$.ajax(
{
type: "GET",
url: url,
success: function(data){
$("#loadTbodyHome").html(data);
},
error: function (xhr, ajaxOptions, thrownError) {
alert("XHR:"+xhr.status+"Error:"+thrownError);
}
});
$('#searchFromHomeTable').keyup(function(){
url = base_url+"/codeigniter/index.php/AssistanceMonitoringModule/assistanceMonitoring/loadTbodyHomeSearch";
//alert('pumasok');
search = $("#searchFromHomeTable").val();
$.ajax(
{
type: "GET",
url: url,
data: "toSearch="+search,
success: function(data){
//alert(data);
$("#loadTbodyHome").html('');
$("#loadTbodyHome").html(data);
},
error: function (xhr, ajaxOptions, thrownError) {
alert("XHR:"+xhr.status+"Error:"+thrownError);
}
});
});
});
dataModal.js
var base_url = window.location.origin;
$(document).ready(function(){
alert("datamodal.js");
$(".btnView").click(function(){
alert($(this).attr('value'));
url = base_url+"/codeigniter/index.php/AssistanceMonitoringModule/assistanceMonitoring/viewInfo";
$.ajax(
{
type: "GET",
url: url,
data: "ID="+$(this).attr('value'),
success: function(data){
//alert(data);
//alert(data);
$("#viewModalBody").html('');
$("#viewModalBody").html(data);
$("#viewModal").attr('aria-hidden',false);
$("#viewModal").fadeIn();
},
error: function (xhr, ajaxOptions, thrownError) {
alert("XHR:"+xhr.status+"Error:"+thrownError);
}
});
});
});
Is the jquery functions not recognizing the newly added markup if its already declared?
Thanks.

You need to use event delegation for dynamically loaded elements:
$(document).on('click','.btnView',function(){
// Your code here
});
Please note that your HTML for the button is also invalid, you need to remove = before value attribute and I'd suggest you to use data-* attribute instead:
<a class='btnView' href='#viewModal' data-toggle'modal' data-value='FA-0000000'><i class='icon-eye'></i></a>