CODEWITHSUNDEEP
javascriptjqueryjquery-ui
kumar
kumar

Reputation: 2944

jquery dialog popup window problem

I added this code in my PopUpWindow.js File.. in my scripts folder

var window = "<div id='window' style='display: none;width:190px'></div>";


PopUpWindow = function (titles, message, redirectURL) {
    document.getElementById('window').innerHTML = message;
    $("#window").dialog({
        resizable: true,
        height: 180,
        title: titles,
        width: 500,
        modal: false,
        open: function () {
            $('.ui-widget-overlay').show();
            $('.ui-dialog-titlebar-close.ui-corner-all').hide();
        },
        buttons: {
            "OK": function () {
                $(this).dialog("close");
                if (redirectURL) {
                    window.location = redirectURL;
                }
            }
        }
    });
};

I have Included this js file in Site.Master page.

But still i am not able to access this PopUpWindow function in any of my aspx page?

is that I am doing something worng?

I am not able to execte this PopUpWindow for showing the Popup Message

PopUpWindow("Field to Show","Message","URL redirect");

Thanks

Upvotes: 0

Views: 1380

Answers (2)

mattsven
mattsven

Reputation: 23253

It would seem that either you are loading this file wrong (bad url) or something else is going on. Could you check and let us know? It could even be a syntax error.

EDIT: Did you forget to append window to your DOM?

var window2 = "<div id='window' style='display: none;width:190px'></div>";

$(window2).appendTo("body")

Upvotes: 0

n00dle
n00dle

Reputation: 6043

Although "window" is being held in a variable, it is not added to the page anywhere before you try to get it by id.

    var window = "<div id='window' style='display: none;width:190px'></div>";


    PopUpWindow = function (titles, message, redirectURL) {

    // Add to body (change the selector to whatever's relevant)
    $('body').append( window );
    // Set the innerHTML the jQuery way :)
    $('#window').html( message );
    $("#window").dialog({
        resizable: true,
        height: 180,
        title: titles,
        width: 500,
        modal: false,
        open: function () {
            $('.ui-widget-overlay').show();
            $('.ui-dialog-titlebar-close.ui-corner-all').hide();
        },
        buttons: {
            "OK": function () {
                $(this).dialog("close");
                if (redirectURL) {
                    window.location = redirectURL;
                }
            }
        }
    });
};

I've only tested this on JSFiddle, and the CSS isn't there, so I can't guarantee there's not more wrong, but this does make a dialog appear if you change display to "block" on `#window'

Upvotes: 1

Related Questions