I apologize if you've already seen this. I'm still struggling a bit with this. I just need to modify the function to load only the colTwo div from the link selected on the menu instead of the entire page.
I see the code from the jquery website:
$('#result').load('ajax/test.html #container');
But I don't understand how to make the function do this.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Title</title>
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript" src ='jquery-1.9.1.min.js'></script>
<script type="text/javascript">
$(function(){
$('#menu li a').on('click', function(e){
e.preventDefault();
var page_url=$(this).prop('href');
$('#colTwo').load(page_url);
});
});
</script>
<body>
<div id="header">
<h1>My Title</h1>
</div>
<div id="content">
<div id="colOne">
<div id="menu1">
<ul id="menu">
<li>Members</li>
<li>About</li>
</ul>
</div>
<div class="margin-news">
<h2>Recent Updates</h2>
<p><strong>None At This Time</strong> </p>
</div>
</div>
<div id="colTwo"><h2>Starting Text</h2></div>
<div style="clear: both;"> </div>
</div>
</body>
</html>
Kevin B is correct:
$('#colTwo').load(page_url + ' #colTwo');
Just add the selector as a string to the URL, and don't forget the space!
Related
i have a project formed by html, js, bootstrap, angularjs.
my site have many pages that all pages have a template.
now, i think header ,navigation , footer and etc isn't reusable and i should write those any time.
example in JSF :
<ui:composition template="/WEB-INF/template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<ui:define name="title">
New page title here
</ui:define>
<ui:define name="content">
<h1>New content here</h1>
<p>Blah blah</p>
</ui:define>
</ui:composition>
I do not know if I can use Angular to do this.
Thank you for any help you receive.
this is sample of my page:
<!DOCTYPE html>
<html lang="en" >
<head>
<title>main template</title>
<meta charset="utf-8">
<link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
...
<link rel="stylesheet" type="text/css" href="app/styles/bootstrap4/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="app/styles/responsive.css">
...
</head>
<body>
<script src="app/js/jquery-3.2.1.min.js"></script>
<script src="app/styles/bootstrap4/bootstrap.min.js"></script>
....
<div class="super_container" ng-controller="showcaseController">
<!-- Header -->
<header class="header trans_300">
<!-- Top Navigation -->
<div class="top_nav">
<div class="container">
....
</div>
</div>
<!-- Main Navigation -->
<div class="main_nav_container">
<div class="container">
<div class="row">
....
</div>
</div>
</div>
</header>
//content of page like this
<div include-html="queryManagement.html"></div> // <<---- url clicked
</div>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/elasticsearch/elasticsearch.angular.js"></script>
<script src="app/apps/app.js"></script>
.....
</body>
</html>
tip:
Pages are clicked on the bar, and they look like they are on the page.
But in any case, the layout page is loaded as a main page, which opens
the content of the selected page within itself.
i found solution with angularjs.
in layout page:
<html lang="en" ng-app="FirstPage">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="app/styles/bootstrap4/bootstrap.min.css">
....
</head>
<body>
<script src="app/styles/bootstrap4/bootstrap.min.js"></script>
.....
<div class="super_container" ng-controller="layout">
<!-- Header -->
<header class="header trans_300">
<!-- Top Navigation -->
<div class="top_nav">
<div class="container">
......
<nav class="navbar">
<ul class="navbar_menu">
look ng-click <li>link 1</li>
look ng-click <li>link 2</li>
</ul>
</div>
</nav>
....
</div>
</div>
</header>
<!--<div ng-bind-html="contentUri"/>-->
<div id="ext-content" ng-include="contentUri"/> //<== use ng-include for content
</div>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script src="app/apps/app.js"></script>
....
</body>
</html>
and then in js:
app.controller("layout", function ($scope, client, esFactory) {
$scope.contentUri = '';
$scope.loadContent = function (uri) {
$scope.contentUri = uri;
}
});
this worked for me
I´m trying to link jquery to an external js file, but I can´t get it to work. This is my full html. I have put jquery before the js file, as you can see. I also tryed to link both the jquery and js in the body after the div, but that didn't work either.
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css-teachers/lessons- teacher.css"/>
<script src="../jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../javascript-teachers/lessons-teacher.js"></script>
<meta charset="UTF-8">
<title>HOME</title>
</head>
<body>
<div id="box1"> <a href="page2.html"/></div>
<div id="box2"> <a href="page3.html"/></div>
<div id="box3"> <a href="#"/></div>
<div id="box4"> <a href="#"/></div>
<div id="box5"> <a href="#"/></div>
<div id="box6"> <a href="#"/></div>
</body>
</html>
My js works if I put it into the body like this
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css-teachers/lessons- teacher.css"/>
<meta charset="UTF-8">
<title>HOME</title>
</head>
<body>
<div id="box1"> <a href="page2.html"/></div>
<div id="box2"> <a href="page3.html"/></div>
<div id="box3"> <a href="#"/></div>
<div id="box4"> <a href="#"/></div>
<div id="box5"> <a href="#"/></div>
<div id="box6"> <a href="#"/></div>
<script src="../jquery-1.11.3.min.js"></script>
<script>
$("#box1").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
</script>
</body>
</html>
Any suggestions on what I should do?
Thanks in advance
Glad my comment above helped.
Just wanted to mention that, since you're using jQuery, you can also put the code in your external file in the following code block to prevent it from executing until all page elements are rendered:
$(document).ready(function() {
$("#box1").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
});
More info: https://learn.jquery.com/using-jquery-core/document-ready/
if you link your script inside the tag <head> </head> maybe you have to include the type:
<script type="text/javascript" src="../jquery-1.11.3.min.js"> </script>
like the same way you did with your home.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Practice!</title>
<link href="../_css/site.css" rel="stylesheet">
This is my source for jquery (which I got from my text book)
<script src="../_js/jquery-1.7.2.min.js">
</script>
<script src="javascript/hello.js">
</script>
<script src="javascript/fadeIn1.js">
</script>
<script src="javascript/igotit.js">
</script>
</head>
<body>
<div class="wrapper">
<div class="header">
<p class="logo">JavaScript <i>&</i> jQuery <i class="mm">The<br>
Missing<br>
Manual</i></p>
</div>
<div class="content">
<div class="main">
<h1>Fading In</h1>
<p>Here I come!!!</p>
</div>
<div class="aside"> </div>
</div>
<div class="footer">
<p>JavaScript & jQuery: The Missing Manual, by David McFarland. Published by O'Reilly Media, Inc.</p>
</div>
</div>
</body>
</html>
This is what my external javascript files look like. For my external files, would they just need to be the "<script>" part of the code or the whole entire "<DOCTYPE>" to "</html>"?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fade In</title>
<link href="../_css/site.css" rel="stylesheet">
<script src="../_js/jquery-1.7.2.min.js">
</script>
<script>
$(document).ready(function() {
$('body').hide().fadeIn(3000);
});
</script>
</head>
<body>
<div class="wrapper">
<div class="header">
<p class="logo">JavaScript <i>&</i> jQuery <i class="mm">The<br>
Missing<br>
Manual</i></p>
</div>
<div class="content">
<div class="main">
<h1>Fading In</h1>
<p>Here I come!!!</p>
</div>
<div class="aside"> </div>
</div>
<div class="footer">
<p>JavaScript & jQuery: The Missing Manual, by David McFarland. Published by O'Reilly Media, Inc.</p>
</div>
</div>
</body>
</html>
Sorry, I am new to this and am having troubles.
Your external files should only have JavaScript in them, so nothing that looks like
<this/>
should be in them. It looks like you just want:
$(document).ready(function() {
$('body').hide().fadeIn(3000);
});
...in your fadein1.js. Likewise for the other JS files.
When you have the document open in your browser, press F12 for some useful messages to paste here if it still isn't working.
Is Jquery file in the right location? If you are not sure just use this link for jquery:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
I'm kinda new to jQuery/HTML5 stuff, so I'm running into some problems. Hope you can help.
I'm loading a local json file and want to add the items of it to a list. This works just fine. But, the list is not using the jQuery styling?
I tried it without loading the json file and instead I put the data directly in the code and it worked. What might be my problem?
Here is the code which does not style correct:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tuBS Energie App</title>
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.css" rel="stylesheet"/>
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div id="tasksPage" data-role="page">
<div data-role="header" data-position="fixed">
Zurück
<h1>tuBS Energie App</h1>
</div>
<div data-role="content">
<h3>Institut für Nachrichtentechnik</h3>
<ul id="taskList" data-role="listview" data-filter="true" data-filter-placeholder="Suche nach Institut..." data-inset="true"></ul>
</div>
<div data-role="footer" data-position="fixed">
Info
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(function()
{
$(document).ready(function(){
$.getJSON("institute.js",function(data) {
$.each(data.institute,function(i,el){
$("<li><a href='#'>"+el.id+". "+el.name+"</a> </li>").appendTo("#taskList");
});
});
});
})
</script>
</body>
</html>
And here is the code which gives me the correct styling
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tuBS Energie App</title>
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.css" rel="stylesheet"/>
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div id="tasksPage" data-role="page">
<div data-role="header" data-position="fixed">
Zurück
<h1>tuBS Energie App</h1>
</div>
<div data-role="content">
<h3>Institut für Nachrichtentechnik</h3>
<ul id="taskList" data-role="listview" data-filter="true" data-filter-placeholder="Suche nach Institut..." data-inset="true"></ul>
</div>
<div data-role="footer" data-position="fixed">
Info
</div>
</div>
<script type="text/javascript" charset="utf-8">
var institute_json =
[
{"id":"1","name":"Adaptronik und Funktionsintegration"},
{"id":"2","name":"Analysis und Algebra"},
{"id":"3","name":"Angewandte Mechanik"},
{"id":"4","name":"Angewandte Physik"},
{"id":"5","name":"Anorganische und Analytische Chemie"},
{"id":"6","name":"Architekturbezogene Kunst (IAK)"},
{"id":"7","name":"Automobilwirtschaft u Industrielle Produktion"},
];
$.each(institute_json,function(i,el)
{
$("<li><a href='#'>"+el.id+". "+el.name+"</a></li>").appendTo("#taskList");
});
</script>
</body>
</html>
When you add elements dynamically to the listview, after rendering you need to refresh it.
$("ul").listview("refresh");
Can you give us the content of institute.js
Try this :
$.getJSON("institute.js",function(data) {
$.each(data,function(i,el)
I am using jQuery Mobile and I would like to redirect the browser to another page, after the user clicked on a button on the home.
To do this I wrote:
$.mobile.changePage("album-search-results.html",{
data:{area:searchArea, value:searchValue},
transition: "pop"
});
And it works fine, it loads the correct page and it even puts the right values on the URL. Unfortunately the pageshow event is not triggered:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
</head>
<body>
<div data-role = "page" data-theme = "d" id = "SearchResults">
<div data-role = "header">
<h1>Aggregator</h1>
</div>
<div data-role = "content">
</div>
</div>
<script type="text/javascript">
$("#SearchResults").on("pageshow",function(event, ui){
console.log(ui.prevPage);
});
</script>
</body>
</html>
The console in always empty when I load this page from the previous one. What is wrong?
Thanks
Solution
Solution is simple, move script block inside a page div. In your case script block is discarded. Basically change it like this:
From :
<body>
<div data-role = "page" data-theme = "d" id = "SearchResults">
<div data-role = "header">
<h1>Aggregator</h1>
</div>
<div data-role = "content">
</div>
</div>
<script type="text/javascript">
$("#SearchResults").on("pageshow",function(event, ui){
console.log(ui.prevPage);
});
</script>
</body>
To :
<body>
<div data-role="page" data-theme="d" id="SearchResults">
<div data-role = "header">
<h1>Aggregator</h1>
</div>
<div data-role = "content">
</div>
<script>
$(document).on("pageshow","#SearchResults",function(event, ui){
console.log(ui.prevPage);
});
</script>
</div>
</body>
Example:
index.html
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('click', '#change-page', function(){
$.mobile.changePage("album-search-results.html",{
data:{area:"asda", value:"1"},
transition: "pop"
});
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<a data-role="button" id="change-page">Change Page</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
album-search-results.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
</head>
<body>
<div data-role="page" data-theme="d" id="SearchResults">
<div data-role = "header">
<h1>Aggregator</h1>
</div>
<div data-role = "content">
</div>
<script>
$(document).on("pageshow","#SearchResults",function(event, ui){
console.log(ui.prevPage);
});
</script>
</div>
</body>
</html>