CODEWITHSUNDEEP
jquery
black_belt
black_belt

Reputation: 6799

how to call a function inside if else statement in Jquery

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 :)

Upvotes: 0

Views: 2534

Answers (4)

bitoshi.n
bitoshi.n

Reputation: 2318

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

Upvotes: 0

codecandies
codecandies

Reputation: 279

$("#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>

Upvotes: 2

Keith DC
Keith DC

Reputation: 673

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).

Upvotes: 0

Keith DC
Keith DC

Reputation: 673

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.

Upvotes: 0

Related Questions