javascript - How to call a function automatically on document ready event in jQuery - Stack Overflow

admin管理员组

文章数量:1287078

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 i m using jBar plugin to show stackoverflow type notifications at top of the page.

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 i m using jBar plugin to show stackoverflow type notifications at top of the page.

• javascript
• jquery

Share Improve this question Follow asked Feb 17, 2011 at 9:35 AbhiAbhi 5,5611717 gold badges8282 silver badges134134 bronze badges 4

• i m following this tutorial tympanus/Development/jbar the code that executes after clicking the back buttons i want to execute the same code just after dom is ready. – Abhi Commented Feb 17, 2011 at 9:54
• 1 most of the people I guess misunderstood what the OP wants... or is it just me. jBar <-- in there, the button needs to be "clicked" before the message appear. and for me the OP does not want that. The OP wanted it to appear without clicking. Correct me if I'm wrong. :D – Reigel Gallarde Commented Feb 17, 2011 at 9:59
• yes Reigel i want that without click just after page loads or DOM ready – Abhi Commented Feb 17, 2011 at 10:03
• do you actually have an anchor with the ID msgup on that page? – Zathrus Writer Commented Feb 17, 2011 at 11:06

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

$(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...
 });

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./2006/09/introducing-document-ready

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.

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>";

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.

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

本文标签： javascriptHow to call a function automatically on document ready event in jQueryStack Overflow