JQuery: Done() after if-else

Question

Using ajax calls we have the ability to perform actions after it hase run using the done()-function

$.ajax({ ..... }) .done ( function(data) { ..... (manipulate data using $.ajax result })

Right now I have an if-else clause with an ajax-embedded in it.

 if (some condition) { //Standard HTML-element/tag manipulation $("#obj1").append('<a class="trigger">Click Me </trigger>'); $(".SomeClass").remove(); ...... } else { //HTML-element/tag manipulation after $.ajax-call $.ajax({ //perform ajax-call }) .done(function (data) { $("#obj1").append('<a class="trigger">' data.someProp '</trigger>'); }) } //Perform actions: Part2 $(".trigger").Click(function() { Somefunction() });

I was wondering if Jquery offers a way to make the execution of the functions in Part2 halt until all actions inside the if-else are completed (including the $.ajax)?. I can't seem to find anything around this using google (most likely i'm just using the wrong keywords).

I hope my question is understandable for everyone. If you need further information, don't hesitate to comment.

Hum... it might not be the most elegant solution, but I guess you could duplicate the call to PART2 in each branch of the condition. Have you tried that? — user1334319
– user1334319, Commented Aug 4, 2014 at 14:01
Why not wrap the functions in part2 inside a function and call that from the if branch and from the done function in the else branch? — ZiNNED
– ZiNNED, Commented Aug 4, 2014 at 14:01
Yes, But that produces a reasoable amount of duplicate code, which i would love to avoid. @ZiNNED indeed an elegant yet simple solution. That was my first idea aswell. yet i could resist to ask for an alternative. :) — User999999
– User999999, Commented Aug 4, 2014 at 14:02

Vishwanath · Accepted Answer · 2014-08-04 14:19:39Z

You can use jQuery promise in this case. http://api.jquery.com/deferred.done/

var dfd = null; if (some condition) { //Standard HTML-element/tag manipulation $("#obj1").append('<a class="trigger">Click Me </trigger>'); $(".SomeClass").remove(); ...... //Create Deferred object and resolve immediately dfd = $.Deferred(); dfd.resolve(); } else { //HTML-element/tag manipulation after $.ajax-call //$.ajax returns Deferred dfd = $.ajax({ //perform ajax-call }) .done(function (data) { $("#obj1").append('<a class="trigger">' data.someProp '</trigger>'); }) } //Use when for waiting the Deferred to get resolved $.when(dfd).then(function(){ //Perform actions: Part2 $(".trigger").Click(function() { Somefunction() }); })

When debugging .when still gets executed before .done. But the When might indeed be thing i need. Time for me to do some further research.
Corrected syntax of using when-then. Check if this works for you. I am not sure which one is called before done or then...

ZiNNED · Accepted Answer · 2014-08-04 14:05:34Z

I'd do something like this:

 if (some condition) { //Standard HTML-element/tag manipulation $("#obj1").append('<a class="trigger">Click Me </trigger>'); $(".SomeClass").remove(); ...... Part2(); } else { //HTML-element/tag manipulation after $.ajax-call $.ajax({ //perform ajax-call }) .done(function (data) { $("#obj1").append('<a class="trigger">' data.someProp '</trigger>'); Part2(); }) } function Part2() { $(".trigger").Click(function() { Somefunction() }); }

mkdeki · Accepted Answer · 2014-08-04 14:29:01Z

You should use 'synchronous AJAX requests'

 //HTML-element/tag manipulation after $.ajax-call $.ajax({ //perform ajax-call **async: false** }) .done(function (data) { $("#obj1").append('<a class="trigger">' data.someProp '</trigger>'); })

A valable solution indeed! Yet i prefer @vishwanath solution

Collectives™ on Stack Overflow

JQuery: Done() after if-else

3 Answers 3

3 Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Related