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 🙂

Answer 1

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