how to wait load() complete and get variable in selector - javascript

my problem to get text in td after .load(url) to variable
load code
$("#tr1").load("include/test.php?page=1");
and code for get variable in .load(include/test.php?page=1)
i can not getid
run before complete load
$(window).bind('load', function () {
var getid = $("td:first").text();
function updatenewrow(getid) {
$.ajax({
type: "POST",
url: 'test1.php',
data: {id: getid},//only input
success: function (response) {
if (response > getid) {
$("#tr1").load("include/test.php?page=1");
}
}
});
}
//setInterval(updatenewrow(getid), 4000);
});

It's not clear what you are trying to accomplish the way you have posed the question.
Maybe this is what you're looking for:
function updatenewrow(getid) {
$.ajax({
type: "POST",
url: 'test1.php',
data: { id: getid },
success: function (response) {
if (response > getid) {
$("#tr1").load("include/test.php?page=1");
}
}
});
}
$("#tr1").load("include/test.php?page=1", function(response, status, xhr){
if(xhr.status == 200){
var getid = $("td:first", this).text();
updatenewrow(getid);
}
});
Hope that helps.

Related

How to access a selector on AJAX Complete?

I make an Ajax Request that adds content to the page with HTML from the back-end, and then I make another Ajax Request that modifies that dynamically added HTML.
$("#list-customers-button").click(function () {
var selectedAcquirer = $("#acquirer-select").val();
if (selectedAcquirer === "adyen") {
if (listed) {
listed = false;
$("#customer-list-area").hide().html('').fadeIn(fadeTime);
} else {
listed = true;
$.ajax({
type: "GET",
url: "/adyen_list_customers",
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function () {
$("#list-progress").show();
},
success: function (data) {
console.log(JSON.stringify(data));
$("#customer-list-area").hide().html(data["response_html"]).fadeIn(fadeTime).promise().done(function () {
$(".collapsible").collapsible();
resetDatepicker();
});
},
complete: function () {
$(document).on("change", "#file-download-datepicker", function () {
$("#file-download-progress").hide();
$("#file-download-date").val(selectedDate);
fileDownloadData = $("#file-download-form").serialize();
displayMessage(fileDownloadData);
$.ajax({
type: "POST",
url: "/adyen_update_file_list_by_date",
data: fileDownloadData,
beforeSend: function () {
$("#file-download-progress").show();
},
success: function (response) {
},
complete: function (response) {
$("#file-download-progress").hide();
console.log(response.responseText);
// Doesn't work. Selector should exist, but it doesn't.
$("#merchant-file-list").html(response.responseText);
},
error: function (response) {
displayMessage(response["responseText"]);
}
});
});
},
error: function (data) {
displayMessage(data);
},
});
}
} else if (selectedAcquirer === "stone") {
displayMessage("Adquirente indisponível no momento.");
} else {
displayMessage("É necessário selecionar uma adquirente.");
}
});
I get a perfect HTML response from the server, but selectors that were previously added with HTML also from the server (#file-download-progress, #merchant-file-list) are completely ignored. .html() doesn't work, nor anything, and I don't know how to use .on() to work around this because I just need to access that content. Since the ajax request is being made after the previous one is complete, they should be able to be accessed. They just don't exist nowhere in time.

Add CSS element after kendogrid refresh

I have an ajax call that sends to MyAction in MyController.. it returns me with result of success and an Id for an element to which I want to attach some CSS.
the Id is returned, and the css is added but the refreshGridData happens afterwards removing the css I just added to the element.
Is there a way to wait for refreshGridData to finish and then add the css?
I did try the done for ajax.. it did not work.
$.ajax({
url: "#Url.Action("MyAction", "MyController")",
type: "POST",
data: postData,
success: function (result) {
if (result.Success) {
alert("success");
refreshGridData();
}
},
error: function (result) {
alert("Error!");
}
AddMyCSSToThis(result.Id);
// done: AddMyCSSToThis(result.Id);
});
function refreshGridData() {
var ajaxContainer = $(".grid-wrap");
kendo.ui.progress(ajaxContainer, true);
refreshGrid();
kendo.ui.progress(ajaxContainer, false);
}
Why don't you pass in the Id you want to add the change into your refreshGridData() function like:
$.ajax({
url: "#Url.Action("MyAction", "MyController")",
type: "POST",
data: postData,
success: function (result) {
if (result.Success) {
alert("success");
var savedId = result.Id;
refreshGridData(savedId);
}
},
error: function (result) {
alert("Error!");
}
AddMyCSSToThis(result.Id);
// done: AddMyCSSToThis(result.Id);
});
function refreshGridData(savedId) {
var ajaxContainer = $(".grid-wrap");
kendo.ui.progress(ajaxContainer, true);
refreshGrid(savedId); // I'm assuming this function is what adds the css
kendo.ui.progress(ajaxContainer, false);
}
You could create a global variable and use it in the grid dataBound event to add the CSS.
_addCssToResultId = null;
$.ajax({
url: "#Url.Action("MyAction", "MyController")",
type: "POST",
data: postData,
success: function (result) {
if (result.Success) {
alert("success");
_addCssToResultId = result.Id;
refreshGridData();
}
},
error: function (result) {
alert("Error!");
}
});
// add a dataBound handler to your grid
$("#grid").kendoGrid({
dataBound: function(e) {
if(_addCssToResultId) {
AddMyCSSToThis(_addCssToResultId);
_addCssToResultId = null;
}
}
});

Close active ajax request (setTimeout)

I'm trying to stop an active ajax request when I click on checkbox. i active an ajax which calls every second to a url, but when i uncheck the checkbox, I was trying to close the ajax request. I tried with listener.abort(); and it doesnt work and also i added xhr.abort() and nothing happend.
Any suggestion?
function listener() {
$.get('http://localhost:3000/get-value', function (dataf) {
if (dataf.result != "") {
$.ajax({
url: "http://localhost:8000/login",
data: { pId: dataf.result },
type: "POST",
success: function (result) {
if (result.name != "") {
$.get('http://localhost:3000/close-conn');
window.location.href = result.url;
}
}
});
}
setTimeout(listener, 1000);
});
}
function GetCheckStatus() {
var flag = chkAuto.GetValue();
if (flag) {
$.ajax({
url: "http://localhost:3000/open-conn",
type: "GET",
});
listener();
} else {
$.ajax({
url: "http://localhost:3000/close-conn",
type: "GET",
});
// Doesnt work
listener.abort();
}
}
You're calling the .abort() method on the function, not the actual request object. Try something like this instead.
Define variables for the $.get request and the setTimeout, then abort/clear them as needed.
var xhr, timeout;
function listener() {
xhr = $.get('http://localhost:3000/get-value', function (dataf) {
if (dataf.result != "") {
$.ajax({
url: "http://localhost:8000/login",
data: { pId: dataf.result },
type: "POST",
success: function (result) {
if (result.name != "") {
$.get('http://localhost:3000/close-conn');
window.location.href = result.url;
}
}
});
}
timeout = setTimeout(listener, 1000);
});
}
function GetCheckStatus() {
var flag = chkAuto.GetValue();
if (flag) {
$.ajax({
url: "http://localhost:3000/open-conn",
type: "GET",
});
listener();
} else {
$.ajax({
url: "http://localhost:3000/close-conn",
type: "GET",
});
//Cancel the current request and prevent the next one from being triggered
xhr.abort();
clearTimeout(timeout);
}
}

How to change url of ajax function depending the return value of beforesend() function?

I want to run a function inside beforesend() in jquery ajax. Depending on the return value of that function I want to change the URL of ajax request. For an example refer below.
If myFunction() returns a value grater than 1, I want to run url1 otherwise I want to run url2. How to achieve that?
myFunction() gives a value grater than 1. But always ajax runs the url2.
$.ajax({
type: "POST",
data: {
fname: $('#com').val()
},
dataType: "json",
beforeSend: function () {
myFunction($('#com').val())
},
url: (myFunction($('#com').val()) > 1) ? url1 : url2,
success: function (data) {
if (data == 'success') {
window.location.href = 'index.php?r=site/index';
} else {
alert("Already registered email");
}
},
failure: function (errMsg) {
alert(errMsg);
}
});
try this
$.ajaxSetup({
beforeSend: function(jqXHR, settings) {
settings.url ="new Url";
}
});
Create a global variable something like:
var urlToSend;
and then assign it in beforeSend
$.ajax({
type: "POST",
data: {
fname: $('#com').val()
},
dataType: "json",
beforeSend: function () {
urlToSend=myFunction($('#com').val()) > 1 ? url1 : url2;
},
url: urlToSend,
success: function (data) {
if (data == 'success') {
window.location.href = 'index.php?r=site/index';
} else {
alert("Already registered email");
}
},
failure: function (errMsg) {
alert(errMsg);
}
});
$.ajax({
type: "POST",
data: {
fname: $('#com').val()
},
dataType: "json",
beforeSend: function () {
url = myFunction(parseInt($('#com').val())) > 1 ? url1 : url2;
},
url: url,
success: function (data) {
if (data == 'success') {
window.location.href = 'index.php?r=site/index';
} else {
alert("Already registered email");
}
},
failure: function (errMsg) {
alert(errMsg);
}
});

While ajax, async:true,deferred

3 hours i cant resolve the problem and found solution in internet. Some one please help me.
How i can create loop of ajax requests, while the data from ajax not equally "stop" using while and async:true?
This is not work example:
do {
promise = json('json.php');
promise.success(function again(data) {
if(data === 'stop') {
return false;
} else {
console.log('data');
}
});
} while (again());
function json(url) {
return $.ajax({
type: "GET",
dataType: 'text',
url: url
});
}
function again(data) {
if (data !== 'stop') {
alert(data);
sendReq();
}
}
function sendReq() {
json(location.href).success(again);
}
function json(url) {
return $.ajax({
type: 'GET',
dataType: 'text',
url: url
});
}
sendReq();

Categories