CODEWITHSUNDEEP
jqueryjquery-ui
Niraj Kale
Niraj Kale

Reputation: 479

jQuery UI not working inside javaScript function

function newbox(Title, Messagetext) { $(document).ready(function () { $("#div1").text(Messagetext); $("#div1").dialog({ modal: true, title: Title, buttons: { Ok: function () { enbleButton(); $(this).dialog("close"); //self.close(); } } }); }); } given newBox function is used to show modal popup. this function totally fine if called inside $(document).ready() like this

$(document).ready(function () { newbox('test', 'niraj'); }); but doesn't work when i call it through javascript function like :

 function test()  
{
    $(document).ready(function () {
        newbox('test', 'niraj');
    });  
    return false;

}
im using IE8, jQuery 1.10.2 and jQuery UI 1.11.4

Update:

My HTML:

<div style="display:none;">
<div id="dialog-message">
    test text
</div>
<div id="div1">
    test text
</div>

Upvotes: 2

Views: 289

Answers (3)

Ajay Narain Mathur
Ajay Narain Mathur

Reputation: 5466

$(document).ready(callback) attaches an event to document which is triggered when the readyState of document changes to complete(few other conditions too). You attach this event inside a function test(), what happens is when you call this function then the eventListener gets attached to document but as document is already loaded the callback doesn't take place:

Suggested Code:

function test()  
{
        newbox('test', 'niraj');

    return false;  
}

and

function newbox(Title, Messagetext) {
                  $("#div1").text(Messagetext);
                  $("#div1").dialog({
                      modal: true,
                      title: Title,
                      buttons: {
                          Ok: function () {
                              enbleButton();
                              $(this).dialog("close");
                              //self.close();
                          }
                      }
                  });
          }

and to make it work in IE8 your HTML div #div1 should not be self-closing.

Upvotes: 0

depperm
depperm

Reputation: 10746

$(document).ready() is for when the page loads. Don't put it inside a function.

Upvotes: 1

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

You need to remove dom ready event from that code, then it will work fine. Because, $(document).ready() is an event, not a function. That event will occur at the page loading. When you call that function, the event may already have completed, if so this code will not execute.

Try,

function newbox(Title, Messagetext) {
    $("#div1").text(Messagetext);
    $("#div1").dialog({
        modal: true,
        title: Title,
        buttons: {
            Ok: function() {
                enbleButton();
                $(this).dialog("close");
                //self.close();
            }
        }
    });
}

Upvotes: 1

Related Questions