Jquery - $.mobile.changePage is not working - javascript

I am trying to change pages on in my project. I have two divs containing information and they each have a data-role of "page". In addition, they both have ids. On my js file I have a simple onclick event that calls a function that then uses the
$.mobile.changePage("#2");
To go from my first div to my second div. The only problem is whenever I try to change the page I am getting an error:
Uncaught TypeError: Cannot read property 'changePage' of undefined
I have already searched on other peoples posts on stack overflow and haven't found anything that can help me. Here is some of my code:
global.html
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<script src="js/lib/jquery-2.1.4.js"></script>
<link rel="stylesheet" type="text/css" href="css/lib/jquery.mobile-
1.4.5.css">
<script src="js/global.js"></script>
<script src="js/lib/jquery.mobile-1.4.5.js"></script>
<script src="js/p5.min.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js">
</script>
</head>
<body>
<div data-role="page" id="1" style="background-color: #56f0b1;">
<button id ="startGame" type="button">Start Game</button>
</div>
<div data-role="page" id="2" style="background-color: #56f0b1;">
<h2>Page 2 </h2>
</div>
</body>
</html>
global.js
$(document).ready(function () {
$("#startGame").on("click",getToNextPage);
});
function getToNextPage(){
$.mobile.changePage("#2");
}

As mentioned in comments, the core jQuery library must be loaded before jQuery Mobile.
In your code, it seems you're loading two jQuery versions and one of them is loaded after jQuery Mobile.
Also, according to comments in this question, the page IDs should not be only numeric.
Here's an example:
$(document).ready(function() {
$("#startGame").on("click", getToNextPage);
});
function getToNextPage() {
$.mobile.changePage("#page2");
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page" id="page1" style="background-color: #56f0b1;">
<button id="startGame" type="button">Start Game</button>
</div>
<div data-role="page" id="page2" style="background-color: #56f0b1;">
<h2>Page 2 </h2>
</div>

Related

JQuery/Javascript not properly loading a div?

PHP Version 7.0
JQuery Version 3.1.0
You can see that the everything above the code is simply copied and pasted every five seconds rather than refreshing.
The intention is to refresh the include every five seconds.
Website: http://ssmsportal.cf/pages/incomingCalls.php
Code:
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>ServerSide Moderation Services</title>
<link rel="stylesheet" href="../styles/tablesStyles.css" type="text/css" />
<link rel="stylesheet" href="../styles/incomingCallsStyle.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script>
<script src="../scripts/general.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Whats Up?</title>
</head>
<body class="body">
<?php include '../includes/header.php'; ?>
<div class="mainContent">
<div class="logRegArea">
<article class="callsContent" style='padding-left: 0px; padding-right: 0px;'>
<header>
<h2 class="loginArea" style="text-align:center">Incoming Calls:</h2>
</header>
<content>
<div id="login">
<?php include '../includes/incomingCalls.php'; ?>
</div>
<script src="../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
setInterval(function () {
$('#login').load('../includes/incomingCalls.php')
}, 5000);
});
</script>
</content>
</article>
</div>
</div>
<footer class="mainFooter">
<p>This website was developed by ROBLOX user: wattleman</p>
</footer>
</body>
</html>
That's the normal behavior of the load function.
You should instead try:
$.get("../includes/incomingCalls.php", function(data) {
$("#login").html(data);
});

Javascript is ignoring the CSS inside its <div>

