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 '

hello folks, goo

Solution 1:

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 = "<iframesrc='http://google.com'width='200'height='200'></iframe>";

Change the properties as needed. Hope that helps.

Solution 2:

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!

Solution 3:

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 buttonvar 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 Ajaxvar content = response;


                // Popup body - set width is optional - append button and Ajax msgvar 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
            } 


          });

};