Load Div Content from Another Page

Question

I am trying to load a div content from another page(this page is in another project which is running in tomcat all together) with javascript ajax.

 var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8080/prob-services/clogin#login_page');
xhr.onload = function() {
alert(xhr.status);
console.log(xhr);
    if (xhr.status === 200) {
        var modal = document.getElementById("modal_dialog");
        modal.innerHTML = xhr.responseText;
    }
};
xhr.send();

The problem is when I log xhr I see that responseURL is until # , so ajax takes only http://localhost:8080/prob-services/clogin instead of http://localhost:8080/prob-services/clogin#login_page . That's why it loads whole page. Is there any way to get only div content without JQuery?

Answer 1

Solution to filter the whole page:

Create a dummy hidden DOM element like

<div style='display: none' id="loadedHTML"></div>

then put the HTML of the whole page you received from the server into it:

document.getElementById('loadedHTML').innerHTML = xhr.responseText;

now you can search the html inside this component. Say the part you want to is in a div called "MyDiv" inside the page:

var modal = document.getElementById("modal_dialog");
modal.innerHTML = document.getElementById('MyDiv').innerHTML;

fell free to ask more if it's not clear enough.

Answer 2

Use this jQuery load() function

$('#modal_dialog').css('opacity','1').load('http://localhost:8080/prob-services/clogin',function() { 
    alert():
} );