I have created a simple two page example, first page has a list view and the second just a <h1>, however when the second page gets loaded there are now ui styles applied to it automatically? Do I have to call something manually or is there an issue with how I've laid out the navigation? Code below any help much appreciated.
index.html
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>Page One</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="a" id="second">
<div data-role="header">
<h1 id="logo" class="ui-title">Header</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-split-theme="d">
<li class="ui-li-has-thumb">
<img class="ui-li-thumb" src="http://jquerymobile.com/demos/1.0a2/docs/lists/images/album-bb.jpg" />
<h3 class="ui-li-heading">FooBar</h3>
<p class="ui-li-desc">Progress</p>
</li>
<li class="ui-li-has-thumb">
<img class="ui-li-thumb" src="http://jquerymobile.com/demos/1.0a2/docs/lists/images/album-bb.jpg" />
<h3 class="ui-li-heading">FooBar</h3>
<p class="ui-li-desc">Progress</p>
</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar" class="ui-glyphish">
<ul>
<li><a class="ui-btn-active" id="quickfind" href="index.html" data-icon="custom">QuickFind</a></li>
<li><a id="lessons" href="lessons.html&ui-page=listview-1" data-icon="custom" data-theme="a">Lessons</a></li>
<li><a id="progress" href="#" data-icon="custom" data-theme="a">Progress</a></li>
<li><a id="favs" href="#" data-icon="custom" data-theme="a">Favs</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
second.html
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>Page Two</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1 id="logo" class="ui-title">Second</h1>
</div>
<div data-role="content">
<h1>Hello Page Two</h1>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar" class="ui-glyphish">
<ul>
<li><a class="ui-btn-active" id="quickfind" href="index.html" data-icon="custom">QuickFind</a></li>
<li><a id="lessons" href="lessons.html&ui-page=listview-1" data-icon="custom" data-theme="a">Lessons</a></li>
<li><a id="progress" href="#" data-icon="custom" data-theme="a">Progress</a></li>
<li><a id="favs" href="#" data-icon="custom" data-theme="a">Favs</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
This was actually a know bug and fixed in commit https://github.com/jquery/jquery-mobile/commit/80d56e655bac8aa6205a0c1f5a9877493a5ced71
AFAIK that's what it's designed to do: when you link to an HTML page it inserts it's body as content within and between the jQuery mobile context of a header and footer. If you want full control of the HTML you have to put rel="external" in your links otherwise they're loaded via AJAX, parsed for content and inserted dynamically.
http://jquerymobile.com/demos/1.0a2/#docs/pages/docs-pages.html
Try with
href="index.html?" instead of href="index.html"
and
href="second.html?" instead of href="second.html"
Related
I am currently working on a little project, that I cannot get to run properly.
This is my page.html, which I use as a template.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title data-template="config:app-title">App Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta data-template="config:app-meta"/>
<link rel="shortcut icon" href="$shared/resources/images/exist_icon_16x16.ico"/>
<link rel="stylesheet" type="text/css" href="$app-root/resources/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="$app-root/resources/css/style.css"/>
<script type="text/javascript" src="$app-root/resources/scripts/jquery/jquery-3.4.1.js"/>
<script type="text/javascript" src="$app-root/resources/scripts/bootstrap.min.js"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css"/>
<script type="text/javascript" href="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
</head>
<body id="body">
<div class="container">
<div class="jumbotron">
<h1>Title</h1>
<hr/>
<p>A Digital Edition</p>
</div>
<ul class="nav nav-tabs py-0 my-0" style="text-align:center;">
<li class="nav-item">
<a class="nav-link" href="./index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./around.html">Around the World</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./table.html">Content</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./methods.html">Methods?</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./aboutme.html">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./#">What else?</a>
</li>
</ul>
</div>
<div id="content" class="container"/>
<hr class="hr-style"/>
<footer style="text-align:center;">
Contact
</footer>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('.slider').slick({
setting-name: setting-value
});
});
</script>
</html>
My typical page looks a little like the following:
<div xmlns="http://www.w3.org/1999/xhtml" data-template="templates:surround" data-template-with="templates/page.html" data-template-at="content">
<head>
<title>How it is supposed to look</title>
</head>
<body>
<div class="slider">
<div data-template="app:XMLtoHTML-forAll"/>
</div>
</body>
</div>
And I cannot get any javascript to run (as an example there is slick in it, which I copied from here). All my XML which is transformed to HTML, using xslt, is correctly transformed and displayed. However, I do not get a slider but only the <div> that are created using the xslt.
This happens, no matter where I include the javascript for slick.
I've tried it in the <head> (of page.html, as well as in the specific page), in the <body> at the end, and even after </body>.
When I use exemplary <div>test-content</div> and several similar files, the same happens to them, as there obviously is no JS running, no matter where I put the script!
Any hints for that?
Here's the promised edit:
Source-Map-Fehler: Error: request failed with status 404
Ressourcen-Adresse: http://localhost:8080/exist/apps/BookOfOrders/pages/$app-root/resources/js/bootstrap.min.js
Source-Map-Adresse: bootstrap.min.js.map
Here's the second edit, mentioned in comments:
my file structure:
the errors:
and my
I have index.php, page1.php, page2.php, page3.php and I wanted to load their content in the index.php page within the div with #output but I don't want them to reload/refresh every time the navbar is clicked. Also, I want the active page has the active class in the active <li>.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php">Main</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page1.php">Page 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page2.php">Page 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page3.php">Page 3</a>
</li>
</ul>
</nav>
<br>
<div class="container-fluid" id="output">
THE CONTENT FROM ANOTHER PAGE THAT'LL LOAD HERE
</div>
</div>
</body>
</html>
Thank you
Consider this example:
HTML:
<ul class="nav nav-tabs tabs-up" id="friends">
<li> Contacts </li>
<li> Friends list</li>
<li>Awaiting request</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="contacts">
</div>
<div class="tab-pane" id="friends_list">
</div>
<div class="tab-pane urlbox span8" id="awaiting_request">
</div>
</div>
Javascript:
$('[data-toggle="tabajax"]').click(function(e) {
var $this = $(this),
loadurl = $this.attr('href'),
targ = $this.attr('data-target');
$.get(loadurl, function(data) {
$(targ).html(data);
});
$this.tab('show');
return false;
});
Live demo: http://jsfiddle.net/BoWw/77dyfbwd/
You can adjust this to what you posted.
I'm using Three iframe inside index files with 3 Tabs. I want to load or refresh the files inside the iframe when each tab is selected.
Here is my index files
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-target="#home" data-toggle="tab">Enter</a></li>
<li><a data-target="#profile" data-toggle="tab" >Display</a></li>
<li><a data-target="#messages" data-toggle="tab">Search</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<iframe src="EnterBook.php" ></iframe>
</div>
<div class="tab-pane" id="profile" >
<iframe src="DisplayBooks.php" ></iframe>
</div>
<div class="tab-pane" id="messages">
<iframe src="SearchBooks.php" ></iframe>
</div>
</div>
I did look over other solution but nothing helped.. Please anyone can have a look over it.
You need to add click event handler to every tab and in callback function get relevant iframe of clicked tab and change reset src attribute of it or use Location.reload()
document.querySelectorAll('#myTab a').forEach(function(ele){
ele.onclick = function(){
var iframe = document.querySelector(this.dataset.target+'>iframe');
iframe.src = iframe.src;
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab">
<li class="active">
<a data-target="#home" data-toggle="tab">Enter</a>
</li>
<li>
<a data-target="#profile" data-toggle="tab" >Display</a>
</li>
<li>
<a data-target="#messages" data-toggle="tab">Search</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<iframe src="https://stacksnippets.net/"></iframe>
</div>
<div class="tab-pane" id="profile">
<iframe src="https://stacksnippets.net/"></iframe>
</div>
<div class="tab-pane" id="messages">
<iframe src="https://stacksnippets.net"></iframe>
</div>
</div>
So I have been building a new website recently and experimenting a lot with jQuery.
Unfortunately I seem to be having a massive problem getting my jquery file to actually work in the website.
Here is the html code. As you can see, I have jquery added by CDN and the javascript is in a totally separate file. I added an alert into the primary function just to check if it's even reading what I have put and I am stuck.
<html>
<head>
<!--Browser Data-->
<meta charset="utf-8">
<!--Meta Data -->
<title>website</title>
<meta name="description" content="The Official Page of website">
<meta name="Keywords" content="some website stuff">
<meta name="author" content="me">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS File Locations -->
<link rel="stylesheet" href="css/main.css">
<!-- Javascript File Locations -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<!-- Fonts used -->
<link href="https://fonts.googleapis.com/css?family=Germania+One" rel="stylesheet">
</head>
<body>
<!-- A logo will go here but here is some text for now -->
<H1 ID="Logo">website</H1>
<!-- The menu bar -->
<ul class="menu" ID="Menu_Bar">
<li Class="Menu_Item" ID="Home">
<a Class="Menu_Link" href="index.html">Home</a>
</li>
<li Class="Menu_Item" ID="About_Us">
<a Class="Menu_Link" href="about.html">About Us</a>
</li>
<li Class="Menu_Item" ID="Events">
<a Class="Menu_Link" href="events.html">Events</a>
</li>
<li Class="Menu_Item" ID="Contact">
<a Class="Menu_Link" href="contact.html">Contact Us</a>
</li>
</ul>
<!-- An image of the stuff-->
<img ID="theGang" src="assets/thegang.png"/>
</body>
</html>
Here is the JQuery.
$(document).ready(function(){
$("button").click(function(){
$("#theGang").fadeIn(3000);
alert("it worked");
});
});
I'm just not sure why it's not working.
By the way the javascript file is in a sub folder called js and called main.js and the html is called index.html
Based on your comments it looks like all you needed to do was remove the event handler for the nonexistent button element. This enables the fadeIn and alert.
$(document).ready(function(){
$("#theGang").fadeIn(3000);
//alert("it worked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- A logo will go here but here is some text for now -->
<H1 ID="Logo">website</H1>
<!-- The menu bar -->
<ul class="menu" ID="Menu_Bar">
<li Class="Menu_Item" ID="Home">
<a Class="Menu_Link" href="index.html">Home</a>
</li>
<li Class="Menu_Item" ID="About_Us">
<a Class="Menu_Link" href="about.html">About Us</a>
</li>
<li Class="Menu_Item" ID="Events">
<a Class="Menu_Link" href="events.html">Events</a>
</li>
<li Class="Menu_Item" ID="Contact">
<a Class="Menu_Link" href="contact.html">Contact Us</a>
</li>
</ul>
<!-- An image of the stuff-->
<img ID="theGang" src="https://image.freepik.com/free-photo/cute-cat-picture_1122-449.jpg" style="display: none;"/>
I want to implement Navigation Drawer by using panel with list of buttons (each openning other page). Problem occurs when I go back to the previous page and I try to open panel again. Button which is supposed to do that doesn't work, it only lights up in blue.
Start
http://imgur.com/WeNactN
Open panel
http://imgur.com/492rnXN
Back in first page, button does not work
http://imgur.com/UnX7Jk4
Here's my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<div data-role="page" id="firstPage">
<div data-role="panel" id="myPanel" data-display="overlay">
<h2>Menu</h2>
<br/>
<ul data-role="listview">
<li><a href="#firstPage" data-rel="close" >First Page</a></li>
<li><a href="#secondPage" data-rel="close" >Second Page</a></li>
</ul>
</div>
<div data-role="header">
<h1>First Page</h1>
Open Panel
</div>
<div data-role="main" class="ui-content">
<p>FirstPage</p>
</div>
</div>
<div data-role="page" id="secondPage">
<div data-role="panel" id="myPanel" data-display="overlay">
<h2>Menu</h2>
<br/>
<ul data-role="listview">
<li><a href="#firstPage" data-rel="close" >First Page</a></li>
<li><a href="#secondPage" data-rel="close" >Second Page</a></li>
</ul>
</div>
<div data-role="header">
<h1>Second Page</h1>
Open Panel
</div>
<div data-role="main" class="ui-content">
<p>Second Page</p>
</div>
</body>
Any advice or suggestions will be greatly appreciated.
You have 2 panel divs with same ID id="myPanel"
changing the id of second panel should resolve the issue.