How can I use ajaxSuccess() outside of .ajax() - javascript

Im using Woocommece in a WordPress website and some of the plugins installed make requests to an API to check and validate a vat field.
Id like to use .ajaxSuccess() to tap into the ajax response thats returned so I can check to see if part of it contains some data and do something on screen.
So far Ive got this.
jQuery(document).ready(function(){
var event = 'updated_checkout'
jQuery(document).ajaxSuccess(function(event){
console.log('success');
})
})
So the console spits out success. Great. But Im stuck as how I would move forward with this. I dont know how to get the XHR option or get he response in a variable.
Any help would be appreciated.

To get the response from the request in the $.ajaxSuccess() handler, retrieve the responseText property from the jqXHR object passed to the handler function in the second argument:
jQuery(document).ready(function($) {
var event = 'updated_checkout'
$(document).ajaxSuccess(function(e, xhr) {
console.log(xhr.responseText);
});
});

Related

Ajax Call inside event function

I've been trying to execute an AJAX call inside an event handler function for about a day, trying lot of when(), then() and done() stuff and also to set async: false but I am still ending up with undefined errors. My code looks like this:
$('#id').on('itemMoved', function (event) {
console.log(event);
$.ajax({
type: "POST",
url: "create.php",
data: event
});
});
I need to pass the event object to create.php to do some server-side stuff. As console.log(event) is printing the object correctly, I guess the reason is the asynchronous behaviour of ajax - but have still no idea how to solve it.
Edit: First of all, sorry for not making it complete. Lack of knowledge makes it more difficult to decide what is relevant.
itemMoved is an event of jQuery UI Widget jxqkanban. It is triggered when a Kanbanitem is dragged and holds information about old and new column and itemdata (Documentation). I think AJAX is running before the objects content is completely resolved, causing
Uncaught TypeError: Cannot read property 'target' of undefined.
Thanks for your time.
Just been having a play in js fiddle link here.
https://jsfiddle.net/WillCodeForBeer/29kqpo58/1/
$("#click").click(function(event){
console.log(event)
data = {};
data.timestamp = event.timeStamp
$.post('/echo/js/?js=hello%20world!', { data : data } );
});
I'm not sure what error you are getting but when I tried to only send the event data I was getting a type error. After some reading, it turns out you cannot be sent the event object as
it contains HTML as it will reference the event target.
I would suggest something similar to the above code and extract the data you need out of the event object into another data object and post that.
NB. The post does not complete due to the url being a fake url. The triggering event is also different but the concept is the same.
let me know how you get on.
Here there is fiddle that maybe can be useful to you:
Fiddle
$('#id').on('click', function (event) {
$.post( "https://httpbin.org/post", event).
done(function( data ) {
console.log( "Data Loaded: " + data );
$( "#results" ).append( "Origin: "+ data.origin );
});
});
In Ajax, and in javascript, in general, is essential the concept of callback.
So in the example above the function inside done is executed only when the server responds.

jQuery: How to find current object in Post callback data?

I have an ajax post function:
$(".button").click(function(){
var postData = ..some data..
var targetDiv = $(this).closest(".someDiv");
$.post(doucemnt.location, postData, function(data) {
content = ... How to find targetDiv inside data here? ..
targetDiv.html(content);
});
});
The data returned from post will be the whole webpage, and I need to filter it and only get the div I want to refresh. I do not want to use any selectors by ID or class, because there are many copies of the "someDiv" and "button" inside each div, so I want to just get the div object of currently clicked button and search for it in callback data.
is that possible?
I'm not sure I fully understand your question, so forgive me if I'm way off.
I think (if nothing else) this might help give you some ideas. I will parse through the response data looking for a specific 'hook'. Then return just that chunk of data...
JavaScript:
$('.button').click(function (event) {
// This would be your (real) ajax call.
doAjaxPost('www.location.com', postData, function (response) {
var $refresh = $($.parseHTML(response)).filter('#refresh');
$('#content').html($refresh);
});
});
JSFiddle

Using GET method to get href attribute of an object

