Javascript csi and navigation (no iframes) - javascript

I am importing external html files using jQuery like this:
$("#header").load("header.html");
$("#content").load("home.html");
$("#footer").load("footer.html");
And the html:
<html>
...
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
What I want to be able to do is to also have this:
Import the Nav:
$("#hav").load("nav.html");
Into:
<div id="nav"></div>
So I would have:
<html>
...
<body>
<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
The nav import would look like this:
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
Now, this is the hard part...
I need the pages from the nav to open in the content area but I need the header and footer to stay loaded as they are and only the content area to change.
How can I do this without iframes or angular (as I know angular can do this).

I haven't tested this out, but here's a way that might work.
$('#nav').on('click', 'li a', function(evt) {
evt.preventDefault();
var href = $(this).attr('href');
$('#content').load(href);
});
The listener is added to #nav only because that element exists at the time the listener is made, but it's actually listening for any bubbled elements of children, fitting the selector.
The preventDefault() is meant to prevent regular navigation from taking place. If that doesn't work, you could try the same with a link in appearances-only. (eg, <span class="linkLike" data-href="about.html">About</span>)

Related

Load content of external header on other page

I've only started working on my website and I've already run into a little hiccup, for some reason a script that I use doesn't work anymore and I can't find any fixes, there's nothing in the chrome console or any useful error information.
I was hoping you guys could help me out.
I'm simply trying to load a piece of a different HTML page onto my Index page.
Usually I run this script, and it should take the #nav div from the header.html and put it into the header below the script.
Index.html:
<!--added scripts-->
<script src="jquery/jquery-3.2.0.min.js"></script>
<!-- Css -->
<link rel="stylesheet" type="text/css" href="Sjvklusbedrijf.css">
<!--script-->
<script>
$(document).ready(function() {
$("#header").load("header.html #nav");
alert("test");
});
</script>
</head>
<body>
<header id="header">
</header>
requested script:
<div id="#nav">
<div class="logodiv"></div>
<ul>
<li>Home</li>
<li>Foto's</li>
<li>Garantie</li>
<li>Contact</li>
</ul>
I'm using jquery and have loaded it thusly: <script src="jquery/jquery-3.2.0.min.js"></script> and if I put an alert in the doc.ready script it pops up but it doesn't load the required data
I'm running on localhost but that shouldn't be a problem for jquery
Thanks for the help!
It did not work the first time because <div id="#nav"> should be <div id="nav">.
okay somehow it decided to work but I don't really get why.
I changed some things:
index:
<script>
$(document).ready(function() {
$("#header").load("header.html nav");
});
</script>
</head>
<body>
<!--header-->
<header id="header" class="header">
</header>
required script:
<nav>
<img src="fotos/test" alt="logo"/>
<ul>
<li>Home</li>
<li>Foto's</li>
<li>Garantie</li>
<li>Contact</li>
</ul>

Loading View into <div>

Just wondering if anyone knows of a decent jQuery plugin (Or Javascript) that would allow me to load "view" (NOT PARTIAL VIEW) into a <div> when a user clicks on a link.
Here's where it may be tricky, I have 8 pages.I have a Homepage in that, there is 3 divisions. First division for Header and second one have picture and third one for footer. I want to load view into second division. I have been searching Google and have not been able to find anything that seems stable.
Thanks in advance Shiyas :)
I have tried below code. It's not working.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#a_book_id").click(function () {
$("#middleDiv").load("http://localhost:56708/Home/Books");
});
</script>
</head>
<body>
<div id="mainDiv">
<div id="headerDiv">
#Html.Partial("~/Views/Shared/Header.cshtml")
</div>
<div id="middleDiv">
</div>
<div id="footerDiv">
#Html.Partial("~/Views/Shared/Footer.cshtml")
</div>
</div>
</body>
This code is from my HomePage. In here I am rendering Header(Partial view) into the first divison. When i click on a link in Header, the book view should load into middle division. Well, It's not loading.
You can use jquery load function.
Load data from the server and place the returned HTML into the matched element.
$('#divId').load('url');
jQuery .load() documentation
Place the piece of your script that loads the view at the bottom of your page just before </body>. You should also use a relative URL, so when you release to production you will not have to change this. Try the below.
<body>
<div id="mainDiv">
<div id="headerDiv">
#Html.Partial("~/Views/Shared/Header.cshtml")
</div>
<div id="middleDiv">
</div>
<div id="footerDiv">
#Html.Partial("~/Views/Shared/Footer.cshtml")
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#a_book_id").click(function () {
$("#middleDiv").load("/Home/Books");
});
</script>
</body>

How to get the content of a html page from another html page?

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

jQuery call function after content get changed by .load() method

