<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
Related
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>
My jQuery code isn't working with xampp in Firefox only, though it does when I locally open the html file in Firefox. It also does work with xampp in Edge, Chrome and IE. Here is the jQuery code:
$(document).ready(function (){
// Hightlight the menu button of the current page by comparing its href to the current url.
var url = window.location.href;
$('.navMenu a').each(function() {
if (url == (this.href)){
$(this).addClass('active');
}
});
// Highlight the login button if pressed and remove the highlights on other menu buttons.
$('.loginButton').click(function(){
$(this).toggleClass('active');
$('.login').slideToggle();
});
});
Here is my html code:
<!DOCTYPE html>
<html ng-app="store">
<head>
<title>The Restaurant | Home</title>
<link rel="icon" href="../images/favicon.png">
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/layout.css">
<link rel="stylesheet" href="../css/login.css">
<script src="../scripts/angular.min.js"></script>
<script src="../scripts/jquery-3.1.0.js"></script>
<script src="../scripts/main.js"></script>
<script src="../scripts/UI.js"></script>
</head>
<body>
<header>
<figure>
<img src="../images/storelogo.png" alt="Logo of the store">
</figure>
<nav>
<navigation-menu></navigation-menu>
</nav>
</header>
<main>
<login-menu></login-menu>
</main>
<footer>
<ul>
<li>About</li>
<li>Contact</li>
</ul>
</footer>
</body>
</html>
The jQuery code is in the UI.js file. In the main.js file this code exists:
(function(){
var app = angular.module('store', []);
app.directive('navigationMenu', function(){
return {
restrict: 'E',
templateUrl: 'snippets/navigation-menu.html'
};
});
})();
And at last this is the code in the navigation-menu.html:
<ul class="navMenu">
<li>...</li>
<li class="dropdown">
...
<ul class="subMenu">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</li>
<li class="dropdown">
...
<ul class="subMenu">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</li>
<li class="dropdown">
...
<ul class="subMenu">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</li>
<li><a class ="loginButton">Log in</a></li>
</ul>
I've already tried several things myself: like mixing the script order and adding the event argument to the click function, but neither of these did work out. One thing I did see was that when I replace the navigation-menu tags with the code that is in navigation-menu.html everything works fine. So somehow the jQuery code gets run before angularjs adds the navigation-menu.html or something? Also the UI.js does get run, because an alert message if showing when I place an alert there.
I've found a solution to my problem. I had to put my jQuery code within a link function within a directive. The link function makes sure it gets run after the directive has been compiled and linked up. If someone wants the solution shown in code, just ask for it in a comment.
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");
});
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
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