Load content of external header on other page - javascript

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>

Related

Static header layout in php

I want to know how to reload content without refresh the header. I created a small sample code below.
Header.php
<html>
<head>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
</ul>
index.php
<?php
include("header.php");
?>
<div>
This is contents 1
</div>
</body>
</html>
index2.php
<?php
include("header.php");
?>
<div>
This is contents 2
</div>
</body>
</html>
I assume index and index2 page as content pages.
When I click home or news link, content pages loads, but header.php also refresh every time when click it.
I want to know, how to load content pages without get fresh header.php when click home links.
Any ideas to do it with php or javascripts?
You'll have to use AJAX for that kind of thing. What you're trying to do is essentially SPA (Single Page Application). While it is alright to build your own SPA using simple AJAX request to fetch the partial view, I'd suggest you to learn React or Angular.
To achieve the desired effect, you can use simple XHR in vanilla javascript or you can use jQuery's $.ajax, $.post, $.get. If you opt for jQuery, you'll be using this kind of approach heavily throughout your application.
Master.php file-
<html>
<head>
</head>
<body>
<?php include 'header.php'; ?>
<div id="content">
</div>
</body>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script type="text/javascript" src="main.js">
</html>
content.php -
<div>
<p>Content 1 goes here</p>
</div>
header.php -
<div>
<ul class="navbar">
<li id="home">home</li>
<li id="content">content</li>
</ul>
</div>
main.js -
$( document ).ready(function() {
$.ajax({
url: "content.php",
cache: false
})
.done(function( html ) {
$( "#content" ).html( html );
});
});
This is only a general idea of how it would work. I have not tested the code, please don't expect it to run as it is. You'll want to use onclick listeners on links in your navbar to call AJAX and render the correct partial view.
MAJOR EDIT
Using #Mihir's code. I came up with a working sample.
index.php
<html>
<head>
</head>
<body>
<?php include 'header.php'; ?>
<div id="content">
</div>
</body>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
function go_to_home()
{
$('#content').load('home.php');
return false;
}
function go_to_news()
{
$('#content').load('news.php');
return false;
}
</script>
</html>
header.php
<div>
<ul class="navbar">
<button onclick="go_to_home();">home</li>
<button onclick="go_to_news()">News</li>
</ul>
</div>
home.php
<div>
<p>I am at home</p>
</div>
news.php
<div>
<p>This is my news</p>
</div>
This works now!! :D

Foundation navigation top-bar not working with thymeleaf

I have an HTML template file which uses Spring MVC + thymeleaf and I'm trying to create a navigable menu at the top of the page using Foundation's "top-bar" component.
So far, the menu bar is displayed but menus are not being shown when the cursor is placed on top.
I can display the sub-menus related to my main menu options (the ones placed at the bar) but sub-menus are not working because when I click an option on the first sub-menu, the menu closes instead of displaying another sub-menu.
My HTML file looks like this:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" type="text/css" media="all" th:href="#{/css/foundation.min.css}" />
</head>
<body>
<nav class="top-bar" role="navigation" data-topbar="true">
<ul class="title-area">
<li class="name">
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="divider"></li>
<li class="has-dropdown"><span th:text="#{menu.administration}"></span>
<ul class="dropdown">
<li class="has-dropdown"><span th:text="#{menu.administration.material}"></span>
<ul class="dropdown">
<li><span th:text="#{menu.administration.ontology}"></span></li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
</nav>
<div>
<div class="large-12 columns">
<h2 th:text="#{material.search.title}"></h2>
</div>
</div>
<script th:href="#{/js/vendor/jquery.js}"></script>
<script th:href="#{/js/foundation.min.js}"></script>
<script th:href="#{/js/foundation/foundation.topbar.js}"></script>
<script th:href="#{/js/vendor/modernizr.js}"></script>
<script>
jQuery(document).ready({
jQuery(document).foundation();
});
</script>
</body>
</html>
I'm sure my resources are being properly imported.
Also, I had to use data-topbar="true" because if I use data-topbar only, my page fails while rendering saying it a expecting for a = after the property name.
Am I doing something wrong?
Thank you so much for any help guys!
The problem was located in the property I was using to import my JS files.
As seen in my code, the import looks like this:
<script th:href="#{/js/foundation.min.js}"></script>
But to import a script file the href property is wrong, it must be src so the correct format is:
<script th:src="#{/js/foundation.min.js}"></script>
I know it was a silly mistake but I hope it helps someone else.
The fact that an error was never shown while compiling nor while generating the page worries me a little.
your th:text="#{menu.administration} is not working
the structure should be
<h1 th:text="${header.title}">title</h1>
<small th:text="${header.subtitle}">Subtitle</small>
you can't leave the empty and expect a value
please take a look at the tutorial http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html

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();
});

