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

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
Newton21205Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
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

Newton21205Author Commented:
hi Julian,

your solution did not work. the modal dialog still displays blank.
Slick812Commented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
your solution did not work. the modal dialog still displays blank.
Please post a link to your site or your full code.
Slick812Commented:
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.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
AJAX

From novice to tech pro — start learning today.