如何在jQuery中的文档就绪事件上自动调用函数

Question

I m having following Code in which this code executes when i click a anchor tag named msgup

    $("#msgup").bar({
        color : '#1E90FF',
        background_color : '#FFFFFF',
        removebutton     : false,
        message : 'Your profile customization has been saved!',
        time: 4000

});

But I want to do this thing automatically when page loads , so what is required to achieve such workflow?

Actually im using jBar plugin to show stackoverflow type notifications at top of the page.

Answer 1

$(document).ready(function() {

    $("#msgup").bar({
        color : '#1E90FF',
        background_color : '#FFFFFF',
        removebutton     : false,
        message : 'Your profile customization has been saved!',
        time: 4000

    }).click(); // call click right away...
 });

Answer 2

Put the code into a function, and then run that function in your jquery document ready:

function msgup_bar(){
$("#msgup").bar({
        color : '#1E90FF',
        background_color : '#FFFFFF',
        removebutton     : false,
        message : 'Your profile customization has been saved!',
        time: 4000

});
}

$(document).ready(function() {
   msqup_bar();
 });

http://www.learningjquery.com/2006/09/introducing-document-ready

Answer 3

I think you are looking for LiveQuery jquery plugin .

Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated.

Answer 4

I have done this using following code

$(document).ready(function()
{

     $("<div id='notify'></div>").prependTo('body').hide();
}

Style defined in header:

<style>
#notify{

       position:fixed;
           top: 21%; 
        left: 40%;
       width: 20%;
        height:4%;
        text-align:center;
            text-weight:bold;
           font-size:20px;
         background-color:YELLOW;
          color:BLUE;
            padding:3px;
           z-index:9999;
}

</style>

and dynamically call this function using following echo statement in PHP

echo "<script> setTimeout(function(){
            $('#notify').html('Updated Successfully !').slideDown(2000);
 },0);
     </script>";

Answer 5

The plugin is only built to be used by clicking on an element, there is no support for showing a bar without a click event.

Reigel's suggestion to call click immediately should work, but then you have to include that element in the page so that the plugin has something to hook up the events to.

Answer 6

Abhishek, your code seems it uses some jquery plugin, which will do something with the element having id msgup, you should have element having id msgup. Create element having id msgup and modify code,

$(document).ready(function(){
//you code here
})