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.
Related
I have two pages in jquery. When I clicked page two, I want to copy content of pageone to pagetwo. Because I have three pages in another project. I simulated here easily to show my problem. Back to problem, it copies content with id "pageone" but collapsibleset widget doesnt work properly.
Example on JSfiddle
<!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>
function showPage(pageId){
var content = $("#"+pageId).html();
$("#pagetwo").html(content);
$("#"+pageId).html("");
$("#external_page_link").click();
}
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Collapsible Sets</h1>
</div>
<a onclick="showPage('pageone')" data-rel="page" class="filter_panel ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-bars ui-btn-icon-left ui-btn-b" >Page2</a>
<div id="asd" data-role="main" class="ui-content">
<div data-role="collapsibleset">
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
</div>
</div>
<div data-role="footer">
<h1>Insert Footer Text Here</h1>
</div>
</div>
<a href="#page2" id="external_page_link" ></a>
<div data-role="page2" id="pagetwo">
</div>
</body>
</html>
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>
My Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'/>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$("#menu").accordion();
});
</script>
</head>
<body>
<div id="menu">
<h3>Section 1</h3>
<div>
<p>I'm the first section!</p>
</div>
<h3>Sectio 2</h3>
<div>
<p>Tab 2</p>
</div>
<h3>Section 3</h3>
<div>
<p>Tab 3</p>
</div>
</div>
</body>
</html>
I have tried several times but the page does not show up as expected in Google Chrome.Please could someone help me.
Add http in your link to jQuery UI:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
It throwing error because the library is not loading properly.
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.
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.