Click a button using jQuery and append data to response after ajax success

Question

I have two buttons and one of them is already bound with an ajax call from a different site. I need to call the ajax using the first button and also I need to append some data to the result after ajax completion.

(Unfortunately, I have no access to edit the ajax function or existing jQuery. All I can do is that create a new function).

Simply I need to call this from the console. Is there any jQuery function to know whether an ajax is called and that one has a success response?

I tried to use ajaxStart() and ajaxStop(), but not working.

This what I tried:

jQuery('.a').click(function(){
  var valuetopass;
  //Copy Value from input of A
  jQuery(document).ajaxStart(function(){
    console.log('Click Ajax Button');
    valuetopass = jQuery('.a_value').val();
  });

  //Call Ajax
  jQuery('.b').click();

  //Paste Value to the result appended
  jQuery(document).ajaxStop(function(){
    console.log('Appended the result input field(b_value) to the html.');
    
    //Paste the value in new field from ajax.
    jQuery('.b_value').val(valuetopass);
  });
});

<input class="a_value" value="ABC"/>
<button class="a">Button to initiate ajax</button>
<button class="b">Button having Ajax</button>

Here when we click on button A it will initiate a click on button B and ajax will call. After that, the result will append an input field in HTML like <input class="b_value"/> . I need to add value to this field using an external jQuery function.

I have also tried

setTimeout(function(){
  jQuery('.b_value').val(valuetopass)
},500);

But we can't say 500 ms will be the exact time taken. Is there any possibility to find the ajax called and finished?

Ananthakrishnan Baji · Accepted Answer · 2019-06-14 10:57:22Z

3

You can use .ajaxComplete(), use it like this

$( document ).ajaxComplete(function(event, xhr, settings) {
  console.log(xhr.responseText);
});

Here xhr.responseText will be having the response of every ajax call made by jQuery ajax method. So your response <input class="b_value"/> can be processed inside this callback

answered Jun 14, 2019 at 10:57

Ananthakrishnan Baji

1,2901 gold badge9 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adharsh M Over a year ago

Appreciate it. I can use this in a different way to achieve. Thanks

Adharsh M Over a year ago

Actually, I need to do this only when I click the .a button. So we need to unbind the ajaxComplete after it called.

$('body').ajaxComplete(function(e, xhr, options) {       if (options.url == '/expected/url.html') { // Or whatever test you may need             doStuff();             $(e.currentTarget).unbind('ajaxComplete');       } });

Collectives™ on Stack Overflow

Click a button using jQuery and append data to response after ajax success

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related