How to append first, then run ajax in jquery?

Question

I want to append first, then run ajax to update the data and then do the search. See the code below. I want to put a code like if append, then run $.post. How can I do that in jquery, thanks?

$('<span />', { class: 'result_tag', text: href }).insertBefore($input);
		       
 $('.result_tag').append(' ');

//make sure append first and then run .post

$.post("member_search.php", {
	search_text: $(".result_tag").text()

     }).done(function()
{							
$.post("member_search.php", {
	      search_text: $(".result_tag").text()
},
		function(data){
	$("#find_members").html(data); 
							});
  });

You do the second request in the callback of the first.

Jay Blanchard
– Jay Blanchard

2015-02-27 16:14:25 +00:00
Commented Feb 27, 2015 at 16:14 — Jay Blanchard
– Jay Blanchard, Commented Feb 27, 2015 at 16:14

Simon · Accepted Answer · 2015-02-27 16:17:58Z

2

The $.post() function returns a promise. You can call the done() function on this promise. The done() function takes a callback function which will be executed after the post to the server is done:

$.post("update.inc.php", {
      tag : $(this).closest("a").text(),
      users_id : $("#users_id").val()
    }).done(function(){

      // your second post goes here

    });

answered Feb 27, 2015 at 16:17

Simon

2964 silver badges17 bronze badges

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

1 Comment

conan Over a year ago

Thanks for your time. I just edit my answer a little bit. How can I make sure append first, then run the .post.

Ashish Awasthi · Accepted Answer · 2015-02-27 18:28:57Z

1

You can use $.ajax and its Event beforeSend like this:

$.ajax({
  url: "http://fiddle.jshell.net/favicon.png",
  data: 'search_text='+$(".result_tag").text(),
  beforeSend: function( xhr ) {
    $('.result_tag').append(' ');
  }
})
  .done(function( data ) {
    //now do your other ajax things
  });

Hope this will help you.

More Details are given in jQuery DOC

answered Feb 27, 2015 at 18:28

Ashish Awasthi

1,5021 gold badge20 silver badges34 bronze badges

2 Comments

conan Over a year ago

Thanks! It will append first,. but could not search the text. If I put append on the top of the ajax. it will append first and do the search, however, after several attempt, it broke. I don't know why. So, do you have a way to say that, if append was initial, then run the ajax?

Ashish Awasthi Over a year ago

you can check that append is done successfully in beforeSend if its not then you can return false, and ajax request will be aborted. Read the doc it has everything that you need. ;)

Collectives™ on Stack Overflow

How to append first, then run ajax in jquery?

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related