Question

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

Answer 1

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’