Asked 9 years, 9 months ago
Viewed 6k times
I have a code.js file which contains the following:
DivDialogHTML = function[]{
var mainDiv = document.createElement["div"];
mainDiv.id = "optin_settings_dialog";
mainDiv.className = "OptinDialog";
mainDiv.innerHTML = "Text";
}
The code to load the popup [dont know if it's all code, but to get the idea]:
DivDialogOverlayHTML = function[]{
var mainDiv = document.createElement["div"];
mainDiv.id = "optin_settings_overlay_dialog";
mainDiv.className = "OptinDialog";
return mainDiv;
}
renderOptinWindow = function[]{
var pageHead = document.getElementsByTagName["head"][0];
var pageBody = document.getElementsByTagName["body"][0];
if[ pageHead && pageBody ]{
pageBody.appendChild[ this.getDivDialogHTML[] ];
}
}
Instead of using the mainDiv.innerHTML = ' I'd like the mainDiv.innerHTML to open another file [Dialog.html].
How do I do that?
asked Dec 18, 2012 at 14:35
1
with Ajax. But why not using jQuery?
$['.selector'].load[url];
In your case you have to insert jQuery first like this in your
And than take your existing function and change it like this
DivDialogHTML = function[]{
var $mainDiv = jQuery["div"];
$mainDiv.attr['id', "optin_settings_dialog"];
$mainDiv.addClass["OptinDialog"];
/* $mainDiv.html["Text"]; */
$mainDiv.load['Dialog.html'];
}
answered Dec 18, 2012 at 14:56
algorhythmalgorhythm
8,2822 gold badges34 silver badges46 bronze badges
1
Do you mean another window? If so, please take a look at window.open
window.open
After you create new window, you put its contents and display
answered Dec 18, 2012 at 14:38
MoseleyiMoseleyi
2,3281 gold badge20 silver badges42 bronze badges
5
if you don't want to use jQuery you can use an iframe
HTML
Javascript
document.getElementById["optin_settings_dialog"].src="Dialog.html";
Matthew Lock
12.5k11 gold badges89 silver badges128 bronze badges
answered Jul 8, 2014 at 13:37
Ahmed DaifAhmed Daif
3293 silver badges11 bronze badges
Created: March-09, 2022
- Use JavaScript
fetch[]Method to Load an External HTML File - Use jQuery
load[]Method to Load an External HTML File
Sometimes, we must load an external HTML file into another HTML file using JavaScript or jQuery, depending on project requirements. This tutorial exemplifies how to load an external HTML file using JavaScript and jQuery.
Use JavaScript fetch[] Method to Load an External HTML File
HTML Code [home.html]:
Home Page
This content is loaded from the home page
HTML Code [index.html]:
Click to load content from home.html file
The content from Home Page will be displayed here
CSS Code [styles.css]:
div{
border: 2px solid rgb[255, 0, 0];
width: fit-content;
margin: 5px;
padding: 2px 20px;
cursor: pointer;
}
button{
margin: 5px;
padding: 2px 20px;
}
p{
font-size: 14px;
}
JavaScript Code [script.js]:
function loadHTML[]{
fetch['home.html']
.then[response=> response.text[]]
.then[text=> document.getElementById['homePage'].innerHTML = text];
}
Output:
The
fetch[] function requests the server to load data on various web pages.
We use the fetch[] function to fetch the home.html file from localhost. The fetch[] method returns a Promise.
Further, the Response interface’s text[] method is used, which accepts the Response stream, reads it and returns a Promise
which solves with the String. Remember, the Response is decoded by using UTF-8.
After that, we get the element whose id is homePage by using getElementById[] method and replace its inner HTML via .innerHTML property with the text.
Use jQuery load[] Method to Load an External HTML File
HTML Code [home.html]:
Home Page
This content is loaded from the home page
HTML Code [index.html]:
Home Page
Click to load content from home.html file
CSS Code [styles.css]:
div{
border: 2px solid rgb[255, 0, 0];
width: fit-content;
margin: 20px auto;
padding: 2px 20px;
cursor: pointer;
}
p{
font-size: 14px;
}
JavaScript Code [script.js]:
$[document].ready[function [] {
$['#homePage'].click[function [] {
$[this].load['home.html'];
}];
}];
Output:
The ready[] method examines whether the file is completely ready or not. This event only occurs when Document Object Model has been fully loaded.
The load[] method loads the information [data] from the server and gets the data returned by the server into the specified element.
We use the ready[] method to ensure that the DOM is fully
ready before further operations. The home.html file will be loaded using the load[] method.