What i'm trying to do is what i thought would be quite easy, but it doesnt seem to be working. I want to get the href of an object and all the function is returning is undefined.
This is the page that i'm requesting and what i'm trying to retrieve is the href held in the element of the first seller (who's ClassName is ui-link-inherit)
var buy = $.get(
"http://m.roblox.com/items/24826737/privatesales/",
function (data){
alert($(data).find(".ui-link-inherit:eq(0)").attr('href'));
}
);
I thought it was a permissions issue at first but it still wont work even if you run that on the page.
Did you tried to just alert the data you get?
If there is no .ui-link-inherit ofc it wont work and since .ui-link-inherit seems to be a class of jqueryUI which adds the classes after the page is loaded via javascript, you wont get this class via GET
//EDIT: I dont get all this "you cant access the data cause ajax is asynchronus". He is using the get-fukction completely right. He can access data since data IS the returned stuff from the server. Did I miss something that you all get this that way?
You cannot return a value from that function, it is executed asynchronously. Instead just wait for the AJAX to finish and then do something with the result
// don't do this
// var buy = $.get(... etc...);
// the variable buy will never have any value
// do this instead
function getHREF(){
$.get(
"http://m.roblox.com/items/24826737/privatesales/",
function (data){
var buy = $(data).find(".ui-link-inherit:eq(0)").attr('href');
doSomething(buy);
}
);
)};
function doSomething(buy) {
// in here do whatever you want with the ajax data
}
$(document).ready(function () {
getHREF();
});
The site does not allow Cross-site HTTP requests. Read here: HTTP access control

$.post function, return is empty

I have a problem wit a $.post request. No errors, but the return is empty. Before I start bugging the server admin, of who the service is, with this problem. I want to make sure I did not make any mistake myself.
Below the code I'm using:
var post_data = JSON.stringify({'str_action':'log_element', 'int_id':'TEST', 'str_value':'EMPTY'});
$.post('http://url/', post_data, debug_return_data);
function debug_return_data(data)
{
alert(data);
}
Problem is that the returned data in the alert is empty. Did I make any mistake in my code?
Thanks in advance.
The Ajax call looks correct, check the response in firebug or chrome dev tools to make sure the server is actually returning data.
If you are making the AJAX call to anther server other than the one in the address bar it will be blocked as a cross-domain call. Use JSONP if you want to do this:
http://devlog.info/2010/03/10/cross-domain-ajax/
$.post('http://url/', post_data, function(data)
{
alert(data);
});
this is in the jquery documentation

Jquery post > success not trigger

I had a problem with jquery's post api.
$(".MGdi").click(function () {
id=$(this).attr("rel")
$.post( 'Mdeger.asp?cmd=MG', { id: id, drm: $(this).html()} ,
function( data ) {
var $response=$(data);
var snc = $response.find('#snc').html();
alert(snc);
},"application/x-www-form-urlencoded");
});
Another way is:
$(".Pasif").click(function () {
id=$(this).attr("rel")
$.post( 'Mdeger.asp?cmd=Pasif', { id: id, drm: $(this).html()} ,
function( data ) {
$(this).html(data);
alert(data)
},"application/x-www-form-urlencoded");
});
Everything is OK on serverside but clientside's success function does nothing.
Even basic codes like alert("hoho"); success not triggering.
this usually happens when respond couldn't be parsed. you should check the respond using firebug or similar debugging tool.
especially the methods that expects json data, strictly validates the respond and if there is anything invalid it just does nothing, no-error, no-warning, no-exception.
when your callback function doesn't run, you should suspect that your respond isn't correct.
// Türkçe özet
uzun lafın kısası dönüş değerinde bir terslik varsa dönüş fonksiyonu çalışmayacaktır. sunucudan gelen değerleri iyice kontrol etmekte fayda var. jquery dönüş değerinde veya dönüş fonksiyonunda bir hata olursa seni uyarmadan işi sonlandırıyor.
I had this problem as well. It turns out I was making an AJAX call to the same domain, but on a different port, which is not allowed (for security reasons) in Javascript.
See this relevant question for more info:
How do I send an AJAX request on a different port with jQuery?
I was very surprised that the AJAX call would POST/GET to the server, (which I was able to verify by looking at the server log) but that the response was never read. I would have thought that both sending and receiving would be disallowed.
I had this error too, and that was a stupid problem : I set dataType to "json" in my JS, but the page called was returning plain HTML. And this cause to not fire the success function at all.

Categories

Resources