how to call a function inside if else statement in Jquery

Question

I have the following code for a jquery message box. If I click on the following link a message box appears.

<p><a id="msgup" class="">Demo Top</a></p>
<script>
    $("#msgup").bar({
        color            : '#1E90FF',
        background_color : '#FFFFFF',
        removebutton     : false,
        message          : 'Your profile customization has been saved!',
        time             : 2000
    }); 
</script>

Now what I am trying to achieve is show the message box when I get "cold" as value in my ajax server response. To achieve this I have tried the following code. but its not working. May be because it is failing to call the jquery function. Could you please how to make it work?

$.ajax({  
    type: "POST",
    url: "<?php echo base_url(); ?>contents/hello",
    data: "id="+a_href,
    success: function(server_response) {
        if (server_response == 'cold') {

        //Beginning of the code for message box
        $("#msgup").bar({
            color            : '#1E90FF',
            background_color : '#FFFFFF',
            removebutton     : false,
            message          : 'Your profile customization has been saved!',
            time             : 2000
        });
        //End of the code for message box

        // Instead of the message box code I have tried 
        // alert('Message'); and it worked
        }                       
        else {
            $("#result").html(server_response);
        }               
    }                              
}); //$.ajax ends

Thanks in advance :)

NULL and empty '' string is different, what is server_response that you get actually? — bitoshi.n
– bitoshi.n, Commented May 21, 2012 at 15:20
Hi, please check my question again. I have edited my post. Instead of NULL and "" I have used "cold". thanks. — black_belt
– black_belt, Commented May 21, 2012 at 15:23
Yes, I agree with you. I may be because of failing to call function. Where is jquery.bar from? — bitoshi.n
– bitoshi.n, Commented May 21, 2012 at 15:58
Jquery.bar is from external source. (example: <script src="mysource"></script>) To see the demo of the message box please check this link tympanus.net/Development/jbar I have downloaded the plugin from there. Thanks :) — black_belt
– black_belt, Commented May 21, 2012 at 16:09

codecandies · Accepted Answer · 2012-05-21 15:48:11Z

$("#msgup").bar(…)

binds a click event to #msgup (just guessing), so callin' it from within the ajax code won't help. One possible way to achieve your goal would be initializing $.bar and triggering a click from the ajax code, maybe this way:

<p><a id="msgup" class="">Demo Top</a></p>
<script>
    $("#msgup").bar({
        color            : '#1E90FF',
        background_color : '#FFFFFF',
        removebutton     : false,
        message          : 'Your profile customization has been saved!',
        time             : 2000
    });
    $.ajax({
        type: "POST",
        url: "<?php echo base_url(); ?>contents/hello",
        data: "id="+a_href,
        success: function(server_response){
            if (server_response == 'cold'){
                //Beginning of the code for message box
                $("#msgup").click();
                //End of the code for message box
           } else {
              $("#result").html(server_response);}                   
           }
        }                             
    });   
</script>

Keith DC · Accepted Answer · 2012-05-21 15:23:39Z

0

You can put an alert() or console.log() in your success function. Call alert(server_response). Or even, alert(typeof(server_response)). You can also see if the AJAX is coming back properly by adding an error: condition (with it's own function call just like success:).

My guess is you'll want to check instead of '', for the literal 'null' or even the object null, provided it's getting into the success function.

if (server_response == '' || server_response == 'null' || server_response == null || typeof(server_response) == 'undefined') {...

Once you find out how you expect it to come back, you can use just the check(s) you need.

edited May 21, 2012 at 15:23

answered May 21, 2012 at 15:19

Keith DC

6732 gold badges9 silver badges25 bronze badges

1 Comment

black_belt Over a year ago

Yes the ajax is working fine. The problem is with the message box. I cannot make it work inside the if else statement. Thanks

Keith DC · Accepted Answer · 2012-05-21 15:34:59Z

0

Have you tried wrapping it in a setTimeout(function() { $("#msgup").bar({}); }, 100); to see if it's a timing isssue? If so, instead of putting it in the success:, perhaps put it in complete:?

Also, if you put an alert inside the if(), and it's called, then is the HTML element with the ID #msgup present at that time (again, back to the timing consideration).

answered May 21, 2012 at 15:34

Keith DC

6732 gold badges9 silver badges25 bronze badges

1 Comment

Keith DC Over a year ago

Now it makes sense... for when you say, "If I click on the following link a message box appears." Then a .click() makes perfect sense. I was under the impression calling your .bar() directly worked in any case except inside the AJAX call.

bitoshi.n · Accepted Answer · 2012-05-21 16:22:48Z

Looking at jquery.bar.js, $("#msgup").bar(…) is just initialize element "#msgup" for click event binding. If click event is fired, the jquery.bar plug in will create new element and show it as message box. So, you need to fire click event. Try this

$.ajax({  
    type: "POST",
    url: "<?php echo base_url(); ?>contents/hello",
    data: "id="+a_href,
    success: function(server_response) {
        if (server_response == 'cold') {

        //Beginning of the code for message box
        $("#msgup").bar({
            color            : '#1E90FF',
            background_color : '#FFFFFF',
            removebutton     : false,
            message          : 'Your profile customization has been saved!',
            time             : 2000
        });
        $("#msgup").click(); //fire click event
        //End of the code for message box

        // Instead of the message box code I have tried 
        // alert('Message'); and it worked
        }                       
        else {
            $("#result").html(server_response);
        }               
    }                              
}); //$.ajax ends

Collectives™ on Stack Overflow

how to call a function inside if else statement in Jquery

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related