$(#divname).load(htmlcode) is not working in chrome & IE

<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

Jquery isn't recognized in simple html5 web page

I have been searching whole afternoon for a solution, but I didn't found it. I am writing a HTML5 webpage, using jquery and css. I'm trying to implement very simple drop down menu (I found tutorial here) but it does not work for me. I have copy paste this code from this article to a local html file and open it in browser and it works great, just as I want to implement menu, but when I try to implement the same code in my webpage it doesn't work.
I get in my console log displayed two errors:
(SyntaxError: function statement requires a name - jquery.js: row 2072) and then after this error i get
(ReferenceError: $ is not defined - index.html row 15, where the $ sign occurs).
I have been searching a lot, but I didn't found anything usefull which might help me. I have also checked number of times if I might have problem in jquery script declaration but It's ok. I don't have any idea why this simple code don't work in my application but in external code it works just fine. I have also try to insert language and text type on script tag, but I didn't work, neither if I leave script tag empty. I use latest Mozilla Firefox browser.
Here is my application code:
<!DOCTYPE html>
<html>
<head>
<title>Test title</title>
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/skin/default.css">
<script src="script/jquery.js" type="text/javascript"></script>
<script src="script/video.js" type="text/javascript"></script>
<script src="script/picture.js" type="text/javascript"></script>
<script src="script/ApplicationController.js" type="text/javascript"></script>
<script>
$("body").ready(function() {
$(".dropdown").hover(function() {
$(this).find(".sub_navigation").slideToggle();
});
});
</script>
</head>
<body onload="onApplicationLoad()">
<div id="header">
<img id="logo" src="images/logo.png" alt="Logo" width="200" height="38" />
<div id="verticalHeaderLine"></div>
<div id="headerMenu">
<ul id="navigation">
<li class="dropdown"> <button id="Login" class="button" title="Edit Login">Login</button>
<ul class="sub_navigation">
<li><button id="test" class="button" title="Edit Test">Test</button></li>
<li><button id="test1" class="button" title="Edit Test">Test 1</button></li>
<li><button id="test2" class="button" title="Edit Test">Test 2</button></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
and this is a css related to menu:
ul {
margin:0;
padding:0;
list-style-type:none;
min-width:200px;
}
ul#navigation {
float:left;
}
ul#navigation li {
float:left;
min-width:200px;
}
ul.sub_navigation {
position:absolute;
display:none;
}
ul.sub_navigation li {
clear:both;
}
I would be very happy if someone know what do I do wrong and if he could be so kind and tolk me what do I do wrong.
Regards,
Dahakka
$("body").ready(function() { should be $(document).ready(function() {
It's usually better to let Google host jQuery for you. See http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/ for a full explanation. Replace your reference to jQuery with
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
Also, at the end of your document, you have <body><html> instead of </body></html>
I think jquery is not being found. try adding this to your <head></head>.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
This is the google hosted jquery. If you have internet access it should at least solve your first problem
jQuery(document).ready(function($) {
$(".dropdown").hover(function() {
$(this).find(".sub_navigation").slideToggle();
});
});
Try this to see if there is a conflict or just jQuery isn't loaded at all.

Categories

Resources