I've got an index page and I want to load on a DIV another page from a very different directory, but I want that the page that will be loaded into the DIV to keep the CSS and JS includes, is it possible?
It seems that it only loads into the DIV, the body of the other page and forget the JS and CSS includes.
I'm using this code to load the HTML into the div:
<script type="text/javascript">
function processAjax(url) {
if (window.XMLHttpRequest) { // Non-IE browsers
req = new XMLHttpRequest();
req.onreadystatechange = targetDiv;
try {
req.open("GET", url, true);
} catch (e) {
alert(e);
}
req.send(null);
} else if (window.ActiveXObject) { // IE
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = targetDiv;
req.open("GET", url, true);
req.send();
}
}
}
function targetDiv() {
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
document.getElementById("mContent").innerHTML = req.responseText;
} else {
alert("Problem: " + req.statusText);
}
}
}
</script>
Usage:
My Page
Why don't you use an IFRAME tag that contains the url of the page you desire to display with the js and css you want to use.
<iframe src="mypage.html"></iframe>
Related
I am using xhlhttprequest to load an external html file. However I am trying to figure out how to load only a speicific DIV from that html file.
My external page is helpFile.html- it has dozens header <DIV>s, an each header DIV is a specific help section. On different pages, I want to be able load a specific section? How could I do this? As an example, on the dashboard.html page is a help ? icon, that when the user clicks on it, it will load just the helpFile.html#dashboard section out of the main helpFile.html page - the content would be loaded into a bootstrap modal.
Here is my code to retrieve the entire page, but how can I just retrieve the needed section.
<script>
var request;
function sendInfo() {
var url = "helpFile.html";
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
try {
request.onreadystatechange = getInfo;
request.open("GET", url, true);
request.send();
} catch (e) {
alert("Unable to connect to server");
}
}
function getInfo() {
if (request.readyState == 4) {
var val = request.responseText;
document.getElementById('helpModal').innerHTML = val;
}
}
</script>
Use DOMParser and look for the element
if (request.readyState == 4 && request.status == 200) {
var parser = new DOMParser();
var doc = parser.parseFromString(request.responseText;, "text/html");
var dashboardElement = doc.querySelector("#dashboard");
document.getElementById('helpModal').innerHTML = dashboardElement.innerHTML;
}
In gmail, we can see that if we open a mail, the address changes from
https://mail.google.com/mail/u/0/#inbox to this https://mail.google.com/mail/u/0/#inbox/14552c232aa5a9f4
without reloading the whole page, that is i can bookmark the content in a div which is dynamic
function load(thediv,thefile) {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState ==4 && xmlhttp.status == 200){
document.getElementById(thediv).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET',thefile,true);
xmlhttp.send();
}
I have tried this ajax code to load dynamic content to a div...but I can't bookmark it.
how can I do that in my website?
This method is calling 'pushstate'. For more information you can see this or this
I`am working on a js file which was designed for a home page.
I would like to navigate from this page to other pages via a navigation menu bar.
The target pages are sharing the same templat(a html code), thus for going to a specific page I need to load a specific content, which is saved in a xml file, then pass its contents to the target page.
function loadFileToElement(filename, elementId)
{
var xhr = new XMLHttpRequest();
try
{
xhr.open("GET", filename, false);
xhr.send(null);
}
catch (e) {
window.alert("Unable to load the requested file.");
}
// Until this point I can load the specific content
// How can I get from the url of the target page
// a js document object, so that I can call getElementById(Id)
// to pass the specific content.
// For instance: Im currently opnening X1:= www.main.com
// und I would like to switch to X2 := www.targetpage.com
// target page which contains html the templat.
// The problem **document** represents currently X1
// but i would like to set it to X2 so that I can pass
// the content of xhr.responseText to it
var component = **document**.getElementById(elementId);
component.innerHTML = xhr.responseText;
}
Thanks
Try this, I have added xhr.onload function, which populated text returned from response
function loadFileToElement(filename, elementId)
{
var xhr = new XMLHttpRequest();
try
{
xhr.open("GET", filename, false);
xhr.onload = function () {
var component = document.getElementById(elementId);
component.innerHTML = xhr.responseText;
}
xhr.send(null);
}
catch (e) {
window.alert("Unable to load the requested file.");
}
}
You can also use onreadystatechange event instead of onload. click for more reference
Try this
function loadFileToElement(filename, elementId)
{
var xhr = new XMLHttpRequest();
try
{
xhr.open("GET", filename, false);
xhr.onload = function () {
var com = document.getElementById(elementId);
com.innerHTML = xhr.responseText;
}
xhr.send();
}
catch (e) {
window.alert("Unable to load the requested file.");
}
}
Reference
Using this code below I can load an HTML page to a div, in my site, by clicking a link in my menu.
Now, the problem is that when it loads the HTML page into the div, it loads just fine... but without its original background color that should be loaded with the other content of the HTML page as well. All the other CSS elements seem to be just fine.
Thank you in advanced.
js code:
function processAjax(url)
{
if (window.XMLHttpRequest) { // Non-IE browsers
req = new XMLHttpRequest();
req.onreadystatechange = targetDiv;
try {
req.open("GET", url, true);
}
catch (e) {
alert(e);
}
req.send(null);
} else if (window.ActiveXObject) { // IE
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = targetDiv;
req.open("GET", url, true);
req.send();
}
}
return false;
}
function targetDiv() {
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
document.getElementById("containerDiv").innerHTML = req.responseText;
} else {
alert("Problem: " + req.statusText);
}
}
}
html:
<a onclick="return processAjax(this.href)" href="example.html">CLICK ME</a>
<div id="containerDiv"></div>
Get the style element from the page and append it to the head:
var styles = document.getElementsByTagName('style');
var head = document.getElementsByTagName('head')[0];
for(var x = 0; x < styles.length; x++){
head.appendChild(styles[x]);
}
Edit:
You want to set the returned html as an element first:
var div = document.createElement('div');
div.innerHTML = req.responseText;
var styles = div.getElementsByTagName('style');
for(var x = 0; x<styles.length;x++){
document.getElementsByTagName('head')[0].appendChild(styles[x]);
}
Use the new code, not the old, and put it in the if(reg.status == 200) block.
Change .innerHTML to .html, or just use .load(req.responseText)
.innerHTML overwrites everything I believe. You just want to change a section.
function processAjaxStateChangeForRowAdd() {
alert(0);
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
processForRowAdd(req.responseText);
} else {
alert("Problem: " + req.statusText);
}
}
}
This code is working fine for IE, Safari and Firefox, but if I remove the alert, then the code will not work in Firefox, though it still works in IE and Safari.
Can anybody give me suggestion why it not working in Firefox without alert?
EDIT: Code that adds a row:
if (window.XMLHttpRequest && browserVersion.indexOf("Microsoft") == -1 ) {
// code for Firefox, Chrome, Opera, Safari
req = new XMLHttpRequest("");
if (req) {
ajaxProcessed = false;
req.onreadystatechange = processAjaxStateChangeForRowAdd;
req.open("POST", url, true);
req.send();
// alert("1");
}
}
The alert is blocking. What this means is that your script is temporarily suspended (even if it's for a few milliseconds). During this time, your AJAX request completes and your req object is being set. You can add a delay (using setTimeout) to your callback to verify this.
I would suggest you post more of your script so that we can help you set up your callback properly. Alternatively, use a library such as jQuery to set up AJAX calls in a cross-browser manner easily.
EDIT: You need to either declare req as a global variable, or use an anonymous function. The following code demonstrates the first method (using a global variable):
var req;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
if (req) {
req.onreadystatechange = processAjaxStateChangeForRowAdd;
req.open("POST", url, true);
req.send();
}
}
function processAjaxStateChangeForRowAdd() {
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
processForRowAdd(req.responseText);
} else {
alert("Problem: " + req.statusText);
}
}
}
function getHttp()
{
var xmlhttp;
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
if(typeof XMLHttpRequest != 'undefiend')
{
xmlhttp = new XMLHttpRequest();
}
}
}
return xmlhttp;
}
can you try this:
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText;
} else
alert("status: " + request.status);
}
You should also check for the readyState , the following code might help
req.onreadystatechange=function()
{
if (req.readyState==4 && req.status==200)
{
processForRowAdd(req.responseText)
}
}
Read this for the different values of readyState