Can't access element inside success ajax - javascript

I'm putting an ajax call inside an ajax call, but in the second, the element is not being recognized, example:
$.ajax({
url: 'controleFatAcoes.php',
type: 'post',
dataType: 'html',
data: {
acao: 'validaenviofat',
id_cliente: cli.id_cliente,
dt_fat: cli.id_fat
},
success: function(data) {
$.ajax({
url: 'controleFatAcoes.php',
data: {id_cliente: cli.id_cliente,
id_fat: cli.id_fat, acao: 'getdadosnf'},
type: 'post',
dataType: 'json',
success: function(dados) {
**$('#templateEmpresa').html(dados.empresa);**
}
)};
});
When I run a console.log($('#templateEmpresa')), I get:
[context: document, selector: "#templateEmpresa", constructor: function, init: function, selector: ""…]


Try this code out:
Might be a problem of scope given that you are executing the second ajax call inside the success function of the first ajax call.
var firstajaxsuccess = 0;
$.ajax({
url: 'controleFatAcoes.php',
type: 'post',
dataType: 'html',
data: {
acao: 'validaenviofat',
id_cliente: cli.id_cliente,
dt_fat: cli.id_fat
},
success: function(data) {
firstajaxsuccess = 1;
}
});
if(firstajaxsuccess){
$.ajax({
url: 'controleFatAcoes.php',
data: {id_cliente: cli.id_cliente,
id_fat: cli.id_fat, acao: 'getdadosnf'},
type: 'post',
dataType: 'json',
success: function(dados) {
**$('#templateEmpresa').html(dados.empresa);**
}
)};
}

Related

Two URLs with same AJAX structure

Is there any option to use two urls ((post & get) or (post & post)) in same AJAX structure ??? or some cooler format???
$.ajax({
type: "POST",
url: "save.php",
data: dataString,
success: function(chat_list) { }
});
$.ajax({
type: "POST",
url: "view.php",
data: dataString,
success: function(chat_list) { }
});

Sure, just use javascript variables.
var ajaxMethod = "POST";
var ajaxUrl = "save.php";
$.ajax({
type: ajaxMethod,
url: ajaxUrl,
data: dataString,
success: function(chat_list) {
}
});

apply encodeuricomponent to all ajax calls in an application globally

I have ajax calls like this at several places in my application.
$.ajax({
type: 'POST',
url: url,
data: Json.stringify(Values),
dataType: 'json'
});
For these ones, I would like to add encodeURIComponent to data sent as below:
$.ajax({
type: 'POST',
url: url,
data: encodeURIComponent(Json.stringify(Values)),
dataType: 'json'
});
Is there any way that I can do this globally without manually editing it everywhere?

Create your own function for doing it.
var myAjax = function (options) {
if (typeof options.data !== "undefined") {
options.data = encodeURIComponent(options.data);
}
return $.ajax(options);
};
Then in your code replace:
$.ajax({ type: 'POST', url: url, data: Json.stringify(Values), dataType: 'json' });
With:
myAjax({ type: 'POST', url: url, data: Json.stringify(Values), dataType: 'json' });
Whatever you do, don't monkey patch!

trying to put an ajax request inside the success call back of another ajax request

I am trying to make two jQuery ajax calls, the second should be made from the success callback of the first. I have tried a couple variations of code e.g just messing with the brackets.
Here is what I tried.
$.ajax({
url: 'inc/grab_talk.php?name='+encoded_name+'&loc='+encoded_address+'&lat='+encoded_lat,
type: 'post',
success: function () {
$.ajax({
url: 'inc/talk_results.php',
type: 'post',
success: function (dat) {
alert(dat);
}
});
}
});
I am receiving '500 (internal server error) in console

Try this, you can use either POST or GET, but in your case GET seems to be more appropriate.
$.ajax({
type: "GET",
url: "some.php",
data: { name: "somename", location: "somelocation" },
success: function(){
$.ajax({
type: "GET",
url: "someother.php",
success: function(){
alert('test');
}
});
}
});

Check this example
$.ajax({
type: "post",
url: "ajax/example.php",
data: 'page='+btn_page,
success: function(data){
$.ajax({
var a=data; //edit data here
type: "post",
url: "example.php",
data: 'page='+a,
success: function(data){
});
});

Why my text() function doesn't work in my script? [duplicate]

This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 9 years ago.
I write a script that call a method which return count of some data, and then change the text of a 'P' tag (by id=count) to returned value.
my script :
$(document).ready(function () {
$("#count").text(function () {
$.ajax({
type: "POST",
url: "./WebForm1.aspx/GetCountUnCheckNotification",
data: {},
async: false,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
return (response.d);
},
});
});
});
What is the problem?

If your response is a json,then you need to parse it like below.And if your response is not in json,you can directly assign value to .text(response)
$(document).ready(function () {
$.ajax({
type: "POST",
url: "./WebForm1.aspx/GetCountUnCheckNotification",
data: {},
async: false,
contentType: "application/json; charset=utf-8",
dataType: "json",
success:
function (response) {
var result=parseJSON(response)
$("#count").text(result.d)
},
});
});
});