I have a very basic question concerning jQuery but I really don't know how to put it in a short sentence/ headwords to google for it. So first of all, I'm sorry if this might be a double post.
For my problem, I guess only those three files a relevant:
index.html
content.html
script.js
My index.html basically is just a file which keeps a navigation bar (build with Bootstrap v3.3.0).
<!DOCTYPE html>
<html lang="en">
<head>
...
<!-- Bootstrap CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles CSS -->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
...
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Content</li>
...
</ul>
</div><!-- end navbar-collapse -->
</div><!--end container -->
</nav> <!-- end navbar -->
<div class="container" id="mainContainer">
<!-- Load by default from the Navigation with jQuery -->
</div><!-- end container -->
<footer>
....
</footer>
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- Custom JS -->
<script src="js/script.js"></script>
</body>
</html>
My content.html basically only displays a "button" now (Actually it displays much more, but for this example it only displays a "button")
<div class="col-xs-12 col-md-6">
<a id="testButton" class="btn btn-success" href="#">This is a Test-Button</a>
</div>
My script.js basically only "changes" the content of the div-Element (<div class="container" id="mainContainer">…</div>).
$(document).ready(function () {
$('.nav li a').click(function(e) {
$('.nav li').removeClass('active');
var $parent = $(this).parent();
var $content = $(this).attr('href');
if (!$parent.hasClass('active')) {
$parent.addClass('active');
$('#mainContainer').hide().load($content + '.html').fadeIn('500');
$('#mainFooter').hide().fadeIn('500');
}
e.preventDefault();
});
$('#testButton').click(function(event){
alert("Test, this Button works!");
event.preventDefault();
});
});
Everything displayed here works pretty fine (I'm not sure if this is the way how you should use the navigation, but it works). When I change the content by clicking on the "Content-Item" from the navigation, the content.html file gets displayed in the div-element. But when I click on the Button from the content.html (which was loaded before), no alert gets fired. I guess because the "javascript file", can't find a reverence when the Webpage loads the first time. When I enter the javscript code directly into the content.html file the button actually fires an alert (same happens when I only link the file <script src="js/script.js"></script>).
I really do not want to enter this single line of code (<script src="js/script.js"></script>) to every "content-file". So is there an easier way how to do that? Maybe I also need to change the way how I use the navigation.
Thanks for your help
You want event delegate.
It means you delegate #testButton's click event to it's parent, even if the button is not yet exist in the dom, but when it is there, it's parent, in your situation, #mainContainer will be able to handle the button's event listener.
Like:
$('#mainContainer').on('click', '#testButton', function(event){
alert("Test, this Button works!");
event.preventDefault();
});

Showing a dialog from a separate html file and passing it a parameter

I am using android 2.2, phonegap 1.3, and jquery-mobile 1.0
I have a list view in which there is an element in the list that I want to use to create a dialog. I would like my dialog to be defined in a separate file so I can reuse it and I would like it to set the title according to the value I pass.
My dialog looks something like this:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("#title").append(SMSPLUS.queryString("title"));
});
</script>
<title>Dialog</title>
</head>
<body>
<div data-role="page" class="ui-page-z">
<div data-role="header" data-theme="z" class="ui-bar-z">
<h1 id="title"></h1>
</div>
<div data-role="content">
...
</div>
</div>
</body>
</html>
I have tried using a #href with the title parameter (as defined below), dialog is opened but the title param isn't present.
<ul data-role="listview" data-theme="a">
...
<li><a href="dialog.html?title=blah" data-rel="dialog"/></li>
...
</ul>
I have read that I could use a data-url but in this case it is not clear where I define it (in the <a> or in a <div> which wraps it) and how I extract this in the dialog page.
EDIT
For the record the mechanism works in a standard browser but without the styling.
I created the script inside the <script> tags below which listens for page show events and updates the title and placeholder for the input.
<div data-role="page" class="ui-page-z">
<div data-role="header" data-theme="z" class="ui-bar-z">
<h1 id="title">
</h1>
</div>
<div data-role="content">
<input placeholder="Type here..." id="configtext">
</input>
...
<script type="text/javascript">
$("div.ui-page-z").live("pageshow", function(event, ui) {
var dataUrl = $(".ui-page-active").attr("data-url");
$("#title").empty();
$("#title").append(SMSPLUS.getValue("title", dataUrl));
$("#configtext").attr("placeholder", SMSPLUS.getValue("placeholder", dataUrl));
});
</script>
</div>
The script wasn't detected when placed in the header (presumably because the framework takes no notice of headers for dialogs)
You might try removing the
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("#title").append(SMSPLUS.queryString("title"));
});
</script>
<title>Dialog</title>
</head>
<body>
</body>
and only return the body html & javascript in your ajax call. Having two DOMS in one might confuse the browser.

Categories

Resources