I have a page with links in a nav. When a user clicks Page B, I'd like to load content from Page B into the div #main-text of Page A but I can't seem to get it to work. I'm very new to js, so be easy on me.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(function(){
$("#nav_a").on("click", function(){
$("#main_text").load("pageA.html");
});
$("#nav_b").on("click", function(){
$("#main_text").load("pageB.html");
});
});
</head>
</script>
<body>
<div class="nav">
<ul>
<li><a id="nav_a" href="#">Page A</a></li>
<li><a id="nav_b" href="#">Page B</a></li>
</ul>
</div>
<div id="main_text">Page A</div>
</body>
</html>
If the pages are from the same domain as the page with the script and contain valid (x)html, then it should work.
Note: Ajax does NOT work from file system. It needs all files to come from a web server.
I would personally do
$(".nav a").on("click", function(e){
e.preventDefault(); // cancel the click
$("#main_text").load("page"+this.id.split("_")[1].toUpperCase()+".html");
});
Related
I am making an application where a header with some Menus and a footer will stay in all the pages.
Now one way to this is write the code for header and footer in every page, which is a bad option.
The other option is using iframe,which I am using. here is my code-
<div style="height:75%;width:98%;">
<iframe name="someFrame" id="someFrame" frameborder="0" scrolling="yes" width="98%" height="100%"></iframe>
</div>
In this iframe I am calling the the contents of the other pages. I have one home page with a header and footer, and the middle portion will change using iframe.
To achieve the overlapping of iframes perfectly I use a jquery function which is below.
<script>
$("a").click(function(e) {
e.preventDefault();
$("#someFrame").attr("src", $(this).attr("href"));
$("a").removeClass("active");
$(this).addClass("active");
})
</script>
Now what I need is - is there any other way to do it?? That I can make 2 different pages for header and footer, and get the contents in every page? using java?? or ajax or whatever.. Any help will be appreciable...
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.html",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("External content loaded successfully!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
demo_test.html
<h1>I am not part of this page</h1>
There is another way to solve your difficulty.create a html file for menu named navbar_menu.html
navbar_menu.html
<ul>
<li>Home</li>
<li>About Us</li>
<li>Ticket Sales</li>
<li>Merchandise
<ul>
<li>Products</li>
<li>Shopping Cart</li>
</ul>
</li>
<li>Past Shows
<ul>
<li>Photo Gallery</li>
<li>Video Clips</li>
</ul>
</li>
</ul>
In another html page say index.html. In index.html page code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$.get("navbar_menu.html", function(data) {
$("#header").html(data);
});
});
</script>
</head>
<body>
<div id="header"></div>
</body>
</html>
The standard way to achieve this would be to use PHP. In the page where you want the header html included add in: <?php include 'header.html';?> Then change the extension of the pages you put this code into to .PHP instead of .HTML .
You can use jquery load function to load the content into a container div.This way we can have separate fragments for header and footer and be reused across pages
For example
$('#headercontainer').load('ajax/header.html #header')
Please see
[http://api.jquery.com/load][1]
Hope this helps
Why not just use Asp.net with master pages. You can have a desktop and a mobile master page where you write the header, menu and footer once, then you just add content pages.
It also gives you a programming language to use. C# will allow you to do way more than just HTML and JavaScript. Plus you can setup web user controls and black box your controls.
If youre interested check out the free microsoft IDE at http://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx
<html>
<head>
<title></title>
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function() {
$('#myList').delegate('li', 'click', function() {
var text = $(this).attr('id');
var hashname = "#" + "content";
var linkname = text + ".html";
alert(text);
$(hashname).load(linkname);
});
});
</script>
<ul id="myList" class="dropdown-menu">
<li id="about"> About us</li>
<li id="Services">Services</li>
<li id ="faq">FAQ</li>
</ul>
</head>
<body>
Main Content
</div>
<br />
<div id="content"></div>
</body>
</html>
I want to load header only once and want to dynamically load content by creating diff pages. Above code works well in mozilla but not workinf in Chrome or IE. Please help.
Below is Services.html
<p>This is dynamic content of service page</p>
<ul id="myList" class="dropdown-menu">
<li>Services</li>
</ul>
Are you running these from file:///? IE doesn't allow file access when running locally and Chrome requires --allow-file-access-from-files flag to be set when you launch the browser. Firefox doesn't have these restrictions, so your project would work as you expect there.
To get around these issues, run your project in a local webserver.
Try to use HTML helpers instead url strings. That urls you have probably isn't correct.
Try to do something like this in your header page:
<head>
<title></title>
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function() {
$('#myList').delegate('li', 'click', function() {
var url = $(this).data('url');
alert(text);
$("#content").load(url);
});
});
</script>
<ul id="myList" class="dropdown-menu">
<li id="about" data-url="#Url.Action("about", "myController")"> About us</li>
<li id="Services" data-url="">Services</li>
<li id ="faq" data-url="#Url.Action("faq", "myController")">FAQ</li>
</ul>
</head>
But normally what is done is something like this:
<html>
<head>
<title></title>
<script src="jquery-1.10.2.js"></script>
<ul id="myList" class="dropdown-menu">
<li id="about"> About us</li>
<li id="Services">Services</li>
<li id ="faq"><a href="#Url.Action("faq", "myController")>FAQ</a></li>
</ul>
</head>
<body>
Main Content
<br />
<div id="content">
#RenderBody()
</div>
</body>
</html>
UPDATE to complete the my answer to your question:
The code have some issues.
First, tags have a href so, you the user click the code executes is suppose the page be redirected to that link reference and on the JS is trying to do the same, what is a little strange.
Second, some JS functions don't work for every browsers. However .load() is supported in IE and Chrome but the problem could be on the $(hashname) and the url that is passed on linkname by the reason I refered above (I'm not expert but I think normally HTTP GET request not supports that structure of url with .html in the end). So it's better to try my solution and give feedback
I have a main.scala.html which has header,navbar and footbar as follows-
#(title: String)(content: Html)
<!DOCTYPE html>
<html>
<head>
<ul class="nav nav-justified" id="myTab">
<li>#Messages("views.main.apps")</li>
<li >#Messages("views.main.activity")</li>
<li>#Messages("views.main.devices")</li>
<li>#Messages("views.main.account")</li>
<li id="logout" data-toggle="tab">#Messages("views.main.logout")</li>
</ul>
<div id="showData">
#content
</div>
</div>
</head>
<body>
</body>
</html>
The page content should be displayed as in the tags.
However on clicking the tabs the page contents are not getting displayed.
Note the page contents were getting displayed earlier on clicking on the tabs but after adding data-toggle="tab" to the list elements it stopped displaying.
Check your html code:
...
<head>
<ul class="nav nav-justified" id="myTab">
There is a end head and start div tag missing.
Preview source code generated by Play in the browser and use built-in browser inspector for HTML error (also you can just try to validate it with W3C Validator
If your view looks exactly as you showed as - it can not produce valid HTML document
index.html
<!DOCTYPE html>
<html>
<head>
<script>
function cha(title){
document.getElementById("change").innerHTML=title;
}
</script>
</head>
<body>
<ul> //sample navigation bar
<li><a href='index.html'>Home</a></li> //sample navigation bar
<li><a href='mission.html' onclick='cha("Mission")'>Mission</a></li> //sample navigation bar
</ul> //sample navigation bar
THIS IS MY HOME PAGE
</body>
</html>
mission.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul> //sample navigation bar
<li><a href='index.html'>Home</a></li> //sample navigation bar
<li><a href='mission.html'>Mission</a></li> //sample navigation bar
</ul> //sample navigation bar
<h1 id='change'>THIS IS MY Mission </h1>
</body>
</html>
the ideal output of this 2 webpage is when i click the mission in index.html the heading <h1>in mission.html will change its inner content, from THIS IS MY Mission it will became mission only as stated in the cha("Mission"); but i dont know that is wrong in my code my ideal output did not show. thanks guys and sorry about my grammar.
It might be possible to make this a one page solution where the mission.html contains only the mission data, that way you can load it directly into the index.html as is and not have to navigate way from the page at all.
if you have the ability to use JQuery/AJAX you could load the html, and then on 'success' trigger the text change. You would add a "mission" div somewhere on the page to load mission.html into.
HTML Header
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
HTML Body
<div id="mission"></div>
Javascript
function cha(title){
$('#mission').load('mission.html', function(title) {
document.getElementById("change").innerHTML=title;
});
}
I hope this helps if it is an available option
I am testing this fiddle written by #Ilan Biala
It adds a submenu in a menu using jquery 1.9.0, onDomReady and Normalized css as you can see on the jsfiddle.
For instance the html is:
<nav>
<ul>
<li><a href="#" >Sec1</a></li>
<li><a href="#" >Sec2</a></li>
<li>Sec3</li>
<li><a href="contacto.html" >Sec4</a></li>
<ul class="menu">
<li>Documents</li>
<br>
<li>Messages</li>
<br>
<li>Sign Out</li>
</ul>
</ul>
</nav>
the result is:
But there is an issue, I am adding the code to a server I have access, and Added the lines:
<link rel="stylesheet" type="text/css" href="css/menu.css" />
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
to emulate those in jsfiddle. The html is:
<!doctype html>
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="css/menu.css" />
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
<nav>
<ul>
<li><a href="#" >Sec1</a></li>
<li><a href="#" >Sec2</a></li>
<li>Sec3</li>
<li><a href="contacto.html" >Sec4</a></li>
<ul class="menu">
<li>Documents</li>
<br>
<li>Messages</li>
<br>
<li>Sign Out</li>
</ul>
</ul>
</nav>
</body>
</html>
So, as you can see the submenu is not working, what could be causing the glitch?
I am suspecting different issues:
Maybe the onDomReady property that wraps the code so it will run in onDomReady window event, if so How do I indicate that on code :
$(document).ready(function() {
//ADD ALL THE JS CODE IN menu.js
});
The Normalized css, but that is suposed to make a reset....
Theres is an issue in the jquery 1.9.0, maybe the order the using js are placed...
What do you think?
yes you are right;
onDomReadycode is:
$(document).ready(function(){
//your code
})
as if you change the event in jsfiddle to body wrap it would not work.
See the same fiddle here modified to work with what you want: JS Fiddle Link
Its the exact same fiddle that you posted, just onDomReady set to "no wrap (head)" and JavaScript code wrapped in ready function. This makes it work with the HTML you have posted.
// jQuery(document).ready(function($) {
jQuery(function($) {
....
// your code
});
So, as an answer, when you have jQuery loaded in head tag of your html document, you need to use .ready() API of jQuery and wrap all your code for any DOM manipulation in the ready function