You have a bug relating to how AJAX works - your function isn't returning anything. Your success callback is invoked after the function has returned because AJAX is asynchronous.
To make this work, you would have to start with the AJAX call, and then, in it success handler, set the text of the <p>:
$.ajax({
...
success: function (result) {
$("#count").text(result.d);
}
})

try:
$(document).ready(function () {
$.ajax({
type: "POST",
url: "./WebForm1.aspx/GetCountUnCheckNotification",
data: {},
async: false,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
$("#count").text(response.d);
},
});
});

$.ajax({
type: "POST",
url: "./WebForm1.aspx/GetCountUnCheckNotification",
data: {},
async: false,
contentType: "application/json; charset=utf-8",
dataType: "json",
success:
function (response) {
$("#count").val(response["id"]); // in case of input tag
$("#count").html(response["id"]); // in case of span/p/div
},
});

You need to set $("#count").text() in the success callback...
$(document).ready(function () {
$.ajax({
type: "POST",
url: "./WebForm1.aspx/GetCountUnCheckNotification",
data: {},
async: false,
contentType: "application/json; charset=utf-8",
dataType: "json",
success:
function (response) {
$("#count").text(response.d);
}
});
}

The $.ajax function doesn't return anything. Try something like this:
$.ajax({
type: "POST",
url: "./WebForm1.aspx/GetCountUnCheckNotification",
data: {},
async: false,
contentType: "application/json; charset=utf-8",
dataType: "json",
success:
function (response) {
$("#count").text(response.d);
},
});

It doesn't work because of the way asynchronous operations work. Basically you are telling $('#count').text() to immediately set the text to whatever the anonymous function returns. But that function will just return undefined after firing the ajax event. You must place the text call inside the final callback; which is not executed until later:
$(document).ready(function () {
$.ajax({
type: "POST",
url: "./WebForm1.aspx/GetCountUnCheckNotification",
data: {},
async: false,
contentType: "application/json; charset=utf-8",
dataType: "json",
success:
function (response) {
$("#count").text(response.d);
},
});
});

jsFiddle /echo/html not working with jQuery

http://jsfiddle.net/YcK5X/
I'm wondering why this AJAX request doesn't return anything.
$.ajax({
type: 'POST',
url: '/echo/html',
data: 'Echo!',
success: function(data) {
$('#ajax').html(data);
},
dataType: 'text/html'
});

The data you want echo:ed must be supplied in a POST parameter named html:
$.ajax({
type: 'POST',
url: '/echo/html/',
data: {
'html': 'Echo!'
},
success: function(data) {
$('#ajax').html(data);
},
dataType: 'text/html'
});

Categories

Resources