I'm studying jQuery mobile but I could not figure out why this code does not work at my script "tap". I have already seen a lot of time and I'm referring the code from jQuery. https://api.jquerymobile.com/tap/
The code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
</head>
<body>
<script>
$("#dsa").bind("tap",qq);
function qq(event){
$(event.target).css("background-color","#F0F");
}
</script>
<div data-role="page" data-title="Tableau測試" data-theme="b">
<div data-role="header">
<p>從下方選單選擇一個想看的東西</P>
</div>
<div data-role="content">
<ol data-role="listview">
<li>20180615-0001</li>
<li>test</li>
<div><p id="dsa" style="background-color:#0F6">fnhdjiahgdifsaghui</p></div>
</ol>
</div>
<div data-role="footer" id="foo">
<p></P>
</div>
</div>
</body>
In the link you say you are referring, note the $(function(){...}); notation you have omitted. It makes your functions when the document is ready. So, add it in script as follows:
$(function(){
$("#dsa").bind("tap",qq);
function qq(event){
$(event.target).css("background-color","#F0F");
}
});
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
</head>
<body onload='init()'>
<div data-role="page" data-title="Tableau測試" data-theme="b">
<div data-role="header">
<p>從下方選單選擇一個想看的東西</P>
</div>
<div data-role="content">
<ol data-role="listview">
<li>20180615-0001</li>
<li>test</li>
<div><p id="dsa" style="background-color:#0F6">fnhdjiahgdifsaghui</p></div>
</ol>
</div>
<div data-role="footer" id="foo">
<p></P>
</div>
</div>
</body>
Related
I am trying to load an external file within my HTML, but nothing happens.
My HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Double Navigation Bar</title>
<link rel="stylesheet" href="Mainpage.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src= "mainp.js"></script>
</head>
<body>
<div class="nav1" id="nav1">
<ul>
<li>School History</li>
<li>School Times</li>
<li>School Fees</li>
<li>Why?</li>
</ul>
</div>
<div id="article" class="article"></div>
<div class="aside">Aside</div>
<div class="footer">
<p>Contact Number: • Email Address: </p>
</div>
</div>
</body>
</html>
My js File
$(document).ready(function(){
$("reason").click(function(){
$("#article").load("Reason.html");
});
});
This is the external file I'm trying to run. Reason.html
<H1>Reasons Page</H1>
I have the following:
<body id="body">
<div data-role="header" id="header">
<div data-role="navbar" id="navbar">
<ul>
<li><a class="ui-state-persist ui-btn-active" data-ajax="true" href="#pagex">Ouch</a></li>
<li><a class="ui-state-persist " data-ajax="true" href="#pagey">Wow</a></li>
</ul>
</div>
</div>
<div data-role="page" id="pagex">
</div>
<div data-role="page" id="pagey">
</div>
</body>
Note the toolbar is external. So to make the current page active I have the following javascript:
$(document).on('pageshow',function(event,ui){
// disable previous selected links
$('[data-role=navbar] a').removeClass("ui-btn-active");
var menuLink = $('[data-role=navbar] a[href="#'+$.mobile.activePage.attr('id')+'"]');
menuLink.addClass("ui-btn-active");
});
Unfortunately, it still doesn't work. The menu item will highlight briefly and then go back to normal.
Following the demo here: Updating toolbar contents
you just need to put your code inside the pagecontainerchangeevent, as follows:
$(document).ready(function() {
$("#navbar").navbar();
$("#header").toolbar();
});
$( document ).on( "pagecontainerchange", function(e, ui) {
$("#navbar ui-btn-active").removeClass("ui-btn-active");
var toPage = "#"+$(ui.toPage).attr("id");
$("#navbar a[href="+toPage+"]").addClass("ui-btn-active");
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="header" data-theme="a" id="header">
<div data-role="navbar" data-theme="a" id="navbar">
<ul>
<li><a class="ui-state-persist ui-btn-active" href="#pagex">Ouch</a></li>
<li><a class="ui-state-persist" href="#pagey">Wow</a></li>
</ul>
</div>
</div>
<div id="pagex" data-role="page">
<div role="main" class="ui-content">
Page x
</div>
</div>
<div id="pagey" data-role="page">
<div role="main" class="ui-content">
Page y
</div>
</div>
</body>
</html>
I'm using AOS plugin, and once I run the plugin on localhost it fails to appear, but if I run it on codepen it runs perfectly.
I have the same code as it appears in codepen and I've used AOS.init inside a <script> tag to run it.
Also I have CDN stylesheet and script in my code.
<html>
<head>
<title>What To Eat - Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="javascript/script.js"></script>
<script>
AOS.init({
duration: 1200,
})
</script>
</head>
<body>
<div class="item" data-aos="fade-up">1</div>
<div class="item" data-aos="fade-down">2</div>
<div class="item" data-aos="fade-right">3</div>
<div class="item" data-aos="fade-left">4</div>
<div class="item" data-aos="zoom-in">5</div>
<div class="item" data-aos="zoom-out">6</div>
<div class="item" data-aos="slide-up">7</div>
<div class="item" data-aos="flip-up">8</div>
<div class="item" data-aos="flip-down">9</div>
<div class="item" data-aos="flip-right">10</div>
<div class="item" data-aos="flip-left">11</div>
</body>
</html>
And CSS is the same as you can see in codepen.
I believe the browser version (Chrome - latest version) isn't the problem since I able to see the result in CodePen good enough.
How can I run this plugin in my localhost?
You need to call your script after the page is rendered, this will allow to bind the events to your elements after being created:
<html>
<head>
<title>What To Eat - Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="javascript/script.js"></script>
</head>
<body>
<div class="item" data-aos="fade-up">1</div>
<div class="item" data-aos="fade-down">2</div>
<div class="item" data-aos="fade-right">3</div>
<div class="item" data-aos="fade-left">4</div>
<div class="item" data-aos="zoom-in">5</div>
<div class="item" data-aos="zoom-out">6</div>
<div class="item" data-aos="slide-up">7</div>
<div class="item" data-aos="flip-up">8</div>
<div class="item" data-aos="flip-down">9</div>
<div class="item" data-aos="flip-right">10</div>
<div class="item" data-aos="flip-left">11</div>
</body>
</html>
<script>
AOS.init({
duration: 1200,
})
</script>
I´m developing a web app using JQuery Mobile (ver 1.3.0). If a have only one HTML file, I can bind the "pageshow" event to the page div:
<!DOCTYPE HTML>
<html>
<head>
<title>Funil de Vendas</title>
<meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="lib/jquery-1.8.2.min.js"></script>
<script src="lib/jquery.mobile-1.3.0.min.js"></script>
<script>
var nice = false;
$(document).ready( function(){
$("#other_page").bind('pageshow',function() {
alert('The page was called!');
});
});
</script>
</head>
<body>
<div data-role="page" class="Page" id="home_page">
<div data-role="content">
<a data-role="button" href="#other_page" data-inline="true" style="width:300px;">Iniciar</a>
</div>
</div>
</div>
<div data-role="page" class="Page" id="other_page">
<div data-role="content">
...
</div>
...
...
...
</div>
</body></html>
How can I do the same using multiples HTML files. I cannot bind to the page the because this div is in another HTML file.
<div data-role="page" class="Page" id="home_page">
<div data-role="content">
<a data-role="button" href="other_page.html" data-inline="true" style="width:300px;">Iniciar</a>
</div>
</div>
Thanks in advance!
There are 2 possible ways here:
First solution. In case you are using multiple HTML files and all of them are loaded with an ajax (this is a standard jQuery Mobile way of page loading). In this case all of javascript must be loaded into the first html file, because jQM will load only BODY content of other html files.
Example :
index.html :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<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('pagebeforeshow', '#index', function(){
alert('This is a first page!');
});
$(document).on('pagebeforeshow', '#second', function(){
alert('This is a second page!');
});
</script>
</head>
<body>
<div data-role="page" id="index" data-theme="b">
<div data-role="header" data-theme="a">
<h3>First page</h3>
</div>
<div data-role="content">
<a data-role="button" id="some-btn" href="second.html">Open next page</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
second.html :
<div data-role="page" id="second" data-theme="b">
<div data-role="header" data-theme="a">
<h3>Second page</h3>
</div>
<div data-role="content">
This is a second page
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
Second solution. In case you have multiple HTML files but all your pages are linked wit links having rel="external" attribute or ajax is turned of on app level. In this case every html page must have its own HEAD and BODY. And every page must have it own javascript.
Example :
index.html :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<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('pagebeforeshow', '#index', function(){
alert('This is a first page!');
});
</script>
</head>
<body>
<div data-role="page" id="index" data-theme="b">
<div data-role="header" data-theme="a">
<h3>First page</h3>
</div>
<div data-role="content">
<a data-role="button" id="some-btn" href="second.html" rel="external">Open next page</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
second.html :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<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('pagebeforeshow', '#second', function(){
alert('This is a second page!');
});
</script>
</head>
<body>
<div data-role="page" id="second" data-theme="b">
<div data-role="header" data-theme="a">
<h3>Second page</h3>
</div>
<div data-role="content">
This is a second page
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
I'm working with jQuery Mobile pop ups and for some reason when I load the page one or more of the pop ups is not hidden. I have tried closing the pop ups on page init but this does not seem to work. Can anyone explain what is causing this.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pop Up</title>
<link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css"
/>
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/_assets/css/jqm-docs.css"
/>
<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css"
rel="stylesheet" />
<link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css"
rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0/docs/_assets/js/jqm-docs.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0/js/jquery.mobile-1.2.0.js"></script>
</head>
<script>
$(document).bind("pageinit", function () {
$('#popup1').popup('close');
$('#popup2').popup('close');
});
</script>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f" data-position="fixed">
<div class="ui-grid-a" style="margin:15px 0px">
<div class="ui-block-a">
Pop 1
</div>
<div class="ui-block-b">
Pop 2
</div>
</div>
<!--grid-->
</div>
<!-- /header -->
<div data-role="content">
<div data-role="popup" id="popup1" data-theme="a">
<ul data-role="listview" id="cityList" data-inset="true" style="min-width:210px;"
data-theme="b">
<li name='test value' value="us">11</li>
<li name='test value' value="us">12</li>
<li name='test value' value="us">13</li>
<li name='test value' value="us">14</li>
</ul>
</div>
<div data-role="popup" id="popup2" data-theme="a">
<ul data-role="listview" id="genreList" data-inset="true" style="min-width:210px;"
data-theme="b">
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
</ul>
</div>
<div class="content-primary"></div>
<!--content-primary-->
</div>
<!--content-->
<div data-role="footer" class="footer-docs" data-theme="c" data-position="fixed"></div>
<!--footer-->
</div>
<!-- /page -->
</body>
The Inclusion of the following external libraries fixed the problem:
<link rel="stylesheet" href="http://jquerymobile.com/demos/1.2.0-alpha.1/css/themes/default/jquery.mobile-1.2.0-alpha.1.css" />
<link rel="stylesheet" href="http://jquerymobile.com/demos/1.2.0-alpha.1/docs/_assets/css/jqm-docs.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0-alpha.1/docs/_assets/js/jqm-docs.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0-alpha.1/js/jquery.mobile-1.2.0-alpha.1.js"></script>
I had similar issue and got it solved by initiating the popup after document ready.
$(document).ready(function(){
$( "#popupDialog" ).popup();
});