how to display ajax reponse(external link to a page) in modal dialog

Newton21205
Newton21205 used Ask the Experts™
on
using ajax to get the external link page as response and want to display it as a modal dialog
However the external link opens as a modal page in wordpress.
If I open it as an html in browser it does not display the external link (jquery.com) content in the modal dialog window.
Please find the attached source code.
modal.html
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Try change this
function handler() {
    if (this.readyState == this.DONE) {
        if (this.status == 200 && this.responseText != null) {
            $("#dialog").text(this.responseText);
            return;
        }
        console.log('Something went wrong! Status = ' + this.status);
    }
}

Open in new window

To this
function handler() {
    if (this.readyState == this.DONE) {
        if (this.status == 200 && this.responseText != null) {
            // HTML method rather than TEXT
            $("#dialog").html(this.responseText);
            return;
        }
        console.log('Something went wrong! Status = ' + this.status);
    }
}

Open in new window

Author

Commented:
hi Julian,

your solution did not work. the modal dialog still displays blank.
greetings Newton21205, ,  You use a "this" self reference variable in your AJAX onreadystatechange function handler(), , you can NOT do that, there is no OBJECT to self reference, and beside that the function handler() is asynch so you can't use a "this" even if its in an object.

you have to use the XMLHttpRequest variable as "xhttp"  for ALL AJAX variable reference -
function handler() {
    if (if(xhttp.readyState == 4){) {
        if (xhttp.status == 200 && xhttp.responseText.length) {
            $("#dialog").html(xhttp.responseText);
        $("#dialog").dialog({
            width: 400,
            height: 450,
            modal: true,
            close: function () {
                $("#dialog").html('');
            }
        });
            return;
        }
        console.log('Something went wrong! Status = ' + xhttp.status);
    }
}

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = handler;

$(document).ready(function () {
    $(".test").click(function () {
        xhttp.open("GET", $(this).attr("href"));
        xhttp.send();
        return false;
    });

});

Open in new window

In JQUERY you have many AJAX methods you should use instead like $.get() -
$(document).ready(function () {
    $(".test").click(function () {
console.log("HREF is = "+$(this).attr("href"));
    $.get($(this).attr("href"), {} )
      .done(function(re) {
        $("#dialog").html(re);
        $("#dialog").dialog({
            width: 400,
            height: 450,
            modal: true,
            close: function () {
                $("#dialog").html('');
            }
        });
    }) ;
    });

});

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
your solution did not work. the modal dialog still displays blank.
Please post a link to your site or your full code.
Newton21205, , Thsnaks for points, ,  Just a NOTE , you should be using the JQUERY AJAX like -
    $.get(
or other jquery ajax,  if you are in a page that has jquery in it, the  -
       var xhttp = new XMLHttpRequest();
is not so easy to understand and use as you have seen here, for many coders, the jquery AJAX is much more robust (works most of the time) than trying to do the XMLHttpRequest().
here's the info about the jquery -
      https://api.jquery.com/jquery.get/
in 2016 you almost have to effectively use AJAX in your web pages.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial