CODEWITHSUNDEEP
javascriptjqueryajax
neiza
neiza

Reputation: 265

Calling an external page into a modal window with ajax

I want to load an external page in a modal window. by default i've already added some text in the modal window, but i want to delete the text which says "<p> hello folks, good evening</p>" and instead call an external page into the modal window which contains a different message

var openModal = function () {
        // close button
        var closeBtn = $('<a href="#" data-rel="back" class="ui-btn-right ui-btn ui-btn-b ui-corner-all ui-btn-icon-notext ui-icon-delete ui-shadow">Close</a>');

        // text you get from Ajax
        var content = "<p> hello folks, good evening</p>";

        // Popup body - set width is optional - append button and Ajax msg
        var popup = $("<div/>", {
            "data-role": "popup"
        }).css({
            width: $(window).width() / 0 + "px",
            padding: 5 + "px"
        }).append(closeBtn).append(content);

        // Append it to active page
        $.mobile.pageContainer.append(popup);

        // Create it and add listener to delete it once it's closed
        // open it
        $("[data-role=popup]").popup({
            dismissible: false,
            history: false,
            theme: "b",
            /* or a */
            positionTo: "window",
            overlayTheme: "b",
            /* "b" is recommended for overlay */
            transition: "pop",
            beforeposition: function () {
                $.mobile.pageContainer.pagecontainer("getActivePage")
                    .addClass("blur-filter");
            },
            afterclose: function () {
                $(this).remove();
                $(".blur-filter").removeClass("blur-filter");
            },
            afteropen: function () {
                /* do something */
            }
        }).popup("open");
};

Upvotes: 1

Views: 1843

Answers (3)

swatkins
swatkins

Reputation: 13640

If you prefer to load in the content from an external page rather than embedding an iframe, you can add the $.ajax call into your function:

var openModal = function () {
        // close button
        var closeBtn = $('<a href="#" data-rel="back" class="ui-btn-right ui-btn ui-btn-b ui-corner-all ui-btn-icon-notext ui-icon-delete ui-shadow">Close</a>');


        // create the ajax call and create modal in the callback
        $.ajax({
            url: "content_page.html",
            dataType: "html",
            success: function (response) {
                // text you get from Ajax
                var content = response;


                // Popup body - set width is optional - append button and Ajax msg
                var popup = $("<div/>", {
                    "data-role": "popup"
                }).css({
                    width: $(window).width() / 0 + "px",
                    padding: 5 + "px"
                }).append(closeBtn).append(content);

                // Append it to active page
                $.mobile.pageContainer.append(popup);

                // Create it and add listener to delete it once it's closed
                // open it
                $("[data-role=popup]").popup({
                    dismissible: false,
                    history: false,
                    theme: "b",
                    /* or a */
                    positionTo: "window",
                    overlayTheme: "b",
                    /* "b" is recommended for overlay */
                    transition: "pop",
                    beforeposition: function () {
                        $.mobile.pageContainer.pagecontainer("getActivePage")
                            .addClass("blur-filter");
                    },
                    afterclose: function () {
                        $(this).remove();
                        $(".blur-filter").removeClass("blur-filter");
                    },
                    afteropen: function () {
                        /* do something */
                    }
                }).popup("open");
            },
            error: function () {
                //handle error here
            } 


          });

};

Upvotes: 0

grdevphl
grdevphl

Reputation: 690

You can change your content var to equal '<iframe style="border: 0px; " src="YOUR_URL" width="100%" height="100%"></iframe>'. For example, '<iframe style="border: 0px; " src="http://jquery.com/" width="100%" height="100%"></iframe>'

I added your code to a fiddle so you can try it out: http://jsfiddle.net/4pjndrsc/1/

Hope that helps. Best of luck!

Upvotes: 1

crazymatt
crazymatt

Reputation: 3286

If you are trying to load a page from an external website I would imagine it would be as simple as loading in an iframe and passing the URL to the site you want to load in. In your JQuery just change this line:

var content = "<p> hello folks, good evening</p>";

to 

var content = "<iframe src='http://google.com' width='200' height='200'></iframe>";

Change the properties as needed. Hope that helps.

Upvotes: 2

Related Questions