I have a page that is using JavaScript to play mp3 files. The script has its own CSS which controls the look of that specific code. I have another CSS file that controls the look of the overall page. I need this script to fall in my container <div> to keep my pages looking consistent. The script's CSS is correctly altering the JavaScript and the global CSS is also impacting the overall page. The only problem is that the script code ignores the CSS which places it inside the container and content divs. Hence this script shows at the bottom when it should be inside the container before my footer.
How can I get this script to still follow the CSS from the overall page so all my pages are structured the same? When I take out the script code and just type some words, the text shows up in the correct place on the website.
HTML is something like this:
<html>
<head>
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="global.css" />
<link rel="stylesheet" type="text/css" href="plugin/css/style.css">
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="plugin/jquery-jplayer/jquery.jplayer.js"></script>
<script type="text/javascript" src="plugin/ttw-music-player-min.js"></script>
<script type="text/javascript" src="js/myplaylist.js"></script>
</head>
<body>
<div id="container">
<div id="header">
//header code
</div>
<div id="nav">
<ul>
//Navigation code
</ul>
</div>
<div id="content">
<script type="text/javascript">
$(document).ready(function(){
var description = 'Example text'
$('body').ttwMusicPlayer(myPlaylist, {
autoPlay:false,
description:description,
jPlayer:{
swfPath:'plugin/jquery-jplayer'
}
});
});
</script>
</div>
<div id="footer">
Copyright 2016
</div>
</div>
</body>
</html>
I think this is what you're looking for. Place the script tag somewhere other than the content (end of the file is usually good... or in a separate file... your choice) and attach the music player to the #content div:
<head>
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="global.css" />
<link rel="stylesheet" type="text/css" href="plugin/css/style.css">
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="plugin/jquery-jplayer/jquery.jplayer.js"></script>
<script type="text/javascript" src="plugin/ttw-music-player-min.js"></script>
<script type="text/javascript" src="js/myplaylist.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<!-- header code -->
</div>
<div id="nav">
<ul>
<!-- Navigation code -->
</ul>
</div>
<div id="content">
<!-- content goes here -->
</div>
<div id="footer">
Copyright 2016
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var description = 'Example text'
$('#content').ttwMusicPlayer(myPlaylist, {
autoPlay: false,
description: description,
jPlayer: {
swfPath: 'plugin/jquery-jplayer'
}
});
});
</script>
</body>

Protractor failing with 'angular never provided resumeBootstrap'

For some reason, protractor is throwing the error angular never provided resumeBootstrap when navigating to the page using browser.get(). I tried switching data-ng-app to ng-app but that didn't help.
Full Error
Error: Angular could not be found on the page chrome-extension://anmdjkcbefbfgijkigepfecgojdnaida/control.html : angular never provided resumeBootstrap
spec
var driver = browser.driver;
describe('Chrome Extension Control Page', function () {
it('Should be defined', function () {
browser.get('chrome-extension://anmdjkcbefbfgijkigepfecgojdnaida/control.html');
expect(driver.getTitle()).toEqual("Control Page");
expect(driver.executeScript(function () {
return typeof window !== "undefined";
})).toBeTruthy();
element(by.css('input')).click();
});
});
html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Control Page</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-switch.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-theme.css">
<link rel="stylesheet" href="assets/css/navbar.css">
<link rel="stylesheet" href="assets/css/popup.css">
<script src="assets/js/lib/jquery.min.js"></script>
<script src="assets/js/lib/angular.min.js"></script>
<script src="assets/js/lib/bootstrap.min.js"></script>
<script src="assets/js/lib/ui-bootstrap-tpls.min.js"></script>
<script src="assets/js/lib/angular-bootstrap-switch.min.js"></script>
<script src="assets/js/lib/bootstrap-switch.min.js"></script>
<script src="assets/modules/translate-filter.js"></script>
<script src="assets/modules/review-box.js"></script>
<script src="assets/modules/enable-switch.js"></script>
<script src="assets/modules/navbar.js"></script>
<script src="assets/modules/extension-interface.js"></script>
<script src="assets/modules/status-monitor.js"></script>
<script src="assets/modules/state-monitor.js"></script>
<script src="assets/js/control-ui.js"></script>
</head>
<body data-ng-app="controlPage">
<div ng-controller="ControlPageCtrl">
<extension-navbar></extension-navbar>
<div class="">
<div class="jumbotron" style="background-color: transparent; margin-bottom: 0">
<status-monitor-area></status-monitor-area>
<hr>
<div>
<div class="row">
<div class="col-xs-8">
<state-message></state-message>
</div>
<div class="col-xs-4">
<enable-switch></enable-switch>
</div>
</div>
<state-progress-bar></state-progress-bar>
</div>
<state-information-box></state-information-box>
</div>
</div>
</div>
</body>
</html>
EDIT: This did not fix the problem. I have no idea why protractor isn't working.
Weird fix. It worked after I upgraded to the latest version of Angular.
I didn't consider it because the upgrade available was from v1.3.15 to v1.3.16. Seriously weird stuff, Angular.

Reference Issue: Can't find variable on iOS but only on heroku

