I'm not sure if this is possible or not.
I wanted to make a same header and footer but with different content pages. My current course only covers HTML, JS, CSS, and JQuery.
Here is my current body, simplified:
<div id="header">
<ul>
<li>Content One</li>
<li>Content Two</li>
</ul>
</div>
<div id="contents">
<object id="change" data="contentOne.html" type="text/html" height="100%" width="100%">
</object>
</div>
<div id="footer">
<p>The footer</p>
</div>
Inside the head are something like this:
<head>
<script>
function contentOne(){
document.getElementById("change").data = "contentOne.html";
}
function contentTwo(){
document.getElementById("change").data = "contentTwo.html";
}
</script>
</head>
The problem is, that I can't get the content to change. It looks like it would work but, for example, clicking on ContentTwo, doesn't load contentTwo. The page remains the same.
You shall use setAttribute for native JS or .prop for jquery:
function contentOne(){
// native
var element = document.getElementById("change");
element.setAttribute("data", "contentOne.html");
// jquery
$("#change").prop("data","contentOne.html");
}
Make sure you properly close the attribute values, height="100% width="100%> is wrong, also the object element shall be closed with </object> :
<object id="change" data="contentOne.html"
type="text/html" height="100%" width="100%"></object>
Related
i have a web interface that includes a menu and a div with id "content" and i want to load many external html pages in the div using the menu, i have a problem in the code it shows only blanc.
this is the script :
<script>
function check() {
document.getElementById("content").innerHTML='<object type="text/html"
data="form.html" ></object>';
}
</script>
and this is the code of the menu (just a part of the code):
<li>Acceuil</li>
<li>
Gestion du personnel
</li>
and here where i want to load the div:
<div id="content">
<div class="background"></div>
<div class="Bienvenue"><b> Bienvenue sur la page d'accueil</b>
</div>
</div>
i don't know if it's necessary that the div must be empty, so please if you know anything help me
i changed
<object type="text/html" data="form.html" ></object>';
with
<embed type="text/html" src="form.html" ></embed>';
it works now
I'm not really sure using an object tag for loading HTML is standard, doing this appears to work similar to an IFrame, so I would personally use that. Or better still load content with either ajax or fetch..
Saying all this using the object tag does seem to work, here is a working snippet. I've also include the IFrame version commented out.
function check() {
document.getElementById("content").innerHTML='<object type="text/html" data="https://stacksnippets.net/"></object>';
//document.getElementById("content").
// innerHTML='<iframe src="https://stacksnippets.net/"/>';
}
<li>Acceuil</li>
<li>
Gestion du personnel
</li>
<div id="content">
<div class="background"></div>
<div class="Bienvenue"><b> Bienvenue sur la page d'accueil</b>
</div>
In an unordered list i have some a's with some href's. When clicked I want some html from an external file written. I cannot use any server side languages since it only gonna be running localy.
The structure of my file is:
<body>
<ul>
<li><a href="#">item1</li>
<li><a href="#">item2</li>
<li><a href="#">item3</li>
<li><a href="#">item4</li>
</ul>
<div id="content">
<!-- when a link is clicked write some html from external file to this spot-->
</div>
</body>
</html>
Thanks in advance
Since it looks like you're trying to load a script, there's a better way to do that, by using jQuery.getScript():
$('#triangle').click(function() {
$.getScript("js/triangle.js");
});
Also, as arieljuod points out, you haven't actually loaded jQuery in your HTML file. You'll need to do that to use it:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
(Or pick your favorite jQuery version and CDN; this is one of many.)
You don't want document.write().
You probably want this instead, depending on where you want the new HTML to go:
$('head').append('<script src="js/square.js"></script>');
You can listen for a click on an item and based on that trigger an ajax call for the appropriate file. Load the contents of that file into your content div within the success callback.
Happy to walk you through sample code live over here: https://sudonow.com/session/525cb34035e089113700000a
Pasting the content of the code editor here:
<body>
<ul>
<li id="item1" class="item"><a href="#">item1</li>
<li id="item3" class="item"><a href="#">item2</li>
<li id="item4" class="item"><a href="#">item3</li>
<li id="item5" class="item"><a href="#">item4</li>
</ul>
<div id="content">
<!-- when a link is clicked write some html from external file to this spot-->
</div>
</body>
</html>
//JS
//convert some file content to html
var genHtmlContent = function(content){
//do something here depending on how data is stored e.g. we could just return an html string from some keyvalue json
return content.htmlContent;
}
//Use javascript to detect a click on a list item and grab the appropriate content
$("item").click(function(event){
var selectedId = event.target.id;
var url = "http://www.mysite.com/" + selectedId + ".json";
$.get(url, function(content) {
var htmlContent = genHtmlContent(content);
$("#content").val(htmlContent);
})
})
//sample json file on server
//item1.json
{htmlContent: "<div>I am Item 1</div>"}
A quick and easy solution will be an iframe. Add as many iframes as you want, each having a different url. Give them a common class and hide them using CSS or jQuery. On clicking a link, prevent default and show the corresponding iframe, like;
<ul>
<li><a href="#" id="item1">item1</li>
</ul>
<div id="content">
<iframe class="iframes" id="iframe1" src="http://www.page1.com"></iframe>
</div>
and in your JavaScript, add this;
$('.iframes').hide();
$('#item1').click(function() {
event.preventDefault();
$('#iframe1').show();
});
While using jQuery Mobile <ul data-role="listview">, I am trying to add some <li>s from JavaScript, but the new <li> is not inheriting the jQuery Mobile styles. Here is the code:
<head>
<script>
function init()
{
msg = "<li> <a href=> New List Item </a></li>";
document.querySelector('#add_item').innerHTML += msg;
}
// call init on load
window.addEventListener('load',init,false);
</script>
</head>
<body>
<div id='main' data-role='page' data-theme='c'>
<div data-role='header'>
<h1>Welcome!</h1>
</div>
<div id='content' data-role='content'>
<ul data-role="listview" id="list_cars">
<div id="add_item">
</div>
<li> List Item 1</li>
<li> List Item 1</li>
</ul>
</div>
<div data-role='footer'>
<h4>Enjoy reading the book ...</h4>
</div>
</div> <!-- End of Min page -->
</body>
First, you're putting your <li> inside a <div> instead of directly inside the <ul>. Try changing your querySelector to...
document.querySelector('#list_cars').innerHTML += msg;
or, if you want the item at the top of the list, use this...
document.querySelector('#list_cars').innerHTML = msg + document.querySelector('#list_cars').innerHTML;
Then, you need to tell jQuery Mobile to update that list view by adding...
$('#list_cars').listview('refresh');
The last section on this jQuery Mobile Documentation page about lists describes this feature.
Working example here: http://jsbin.com/omepob/1/
To apply the properties on the new object, the optimal way is to call jQuery's refresh method for the object:
$("#myobject").listview("refresh");
However, I encourage you to replace this innerHTML call for something more DOM-atic, like:
var myli = document.createElement("li");
myli.appendChild(document.createTextElement("List Item 3"));
BTW, agreed with Travis; better include a "ul" as a parent of "li" instead of using a "div" there...
I would like to use a variable from my jsrender template in order to produce a snippet of javascript, but I can't figure out how to place a <script type="text/javascript"> within my <script id="data-item-tpl" type="text/x-jsrender">
Hopefully the below is fairly clear. The below code produces an Uncaught SyntaxError. If I remove the tags from the embedded script, then it is simply printed onto the page as text.
In the code below, I am trying to generate a div with the id 'chartId', and then a script which will fill that div with content, via the MyChart object.
<script id="data-item-tpl" type="text/x-jsrender">
<div class="item">
<div class="graphs">
<ul class="thumbnails">
{{for graphs}}
<li><div class="thumbnail"><img src="{{html:url}}" width="190" height="120" /><p>{{html:graphTitle}}<br />{{html:value}}</p></div></li>
{{/for}}
<!-- Here we insert both the placeholder for, and the javascript to populate charts -->
<li><div id="{{html:chartId}}" style="width:120;height:190px;"></div></li>
<script type="text/javascript">
var chartObj = new MyChart("{{html:chartId}}");
chartObj.render();
</script>
</ul>
</div>
...
</script>
I just did a little playing around and was able to get it working like this:
{{:"<scr" + "ipt type="text/javascript">"}}
var chartObj = new MyChart("{{html:chartId}}");
chartObj.render();
{{:"</scr" + "ipt>"}}
Maybe not the most elegant solution, but when I put an alert in there, it fired.
I am creating a Template Site, i want to change the content of the IFrame
based on the link clicked in javascript,
but the error i get is if i change the 'src' attribute of the iframe
the page gets reload.
So my question is
how to change iframe content without reloading the Page? below is my code
// HTML part
<li class="inside first">
HOME
</li>
<li class="inside">
PRODUCTS
</li>
<li class="inside">
SOLUTIONS
</li>
<li class="inside">
SERVICES
</li>
<li class="inside">
SUPPORT
</li>
<div id="mainContent">
<iframe
src=''
width="100%"
height="100%"
name='content'
id='content'>
</iframe>
</div>
//Javascript part
<script type="text/javascript">
var index=0;
var link_list= new Array('homepage.html','product.html','solution.html',
'services.html','support.html','event.html',
'partner.html','company.html');
var frame=document.getElementById('content');
frame.src=link_list[index];
function clicked(key)
{
// The following line is redirecting the page
frame.src=link_list[key];
return false;
}
</script>
Just write hrefs for those links and add attribute target="content".
This can be done w/o javascript at all.
Your link_list is wrong, JavaScript is case-sensitive, it's new Array(), not new array():
var link_list = new Array(...);
Use the array literal [] and you're fine:
var link_list = ['homepage.html','product.html','solution.html',
'services.html','support.html','event.html',
'partner.html','company.html'];
If you check your browser's JavaScript error console it's easy to find such errors:
[09:16:09.208] array is not defined # file:///.../temp.html:34