I am a Chinese!My English is bad,but I have a trouble about JQuery Mobile!I hope that
foreign friend can help me.The Question is below!
first:At the first.jsp,Click the 'General Button' is OK.but the 'Submit Button' is not OK.Why??
second:Click the 'Link Button',navigate to second.jsp,click the 'Test' button.the javascript code is not execute!
I do not know Why they happen!Can you help me!Thank you.
first.jsp
<!DOCTYPE html>
<%# page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<title>China</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="/mobile/mobile/common/script/jQuery/jquery.mobile-1.0a2.css" />
<script type="text/javascript" src="/mobile/mobile/common/script/jQuery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="/mobile/mobile/common/script/jQuery/jquery.mobile-1.0a2.js"></script>
<script>
$(function(){
$('#Button').click(function(){
alert('This is a general button!');
});
$('#ButtonSubmit').click(function(){
alert('This is a submit button!');
});
});
</script>
</head>
<body>
<div id="page" data-role="page" data-theme='d'>
<div data-role="header" data-position="inline" data-position="fixed">
<h1>Chinese</h1>
</div>
<div data-role="content">
<a id="Button" data-role='button' data-iconpos="right" data-icon="gear">General Button</a>
<a id="ButtonSubmit" data-role='button' data-iconpos="right" type="submit" data-icon="gear">Submit Button</a>
<a id="link" href="/mobile/mobile/second.jsp" data-role='button' data-iconpos="right" data-icon="gear">Link Button</a>
</div>
<div data-role="footer" data-position="fixed">
<h1>[Email:zhaosheng.wolf#163.com][1]</h1>
</div>
</div>
</body>
</html>
second.jsp
<!DOCTYPE html>
<%# page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<title>China</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="/mobile/mobile/common/script/jQuery/jquery.mobile-1.0a2.css" />
<script type="text/javascript" src="/mobile/mobile/common/script/jQuery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="/mobile/mobile/common/script/jQuery/jquery.mobile-1.0a2.js"></script>
<script>
$(function(){
$('#test').click(function(){
alert('This is a general button!');
});
});
</script>
</head>
<body>
<div id="page" data-role="page" data-theme='d'>
<div data-role="header" data-position="inline" data-position="fixed">
<h1>[Chinese][2]</h1>
</div>
<div data-role="content">
<a id="test" data-role='button' data-iconpos="right" data-icon="gear">Test</a>
</div>
<div data-role="footer" data-position="fixed">
<h1>Email:zhaosheng.wolf#163.com</h1>
</div>
</div>
</body>
</html>
[1]: http://zhaosheng.wolf#163.com
[2]: http://zhaosheng.wolf#163.com
Remove type="submit" in #ButtonSubmit
And if u like to style your button, so it looks like a button, take a look at her.
The jQuery Mobile uses ajax to change of page, and you need a live() or delegate() to event "pageshow" or other for run when this event call.
Related
Im trying to make a swipe event , on page 1 its can be swipe to the page 2 , but from page 2 its not working , what is wrong here ? its only works on page 1 , what shall i do ?
(Page mostly code , i need more char)
Im trying to make a swipe event , on page 1 its can be swipe to the page 2 , but from page 2 its not working , what is wrong here ? its only works on page 1 , what shall i do ?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#page1",function(){
$("p").on("swiperight",function(){
$('#page1').fadeOut();
$('#page2').fadeIn();
$('#page3').fadeOut();
});
});
$(document).on("pagecreate","#page2",function(){
$("p").on("swiperight",function(){
$('#page1').fadeOut();
$('#page2').fadeOut();
$('#page3').fadeIn();
});
});
$(document).on("pagecreate","#page3",function(){
$("p").on("swiperight",function(){
$('#page1').fadeOut();
$('#page2').fadeOut();
$('#page3').fadeIn();
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="main" class="ui-content">
<p style="border:1px solid black;margin:5px;">PAGE 1</p>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="main" class="ui-content">
<p style="border:1px solid black;margin:5px;">PAGE 2</p>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="main" class="ui-content">
<p style="border:1px solid black;margin:5px;">PAGE 3</p>
</div>
</div>
</body>
</html>
$(document).on("pagecreate","#page1",function(){
console.log("page1");
$("#p1").on("swiperight",function(){
console.log("page 1's p");
//$('#page1').fadeOut();
$('#page1').fadeOut();
$('#page2').fadeIn();
$('#page3').fadeOut();
});
});
$("#p2").on("swiperight",function(){
console.log("page 2's p");
$('#page1').fadeOut();
$('#page2').fadeOut();
$('#page3').fadeIn();
});
$("#p3").on("swiperight",function(){
console.log("page 3's p");
$('#page1').fadeOut;
$('#page2').fadeOut;
$('#page3').fadeIn;
});
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="main" class="ui-content">
<p id="p1" style="border:1px solid black;margin:5px;">PAGE 1</p>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="main" class="ui-content">
<p id="p2" style="border:1px solid black;margin:5px;">PAGE 2</p>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="main" class="ui-content">
<p id="p3" style="border:1px solid black;margin:5px;">PAGE 3</p>
</div>
</div>
</body>
</html>
see i have used console.log to slove error. you have used all document event that not going to invoke just use one and you have used all p event that also not work instead use id for every p. i hope you satisfied.
I am creating a page for the transition.
Clicking on the page to navigate to another page - works on Firefox, but it doesn't on Chrome.
Error is showing :
Uncaught SecurityError: Failed to execute 'replaceState' on 'History':
A history state object with URL 'file:///C:/Users/athite/Desktop/DEMO/page.html' cannot be created in a document with origin 'null'.**
Here is my code:
<!DOCTYPE html>
<html>
<head>
<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="pageone">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
<p>Click on the link to see the slide effect.</p>
Slide to Page Two
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
<p>Click on the link to go back. </p>
Go to Page One
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
The issue occured in jquery.mobile-1.4.5.min.js:3
Solution:
Add this script before import as follows:
<script>
$(document).bind('mobileinit',function(){
$.mobile.pushStateEnabled = false;
});
</script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
Hello I am trying to make my page transitions and test them a bit but they are not working when I add data-transition="something" and its not working at all can you guys have a look? Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kontrol Panel</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="slicknav.css" />
<script src="jquery.slicknav.min.js"></script>
<script src="js.js"></script>
<script src="ajaxupload-v1.2.js"></script>
</head>
<body>
<?php
if (!strpos($_SERVER['PHP_SELF'], 'index')) {
$htmmm = '
<div id="go-back">
</div>';
echo $htmmm;
}
?>
<div id="demo1"></div>
<ul id="menu">
<li>
<a class="scroll menuButton" href="index.php" data-transition="pop">Forside</a></li>
<li>
<a class="scroll menuButton" href="menukort.php" data-transition="slide">Menukort</a></li>
<li>
<a class="scroll menuButton" href="udstillinger.php" data-transition="fade">Udstillinger</a></li>
</ul>
</div>
Yes. Make sure each page is set up this way.
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
Header and footer are not required
Hy, my answer is late but it seems that *.php page is not support...
Try using *.html and it should work.
Maybe I'm wrong and in this case, please give to us the solution.
Regards,
When I initialized a page and I try to navigate, at the first time the page step back. Why does the page step back.
I try to navigate in this way: $.mobile.changePage("#pagename");
For example. I try to go to the page of customers from the main after the initialization, I click to the icon. The webpage navigates when the navigate finished the page navigates back, but just at the first time, the url is still #....
code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="styles/jquery.mobile-1.3.1.min.css" />
</head>
<body>
<!-- //////////////////////////////////////////////////////
////////// MAIN PAGE ///////////////
////////////////////////////////////////////////////// -->
<section id="main-page" data-role="page" data-fullscreen="true">
<header data-role="header">
<h1>Főoldal</h1>
</header>
<div data-role="content">
<table>
<tbody>
<tr>
<td>
<div class="metro-bt" onclick="$.mobile.changePage('#customer-page');" id="customer-btn"> <!-- <<<-------------- here I invoke the function change page and than change back, but just at the first time -->
<div></div>
<span>Customers</span>
</div></td>
<td>
<div class="metro-bt" data-bind="click: bt_calendar_click" id="calendar-btn">
<div></div>
<span>Calendar</span>
</div></td>
</tr>
<tr>
<td>
<div class="metro-bt" data-bind="click: bt_negotiation_click, enable:isNegBtEnable" id="negotiation-btn">
<div></div>
<span>Negotiation</span>
<span data-bind="text: durationOfNegotiation" style="line-height: 0; display: block;"></span>
<span data-bind="text: nameOfPartner" style="line-height: 15px;clear: both; display: block;">asdf</span>
</div></td>
<td>
<div class="metro-bt" data-bind="click: bt_logout_click " id="logout-btn">
<div></div>
<span>Logout</span>
</div></td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- //////////////////////////////////////////////////////
////////// Customer ///////////////
////////////////////////////////////////////////////// -->
<section id="customer-page" data-role="page" data-fullscreen="true">
<header data-role="header">
<h1>Ügyféltörzs</h1>
<a data-role="button" href="#main-page" data-icon="back" data-iconpos="notext" class="ui-btn-left"></a>
</header>
<div class="content" data-role="content">
<div data-enhance="false" data-bind="event: { rowselect: rowselect }" id="customer-jqxGrid" style="margin: 0 auto"></div>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
Hozzáad
<a id="b-customer-negotation" class = "ui-disabled" data-icon="star" data-bind="click: startNegotiation"> </a>
<a id="b-customer-modify" class = "ui-disabled" data-icon="edit" data-bind="click: modify"></a>
</div>
</section>
<link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="styles/main.css" type="text/css" />
<script type="text/javascript" src="scripts/lib/jquery-1.9.1.min.js"></script>
<script src="scripts/lib/knockout-2.2.1.js"></script>
<script src="scripts/lib/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript">
g_loginViewModel = null;
m_tokenKey = "token";
m_serverName = "http://localhost:49670";
$(function() {
$.mobile.ignoreContentEnabled = true;
if (window.localStorage.getItem(m_tokenKey) != null) {
$.mobile.changePage("#main-page");
// bootstrap();
} else {
g_loginViewModel = new LoginViewModel();
ko.applyBindings(g_loginViewModel, document.getElementById("login-page"));
}
});
</script>
</body>
</html>
Please post it in fiddle, also what do you mean by page steps back? i guess you need not specify the first page as change page it should directly load the first page with data-role page.
I have a piece of code using jQuery to load content from an internal webpage onto a new page DOM after the user has selected a button from another page. The problem I got is no matter what option button I click the same result shows in the DOM. I was told to change the Var to .live but it hasn't made any difference. I cant really explain it more apart from some one looking at my code. What is the best way to deal with this?
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="../jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="../jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="../jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li>Options</li>
<li>results</li>
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="options">
<div data-role="header">
<h1>Options</h1>
</div>
<div data-role="content">
<div id="page-wrap">
<div id="header">
<h1>Call a webpage in a DOM</h1>
</div>
<div id="load-div" class="functions">
<span>Value 1</span>
<input type="submit" value="300GB" id="load" />
<div id="load-div" class="functions">
<span>Value 2</span>
<input type="submit" value="500Gb" id="load2" />
</div>
results
</div>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</div>
<div data-role="page" id="results">
<div data-role="header">
<h1>Results</h1>
</div>
<div data-role="content">
<div id="result" class="functions">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$.ajaxSetup ({
cache: false
});
var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />";
// load() functions
var loadUrl = "load.html";
$("#load").live("click",function(){
$("#result").html(ajax_load).load(loadUrl);
});
</script>
<script type="text/javascript">
$.ajaxSetup ({
cache: false
});
var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />";
// load() functions
var loadUrl = "load2.html";
$("#load_2").live("click",function(){
$("#result").html(ajax_load).load(loadUrl);
});
</script>
Options
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
Basically you overwrite every script you have here. Don't use loadUrl.
For #load:
$("#load").live("click",function(){
$('#result').html(ajax_load).load('load.html');
});
And for #load2:
$("#load_2").live("click",function(){
$("#result").html(ajax_load).load(`load2.html`);
});
Separate script tags are not independent. The code in one can interact with the code in another.
You have declared var ajax_load and loadUrl in both blocks. The ones in the second block overwrite those in the first. Either give them different names, or eliminate them and put the string values directly in your function.