This is for a Backbone + Marionette app.
Here's the offending code.
<script type="text/javascript">
//<![CDATA[
Gameq.start({
currentUser: gon.current_user,
env: gon.environment,
signed_in: gon.signed_in,
userSession: gon.user_session
});
//]]>
</script>
Here's the whole document.
<!DOCTYPE html>
<html>
<head>
<title>Gameq</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
//<![CDATA[
window.gon = {};gon.environment="production";gon.signed_in=true;gon.current_user={"created_at":"2013-11-21T23:53:28Z","email":"mikeborg85#gmail.com","id":1,"name":null,"provider":null,"uid":null,"updated_at":"2013-11-28T22:42:42Z"};gon.user_session={};
//]]>
</script>
<link href="/assets/application-66c0c36aa2fa6c5e2193b02c1ab6534b.css" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/overrides-5e3c108b1b6688f22c03c69f670b1925.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/application-86895940b8f231c1d77366a2444fecc5.js" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="bk8ryvwdGqulNZ5Utfu5Q4L3vJ9AjWzYnGgj/H9tMOw=" name="csrf-token" />
</head>
<div id="wrap">
<div id="global-nav-region" class="navbar"></div>
<div id="main-region"></div>
</div>
<div id="footer">
<div class="bottom-menu">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<ul class="bottom-links">
<li>Privacy</li>
<li>Terms</li>
<li>Support</li>
</ul>
</div>
<div class="col-md-2">
<ul class="bottom-icons">
<li><a class="fui-facebook" href="https://www.facebook.com/gameqme"></a></li>
<li><a class="fui-twitter" href="#fakelink"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
//<![CDATA[
Gameq.start({
currentUser: gon.current_user,
env: gon.environment,
signed_in: gon.signed_in,
userSession: gon.user_session
});
//]]>
</script>
</html>
When I use any desktop browser it works, but when I test in iOS I get a "Reference Issue Can't Find Variable Gameq" error. It works fine in iOS when its hosted on localhost but not when its on heroku.
Why would Heroku cause this problem?
EDIT:
I've tried wrapping the offending code in document ready functions.
It turns out the problem was indeed only with mobile browsers. Moving the following code into app/assets/javascripts/application.js within the rails application fixed the problem.
Gameq.start({
currentUser: gon.current_user,
env: gon.environment,
signed_in: gon.signed_in,
userSession: gon.user_session
});
I can't really explain what is different about loading within mobile devices that causes this error.

Bootstrap 3.0 With Jquery 2.0.3 Tooltip not working any idea why?

Code as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My God Man Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href="/Content/bootstrap/bootstrap.css" rel="stylesheet"/>
<link href="/Content/bootstrap/bootstrap-responsive.css" rel="stylesheet"/>
<link href="/Content/fontawesome/font-awesome.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="/Content/IE9FixScripts"></script>
;
<![endif]-->
</head>
<body>
<div id="wrap">
<div class="container">
<!-- Main content any sections which need to be filld in and then body -->
<div class="container">
<div class="jumbotron">
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h3>Home Page.</h3>
<h4> Welcome GodMan, if you click on the above link where it says [Needs Role] and if it works then you are good else you see a custom 401 message.</h4>
</hgroup>
</div>
</section>
<!-- footer section here needs customisation.-->
<div id="footer">
<footer>
<div class="row">
<div class="col-lg-12">
<ul class="list-unstyled">
<li class="pull-right">Back to top</li>
<li><a id="testingID" href="#"data-placement="left" data-toggle="tooltip" class="btn btn-default" type="button" data-original-title="Tooltip on left">Tool Tip Left</a></li>
<li>Tool Tip Right</li>
<li>Tool Tip Bottom</li>
<li>Tool Tip Top</li>
<li>PopOver</li>
<li>PopOver2</li>
</ul>
</div>
</div>
</footer>
</div>
<!-- footer ends-->
</div>
</div>
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script type="text/javascript">
$.ready(function () {
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover({trigger: "hover"});
$('#testingID').tooltip('show');
//$().tooltip({
// selector: "[data-toggle=tooltip]",
// container: "body"
//})
});
</script>
</body>
</html>
Looked at the other link which [https://stackoverflow.com/questions/18410922/bootstrap-3-0-popovers-and-tooltips]
did what it says but ain't working.
what is the mistake what i am making.
am i forgetting to add a reference to something?
or my JQuery verion is not good should i go back?
Tried the fiddler example with JQ 2.X edge on the example above mentioned in post. and it works there.
but not for me. Strange. it may be some thing really small. but cant seem to get it.
Any help is appreciated.
I made a JS fiddle based on your code which can be found here - http://jsfiddle.net/w2gTy/
For the jQuery dependency I used 2.0.2, hopefully that isn't the difference. That said, you were missing 'document' in your $.ready declaration. Without it the tooltips never appeared.
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover({trigger: "hover"});
$('#testingID').tooltip('show');
//$().tooltip({
// selector: "[data-toggle=tooltip]",
// container: "body"
//})
});
That said, you could also even omit the $(document).ready() section and leave just the .tooltip initializers and that would work as well.

Categories

Resources