CODEWITHSUNDEEP
javascriptjqueryhtmljqgrid
Ray Marsh
Ray Marsh

Reputation: 13

Cannot get a dialog box to open from inside a jqgrid edit form unless the html directly entered into the dialog function

I have tried various ways of describing "dialog-1" to no avail. The same code works fine as part of the page body if the dialog function is called from there. The same code does not work from inside the form.

Thanks for your help.

This function displays the dialog box just fine.

function helpSThtml () {
$(function() {
    $( "<div id='dialog-1' title='Dialog Title goes here...'>This my first jQuery UI Dialog!</div>" ).dialog({
        height: 140,
        modal: true,
        open: function (event, ui) {
            $('.ui-dialog').css('z-index',950);
            $('.ui-widget-overlay').css('z-index',949);
        },
    });
});
}

This function appears to do nothing at all.

function helpSTvar () {
$(function() {
    $( "#dialog-1" ).dialog({
        height: 140,
        modal: true,
        open: function (event, ui) {
            $('.ui-dialog').css('z-index',950);
            $('.ui-widget-overlay').css('z-index',949);
        },
    });
});
}

</script>

<div id="dialog-1" title="Dialog Title goes here...">This my first jQuery UI Dialog!</div>
</head>

Upvotes: 0

Views: 333

Answers (2)

Jhonatan Muller
Jhonatan Muller

Reputation: 51

Try it!

  1. Your <div> needs to be inside <body> instead of <head>;

  2. It's not a good pratice to have $(function(){ inside every function, instead you should do like this:

    function helpSTvar () {
    $( "#dialog-1" ).dialog({
        height: 140,
        modal: true,
        open: function (event, ui) {
            $('.ui-dialog').css('z-index',950);
            $('.ui-widget-overlay').css('z-index',949);
        },
    });
}

$(function(){
    helpSTvar(); // call one or more functions when document's ready
});

Upvotes: 0

Sudipta Kumar Maiti
Sudipta Kumar Maiti

Reputation: 1709

It seems div tag is in header section, it should be in body 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="dialog-1" title="Dialog Title goes here...">This my first
    jQuery UI Dialog!</div>

</body>
</html>

Upvotes: 2

Related Questions