I have a very simple html index page and a very simple html header page.
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- page -->
<div data-role="page" id='page'>
<!-- header -->
<div data-role="header" id="header">
</div>
<script>
$('#header').load('header.html');
</script>
</div>
</body>
</html>
header.html
<h1>test</h1>
I am trying to load the header file into the index files header but I am having issues applying the JQM classes to the header.
I have tried various methods including:
$('#header').load('header.html').trigger('create'); <!-- depreciated -->
$('#header').load('header.html').trigger('pagecreate'); <!-- depreciated -->
$('#header').load('header.html');
$('#page').trigger('pagecreate'); <!-- depreciated -->
$('#header').load('header.html', function () {
$.mobile.pageContainer.pagecontainer("getActivePage").enhanceWithin();
});
I am having no luck getting this to work properly. Could somebody point me in the right direction, preferably not using .trigger()
Am I loading the script in the right spot? would it be better to load it in the head, inside the header div or at the end of the page?
thank you
With regards to <h1>test</h1>, I believe that has to be more like:
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<style type='text/css'>
#import 'test.css';
</style>
</head>
<body>
<h1 id='test'>test</h1>
</body>
</html>
To prevent any script from being executed on that page above, although I'm not using any in my example, you do this also:
$('#header').load('test.html #test');
I am not sure if you are still looking for an answer but this worked for me.
$.get('header.html').success(function(html){
$(html).appendTo($('#header')).enhanceWithin();
});
Related
I am attempting to load content from a div on one page of my site to another page on my site on page-load.
The following (example) code seems to achieve that effectively.
However... how would I also include all of the CSS associated with the content?
Any help would be greatly appreciated.
SOURCE PAGE
<!DOCTYPE html>
<html>
<head lang="en">
<link rel="stylesheet" href="exampleStylesheet.css">
</head>
<body>
<div>SOURCE CONTENT HERE</div>
</body>
</html>
LANDING PAGE
<!DOCTYPE html>
<html>
<head lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div id="loadedContent"></div>
<script>
$('#loadedContent').load("contentToLoad.html"); <!-- loads other page's content -->
</script>
</body>
</html>
EXAMPLE CSS
body {
margin: 0;
background-color: blue;
}
I am new to Vue.js and I am simply trying to load script tags to the page, like jQuery for example. I tried adding the scripts to the end of the body in the index.html file, but they come back as 404s.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<div id="app"></div>
<!-- JQUERY -->
<script src="assets/js/jquery-2.1.4.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/tipr.min.js"></script>
</body>
</html>
Try moving them to the /static/ folder &/or prefixing the paths with ./ or /
I have two simple html files which has a link in body and a log in JavaScript. In A.html, it is a link to jump to B.html and a console.log("a 123"); in JavaScript. However, the "a 123" message will only be showed when refresh the browser but not be executed from a link. For example, if i click the link Go to a in b.html, the message "a 123" will not be showed.
Any idea?
-----A.html-------
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
</style>
</head>
<body>
<div data-role="page" id="a">
<div data-role="main" class="ui-content">
<a href='b.html'>Go to b</a>
</div>
</div>
<script>
console.log("a 123");
</script>
</body>
</html>
-----B.html-------
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
</style>
</head>
<body>
<div data-role="page" id="b">
<div data-role="main" class="ui-content">
<a href='a.html'>Go to a</a>
</div>
</div>
<script>
console.log("b 123");
</script>
</body>
</html>
Bit of searching and I found the answer! Apparently it's a 'feature' of Jquery Mobile. It's using an Ajax navigation system. So it stays singlepage.
From the docs:
jQuery Mobile includes a navigation system to load pages into the DOM via Ajax, enhance the new content, then display pages with a rich set of animated transitions. The navigation system uses progressive enhancement to automatically 'hijack' standard links and form submissions and route them as an Ajax request.
Maybe it's a good idea to read the intro of jQuery mobile: http://demos.jquerymobile.com/1.4.5/intro/
That's because the code your code only executes on the page load. If you want it to execute on an event, you need to wrap it in a function and call the function in the onclick attribute on your link.
I've created a header.html and footer.html file and placed the jquery code (shown below) in the head of my index page. Works like a charm. But when I place this code on other web pages everything works - except my DreamWeaver Spry Menu Bar doesn't function correctly (shown below I changed to "../header.html" and "../footer.html" since other web pages are in folders). Any suggestions?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Services</title>
<style type="text/css">
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../css/styles.css" rel="stylesheet" type="text/css">
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$("#header").load("../header.html");
$("#footer").load("../footer.html");
});
</script>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="hero"> </div>
<div id="content">Content for id "content" Goes Here</div>
<div id="footer"></div>
</div>
</body>
</html>
I am trying to experiment with jQuery mobile, but can't seem to get started.
I have the following HMTL file hosted on a local server:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
</body>
</html>
Which is causing
Javascript error: undefined SECUIRTY_ERR: DOM Exception 18
when accessed from my iPhone from http://192.168.1.1:8000/mobile.html
Did you link the CSS stylesheet file as well before the jquery script include tags?
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
Also, in order for the page to show, you must contain content into containers like this:
<body>
<div data-role='page'>
<div data-role='header'>
Header goes here
</div>
<div data-role='content'>
Content goes here
</div>
</div>
</body>