My goal is to have the method onClickLogin called when I press the submit button in a form. But only the method initialize (for loginPageController) is called. This code works fine, when every methods is in app object, but when I add loginPageController script has stopped working properly. How do I fix that?
I have this HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" href="css/jquery.mobile-1.4.0.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.mobile-1.4.0.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="js/index.js"></script>
<title>Example</title>
</head>
<body>
<!-- Start of login page -->
<div data-role="page" id="login-page">
<!-- Start of page header -->
<div data-role="header" style="overflow: hidden;">
<h1>Login</h1>
</div>
<!-- /header -->
<!-- Start of page content -->
<div role="main" class="ui-content">
<form id="login-form">
<label for="login-username" class="ui-hidden-accessible">User Name</label>
<input name="login-username" id="login-username" placeholder="User Name" value="" type="text">
<label for="login-password" class="ui-hidden-accessible">Password</label>
<input name="login-password" id="login-password" placeholder="Password" value="" type="password">
<div class="ui-grid-a">
<div class="ui-block-a"></div>
<div class="ui-block-b">
<button type="submit" name="login-submit" value="login-submit">Login</button>
</div>
</div>
</form>
</div>
<!-- /content -->
</div>
<!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="bar">
<!-- Start of page content -->
<div role="main" class="ui-content">
<p>I'm the second in the source order so I'm hidden when the page
loads. I'm just shown if a link that references my id is beeing
clicked.</p>
<p>
Back to foo
</p>
</div>
<!-- /content -->
</div>
<!-- /page -->
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
And I have this JavaScript:
var app = {
initialize: function() {
console.log("app.initialize");
this.bindEvents();
},
bindEvents: function() {
console.log("app.bindEvents");
$(document).on("pageinit", "#login-page", loginPageController.initialize);
}
};
var loginPageController = {
initialize: function() {
console.log("loginPageController.initialize");
$("#login-form").on("submit", this.onClickLogin);
},
onClickLogin: function() {
console.log("loginPageController.onClickLogin");
}
};
See this working fiddle: http://jsfiddle.net/THWZU/7/
1: jQuery Mobile needs to initialize itself first.
Your code is not being run in the proper order. It needs to be run after jQuery and jQuery Mobile do all their own initialization. You need the entire page to load before you call your initialization.
This is all you need, for pure jQuery:
$( document ).ready( function() {
app.initialize();
});
This also works for you, with jQuery Mobile:
$( document ).on( "pagebeforeshow", function() {
app.initialize();
});
Keep these events in mind: http://api.jquerymobile.com/category/events/
Especially these:
http://api.jquerymobile.com/pagebeforecreate/
http://api.jquerymobile.com/pagebeforeshow/
2: Bind to the button itself and return false after that.
New loginPageController code:
var loginPageController = {
initialize: function() {
console.log("loginPageController.initialize");
$("[name='login-submit']").on("click", this.onClickLogin);
},
onClickLogin: function() {
console.log("loginPageController.onClickLogin");
return false
}
};
See this working fiddle: http://jsfiddle.net/THWZU/7/
Related
I'm trying to use jQuery Mobile for desktop. I am building a social networking service and I want to use a left and right panel for each groups and message usage.
What I want is the side panel to appear when I hover over it's respective header bar button, like the sidebar in Google+.
Here is my code:
jsFiddle
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<!--jqm cdn-->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
<!--groups panel-->
<div data-role="panel" id="groups-panel" data-position="left" data-display="overlay">
LPS
</div>
<!--friends panel-->
<div data-role="panel" id="friends-panel" data-position="right" data-display="overlay">
LPS
</div>
<div data-role="header" data-theme="b">
Groups
<h1>My Title</h1>
Friends
</div><!-- /header -->
<div data-role="content">
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
How can I do that? Any help is appreciated.
add this code to your page
$('#groups-panel').mouseleave(function () {
$(this).panel("close");
});
$("#groups-button").hover(function () {
$('#groups-panel').panel("open");
});
$('#friends-panel').mouseleave(function () {
$(this).panel("close");
});
$("#friends-button").hover(function () {
$('#groups-panel').panel("open");
});
Fiddle
I am having trouble getting jQuery-mobile load page to load my next page into the "content" div.
I have cut my page down to the basics and here is the code.
index.html:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JQuery Mobile Load Page Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div id="containerTest" data-role="content">
<input type="button" id="nextPage" data-inline="true" value="Load Second Page"/>
</div> <!-- /content -->
</div> <!-- /page -->
<script>
$( "#nextPage" ).on( "click", function()
{
$.mobile.loadPage("nextPage.html",
{
pageContainer: $('#containerTest')
});
});
</script>
</body>
</html>
and nextPage.html
<div data-role="page">
<p>this is the next page</p>
</div> <!-- /page -->
I don't think You can load a page inside another page, you could try something like this though:
$(document).on('pageinit', function(){
$( "#nextPage" ).on( "click", function(){
$('#containerTest').load('nextPage.html [data-role="content"]',function(){
$('.ui-page-active').trigger('create');
});
});
});
This will load the content (<div data-role="content">) from page 2 inside the container, then it will trigger the create event on the original page to enhance the loaded content
I have a two page application, that I need to show some results.
The fist page
<div data-role="content">
<!-- content -->
<form>
<label for="search-1">Search:</label>
<input name="search-1" id="search-1" value="" type="search">
</form>
has a form with input type search. How can I take the value of this search input, and pass it to a second jQuery Mobile page in a separate html file, so I can using the value fetch data using web-service and using a list to represent the data.
Second page
<div data-role="content" id="content">
<ul data-role="listview" data-inset="true" id="bookListThumbs">
//data to be added here....
</ul>
</div><!-- /content -->
Solution
It is possible to send a parameter/s from one page to another during page transition. It can be done like this:
You can pass values with changePage:
$.mobile.changePage('page2.html', { dataUrl : "page2.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : true, changeHash : true });
And read them like this:
$(document).on('pagebeforeshow', "#index", function (event, data) {
var parameters = $(this).data("url").split("?")[1];;
parameter = parameters.replace("parameter=","");
alert(parameter);
});
Example:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>
</title>
<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 () {
$(document).on('click', "#changePage",function () {
if($('#search-1').val().length > 0){
$.mobile.changePage('second.html', { dataUrl : "second.html", data : { 'input' : $('#search-1').val()}, reloadPage : false, changeHash : true });
} else {
alert('Search input is empty!');
}
});
});
$(document).on('pageshow', "#second",function () {
var parameters = $(this).data("url").split("?")[1];;
parameter = parameters.replace("input=","");
alert(parameter);
});
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="index">
<div data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content">
<form>
<label for="search-1">Search:</label>
<input name="search-1" id="search-1" value="" type="search">
<a data-role="button" id="changePage">Send data to other page</a>
</form>
</div> <!--content-->
</div><!--page-->
</body>
</html>
second.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>
</title>
<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>
</head>
<body>
<!-- Home -->
<div data-role="page" id="second">
<div data-role="header">
<h3>
Second Page
</h3>
</div>
<div data-role="content">
</div> <!--content-->
</div><!--page-->
</body>
</html>
I've made a small page that just has this as the HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>hi</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<link type="text/css" href="js/jquery-ui-1.9.1.custom/css/black-tie/jquery-ui-1.9.1.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-ui-1.9.1.custom/js/jquery-ui-1.9.1.custom.js"></script>
<link type="text/css" href="css/main.css" rel="Stylesheet" />
<script src="js/main.js"></script>
<script>
$(main());
/* or $(document).ready(main()); */
</script>
</head>
<body>
<div id="loginDiv" class="popupDiv">
<div id="usernameDiv">
<label for="username">username</label>
<input type="text" id="username"/>
</div>
<div id="passwordDiv">
<label for="password">Password</label>
<input type="password" id="password"/>
</div>
</div>
<div id="introDiv">
<div class="headerDiv">
<button id="loginButton">Login</button>
</div>
</div>
</body>
</html>
And then I have my main.js:
function main()
{
var $loginButton = $('#loginButton');
var $loginDiv = $('#loginDiv');
$loginDiv.dialog({ autoOpen: false });
$loginButton.click(function() {
$loginDiv.dialog("open");
//alert('sfsdf');
});
}
I can trigger alerts, but selectors will not return any elements if the .ready() handler is specified in the head.
I have tried moving it to the end of the body tag and everything works fine. According to the JQuery docs, the entire DOM and all images and resources are supposed to be loaded before the handler gets called. What gives?
Firefox 16.0.2 on Linux x86
JQuery 1.8.2
JQuery UI 1.9.2 (not really used for the purposes here)
Because you are calling your function!
$(main()); <--() means run it
You want to assign a reference to it
$(main); <-- no ()!
I have a JQuery Mobile application and I seem to have several locations in the app where the JavaScript doesn't execute as expected. In short, I have a "Dashboard" page. If the user hasn't logged in, I use the "changePage" function to send them back to the Login page.
If I attempt to login directly via the Login page, everything works as expected. However, if I am redirected to the Login page from the Dashboard page, I see a JavaScript error that says: "loginButton_Click is not defined". To provide more insight, here is my code:
Dashboard.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/scripts/shared.js"></script>
<script src="/scripts/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="dashboardPage" data-role="page">
<div data-role="header">
<a id="logoutButton" href="#" class="ui-btn-left jqm-home">Logout</a>
<h1>My App</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider"><span id="greeting"></span></li>
</ul><br />
</div>
</div>
</body>
</html>
Shared.js
$("#dashboardPage").live("pagecreate", function () {
});
$("#dashboardPage").live("pagebeforeshow", function () {
});
$("#dashboardPage").live("pageshow", function () {
var user = window.localStorage.getItem("user");
if (user == null) {
$.mobile.changePage("/login.html", { transition: "slide" });
}
});
login.html
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/scripts/shared.js"></script>
<script src="/scripts/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="loginPage" data-role="page">
<div data-role="header"><h1>App Name</h1></div>
<div data-role="content">
<label for="usernameTextBox">Username</label>
<input id="usernameTextBox" type="text" /><br />
<label for="passwordTextBox">Password</label>
<input id="passwordTextBox" type="password" /><br />
<input type="button" value="Login" onclick="return loginButton_Click();" />
</div>
</div>
<script type="text/javascript">
function loginButton_Click() {
$.mobile.changePage("/dashboard.html", { transition: "slide" });
}
</script>
</body>
</html>
I feel like there is something that I don't understand regarding how JavaScript gets into the DOM. What am I doing wrong?
In shared.js add $(...) wrapper:
$(function(){
$("#dashboardPage").live("pagecreate", function () {
});
$("#dashboardPage").live("pagebeforeshow", function () {
});
$("#dashboardPage").live("pageshow", function () {
var user = window.localStorage.getItem("user");
if (user == null) {
$.mobile.changePage("/login.html", { transition: "slide" });
}
});
});