OK, so I have a basic jQuery Mobile page.
What I need is : When user clicks on an element (e.g. the slider or a button)
No animation should show
No "action" should be enabled (like the slider moving etc)
No colour changes should occur, like the button changing on hover
<!-- New Website #1 -->
<!DOCTYPE html>
<html style='min-height:0px;'>
<head>
<title>Website Title</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile.min.css" />
<link rel="stylesheet" href="custom.css" />
<link rel="stylesheet" href="dev.css" />
</head>
<body id="jqm-website-3539" class="" >
<!-- New Page #1 -->
<div data-role="page" comp-id="jqm-page-2862" id="jqm-page-2862" class="" data-add-back-btn="false" data-back-btn-text="" data-back-btn-theme="" data-dom-cache="false" data-theme="" data-title="" >
<!-- New Header #1 -->
<div data-role="header" comp-id="jqm-header-6813" id="jqm-header-6813" class="" data-position="fixed" data-fullscreen="false" data-theme="" >
<h1></h1>
</div>
<!-- / New Header #1 -->
<!-- New Content #1 -->
<div data-role="content" comp-id="jqm-content-7853" id="jqm-content-7853" class="" data-theme="" >
<!-- New Button #1 -->
<div comp-id="jqm-button-6345" >
<a data-role="button" id="jqm-button-6345" class="" data-corners="true" data-icon="" data-iconpos="left" data-iconshadow="true" data-inline="false" data-mini="false" data-shadow="true" data-theme="" href="#" data-transition="">
Button
</a>
</div>
<!-- / New Button #1 -->
<!-- New Navigation Bar #1 -->
<div data-role="navbar" data-position="fixed" id="jqm-navbar-5393" class="" data-iconpos="left" >
<ul comp-id="jqm-navbar-5393" >
<!-- New Navigation Bar Item #1 -->
<li >
<a comp-id="jqm-navbar-item-5974" href="#" id="jqm-navbar-item-5974" class="" data-icon="home" data-theme="" >
One
</a>
</li>
<!-- / New Navigation Bar Item #1 -->
<!-- New Navigation Bar Item #1 -->
<li >
<a comp-id="jqm-navbar-item-5409" href="#" id="jqm-navbar-item-5409" class="" data-icon="plus" data-theme="" >
Two
</a>
</li>
<!-- / New Navigation Bar Item #1 -->
<!-- New Navigation Bar Item #1 -->
<li >
<a comp-id="jqm-navbar-item-925" href="#" id="jqm-navbar-item-925" class="" data-icon="gear" data-theme="" >
Three
</a>
</li>
<!-- / New Navigation Bar Item #1 -->
</ul>
</div>
<!-- / New Navigation Bar #1 -->
<!-- New SearchField #1 -->
<div data-role="fieldcontain" data-controltype="searchinput" comp-id="jqm-input-search-9514" id="jqm-input-search-9514" class="" data-mini="false" data-theme="" >
<input name="" placeholder="" value="" type="search">
</div>
<!-- / New SearchField #1 -->
<!-- New Switch #1 -->
<div data-role="fieldcontain" data-controltype="toggleswitch" comp-id="jqm-input-switch-2499" id="jqm-input-switch-2499" class="" data-highlight="false" data-mini="true" data-theme="" data-track-theme="" >
<select data-role="slider">
<option value="0">
On
</option>
<option value="Off">
Off
</option>
</select>
</div>
<!-- / New Switch #1 -->
<!-- New TextArea #1 -->
<div data-role="fieldcontain" data-controltype="textarea" comp-id="jqm-text-area-8880" id="jqm-text-area-8880" class="" data-mini="false" data-theme="" >
<label>
</label>
<textarea name="" placeholder="" id="jqm-text-area-8880" class="" data-mini="false" data-theme="" ></textarea>
</div>
<!-- / New TextArea #1 -->
</div>
<!-- / New Content #1 -->
</div>
<!-- / New Page #1 -->
<!-- New Page #1 -->
<div data-role="page" comp-id="jqm-page-7022" id="jqm-page-7022" class="" data-add-back-btn="false" data-back-btn-text="" data-back-btn-theme="" data-dom-cache="false" data-theme="" data-title="" >
</div>
<!-- / New Page #1 -->
<script src="jquery.min.js"></script>
<script src="jquery.mobile.min.js"></script>
<script src="custom.js"></script>
<script src="dev.js"></script>
</body>
</html>
<!-- / New Website #1 -->
Is this doable? And if so, how?
If you want nothing at all to happen, then just call event.preventDefault on click.
$("#button").click( function (event) {
event.preventDefault();
});
If you still want to perform some function, like linking to a URL, include it in your callback.
$("#button").click( function (event) {
window.location = $(this).attr("href");
event.preventDefault();
});
If you're goal is to "disable" the whole page, you could overlay an (semi-)transparent div:
function disablePage() {
$('body').append($('<div />').css({
width: '100%',
height: '100%',
background: '#fff',
position: 'fixed',
zIndex: 999,
top: 0,
left: 0,
opacity: .2 // or 0 for completely transparent
}));
}
You can use jQuery(':animated') function
$('.btn1').click(function(){
$('.one').animate({'width':'100%'},5000);
});
$('.btn2').click(function(){
$('.two').animate({'width':'100%'},5000);
});
$('.btn3').click(function(){
$('.three').animate({'width':'100%'},5000);
});
$('.all').click(function(){
$(':animated').stop();
});
demo
Related
My Html page codes :
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
</head><link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script>
function LengthConverter()
{
var inchRef,inchtoCmResultRef;
var inch,centimetres;
inchRef=document.getElementById("inchToCmValue");
inchtoCmResultRef=document.getElementById("inchtoCmResult");
inch=Number(inchRef.value);
centimetres=Number(inchtoCmResultRef.value)
centimetres=2.54*inch
inchtoCmResultRef.innerText=centimetres;
}
function LengthConvertercmToinch()
{
var inch2Ref,cmtoInchResultRef;
var inchTwo,centimetresTwo;
inch2Ref=document.getElementById("cmToInchValue");
cmtoInchResultRef=document.getElementById("cmToInchRe");
inchTwo=Number(inch2Ref.value);
centimetresTwo=Number(cmtoInchResultRef.value)
inchTwo=centimetresTwo/2.54
cmtoInchResultRef.innerText=inchTwo;
}
</script>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js">
</script>
<body>
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Length -->
<span class="mdl-layout-title">Length</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" href="">Length</a>
<a class="mdl-navigation__link" href="Mass.html">Mass</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Change conversion</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Length</a>
<a class="mdl-navigation__link" href="Mass.html">Mass</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content"><div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col"><h3>Centimetres to inches</h3>
<!-- Numeric Textfield with Floating Label -->
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="cmToInchValue">
<label class="mdl-textfield__label" for="cmToInchValue">Centimetres...</label>
<span class="mdl-textfield__error">Input is not a number!</span>
</div>
</form>
<!-- Raised button with ripple --><h4>Inches:</h4>
<span id="cmToInchRe"></span><button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" onclick="LengthConvertercmToinch()">Convert to Inches</button>
</div>
<div class="mdl-cell mdl-cell--4-col"><h3>Inches to centimetres</h3>
<!-- Numeric Textfield with Floating Label -->
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="inchToCmValue">
<label class="mdl-textfield__label" for="inchToCmValue">Inches...</label>
<span class="mdl-textfield__error">Input is not a number!</span>
</div>
</form>
<!-- Raised button with ripple --><h4>Centimetres:</h4>
<span id="inchtoCmResult"></span> <button onclick="LengthConverter()" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Convert to Centimetres</button>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
I know it's a long piece of code but I can't find the mistake?
I basically copied the codes from the material design lite(mdl)website to get the interface to create a webpage to convert cm to inches and vice versa and it also links to a webpage for mass by making minor changes to the code.
I input the converting function and onclick function myself.
But only the right side of the webpage works while the left column returns null?Help will be much appreciated.
I changed your code in "LengthConvertercmToinch()" observe here just added one variable
function LengthConvertercmToinch()
{
var inch2Ref,cmtoInchResultRef;
var inchTwo,centimetresTwo,inchTwo1;
inch2Ref=document.getElementById("cmToInchValue");
cmtoInchResultRef=document.getElementById("cmToInchRe");
inchTwo=Number(inch2Ref.value);
centimetresTwo=Number(cmtoInchResultRef.value)
inchTwo1=inchTwo/2.54
cmtoInchResultRef.innerText=inchTwo1;
}
I think now your problem has resolved
Let me know if your problem is solved
i have jquery mobile list view.
can anybody help me please, to customize this listview.
i want to customize the separator between list, so its will look like this
here is my code
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://demos.jquerymobile.com/1.2.1/docs/_assets/js/jqm-docs.js"></script>
<script src="http://demos.jquerymobile.com/1.2.1/js/jquery.mobile-1.2.1.js"></script>
<link rel="stylesheet" href="http://demos.jquerymobile.com/1.2.1/css/themes/default/jquery.mobile-1.2.1.css" />
<link rel="stylesheet" href="http://demos.jquerymobile.com/1.2.1/docs/_assets/css/jqm-docs.css"/>
<div data-role="page" id="mainn">
<div data-role="header" data-tap-toggle="false" data-theme='b'>
</div>
<div data-role="content">
<ul id="promoList" data-role="listview" >
<li>
<img src="airasia.jpg" >
<span class="ui-li-count">test 123</span>
</li>
<li>
<img src="d1380513326.jpg">
<span class="ui-li-count">test 124</span>
</li>
</ul>
</div>
</div>
Here is My Master Page Code. None of the buttons on any page inherited from this master is firing. I have no idea what could be stopping it. It's been killing my brains for 3 days. Help, Please? Tried creating new onClick methods etc. Buttons just wont fire. Something somewhere is stopping the button Fire and I;m not sure what it is
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="master.Master.cs" Inherits="ABSA.Site1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ABSA Property | Home</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Plottage Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); }
</script>
<!-- //for-mobile-apps -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!-- //js -->
<link href='//fonts.googleapis.com/css?family=Quicksand:400,300,700' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'/>
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
<!-- start-smoth-scrolling -->
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<script src="js2/jquery.leanModal.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="css2/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Different Multiple Form Widget template Responsive, Login form web template,Flat Pricing tables,Flat Drop downs Sign up Web Templates, Flat Web Templates, Login sign up Responsive web template, SmartPhone Compatible web template, free web designs for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Custom Theme files -->
<link href="css3/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- //Custom Theme files -->
<!-- font-awesome icons -->
<link href="css3/font-awesome.css" rel="stylesheet"/>
<!-- //font-awesome icons -->
<!-- web font -->
<link href="//fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet"/>
<!-- //web font -->
</head>
<body>
<form id="form1" runat="server">
<!-- header -->
<div class="header">
<div class="header-top">
<div class="container">
<div class="header-top-left">
<ul>
<li><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>+270000000</li>
<li><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>property#absa.co.za</li>
</ul>
</div>
<div class="header-top-left1">
<ul class="social-icons">
<li></li>
<li></li>
</ul>
</div>
<div class="header-top-right">
<div class="search">
<input class="search_box" type="checkbox" id="search_box"/>
<label class="icon-search" for="search_box"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></label>
<div class="search_form">
<form action="#" method="post">
<input type="text" name="Search" placeholder="Search..."/>
<input type="submit" value=" "/>
</form>
</div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="header-bottom">
<div class="container">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo">
<h1><a class="navbar-brand" href="Home.aspx">ABSA<span>Real Estate</span></a></h1>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
<nav>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Absa Help Us Sell</li>
<li>Absa Properties</li>
<li>FAQ's</li>
<li><a id="modal_trigger" href="#modal" class="hvr-bounce-to-bottom modal_close2">Login</a></li>
</ul>
</nav>
</div>
<!-- /.navbar-collapse -->
</nav>
</div>
<section id="SigninModal" class="popupBody" >
<div class="top-grids-left">
<div class="signin-form-grid">
<div id="modal" class="signin-form main-agile popupContainer" style="display:none;">
<p style="text-align:right;"><span class="modal_close"><i class="fa fa-times "></i></span></p>
<h2>SIGN IN</h2>
<form id="signin" action="#" method="post">
<input type="text" name="Email" placeholder="Email" required="" runat="server"/>
<input type="password" name="Password" placeholder="Password" required="" runat="server"/>
<input type="checkbox" id="brand" value="" runat="server"/>
<label for="brand" runat="server"><span></span> Remember me ?</label>
<asp:Button ID="btnLogin" type="submit" runat="server" Text="SIGN IN"/>
<div class="signin-agileits-bottom">
<p>Forgot Password ?</p>
<p><a class="modal_close" id="modal_trigger2" href="#modal2" runat="server">Register </a></p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- //main -->
</section>
<section class="popupBody">
<div class="top-grids-left">
<div class="signin-form-grid">
<div id="modal2" class="signin-form main-agile popupContainer" style="display:none;">
<p style="text-align:right;"><span class="modal_close2"><i class="fa fa-times "></i></span></p>
<h3>REGISTER</h3>
<form id="register">
<input type="text" name="FirstName" placeholder="First Name" required="" runat="server"/>
<input type="text" name="LastName" placeholder="Last Name" required="" runat="server"/>
<input type="text" name="Contact" placeholder="Contact Number" required="" runat="server"/>
<input type="email" name="Email" placeholder="Your Email" required="" runat="server"/>
<input type="password" name="Password" placeholder="Password" required="" />
<input type="checkbox" id="brand1" value="" runat="server"/>
<label for="brand1"><span></span>I accept the terms of use</label>
<asp:Button ID="btnRegister" runat="server" Text="REGISTER" OnClick="btnRegister_Click"/>
</form>
</div>
</div>
</div>
<!-- //main -->
</section>
<script type="text/javascript">
$("#modal_trigger").leanModal({ top: 200, overlay: 0.6, closeButton: ".modal_close" });
$("#modal_trigger2").leanModal({ top: 200, overlay: 0.6, closeButton: ".modal_close2" });
$(function(){
// Calling Login Form
$("#login_form").click(function(){
$(".social_login").hide();
$(".user_login").show();
return false;
});
// Calling Register Form
$("#modal_trigger2").click(function () {
$(".social_login").hide();
$(".user_register").show();
$(".header_title").text('Register');
return false;
});
// Going back to Social Forms
$(".back_btn").click(function(){
$(".user_login").hide();
$(".user_register").hide();
$(".social_login").show();
$(".header_title").text('Login');
return false;
});
})
</script>
<!-- //header -->
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<!-- footer -->
<div class="footer">
<div class="container">
<div class="footer-grids">
<div class="col-md-2 footer-grid" style="font-size:12px">
<ul>
<li>Contact Us</li>
<li>Security Estates</li>
<li>About Us</li>
<li>Privacy Policy</li>
<li>Terms and Conditions</li>
<li>Site Map</li>
<li>Property for Sale By Suburb</li>
</ul>
</div>
<div class="col-md-3 footer-grid">
<div class="footer-grid1">
<div class="footer-grid1-left">
<img src="images/7.jpg" alt=" " class="img-responsive"/>
</div>
<div class="footer-grid1-right">
Property 1
<div class="m1">
<span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="footer-grid1">
<div class="footer-grid1-left">
<img src="images/6.jpg" alt=" " class="img-responsive"/>
</div>
<div class="footer-grid1-right">
Property 2
<div class="m1">
<span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="footer-grid1">
<div class="footer-grid1-left">
<img src="images/8.jpg" alt=" " class="img-responsive"/>
</div>
<div class="footer-grid1-right">
Property 3
<div class="m1">
<span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="col-md-3 footer-grid">
<div class="footer-grid-instagram">
<img src="images/9.jpg" alt=" " class="img-responsive" />
</div>
<div class="footer-grid-instagram">
<img src="images/10.jpg" alt=" " class="img-responsive" />
</div>
<div class="footer-grid-instagram">
<img src="images/6.jpg" alt=" " class="img-responsive" />
</div>
<div class="footer-grid-instagram">
<img src="images/7.jpg" alt=" " class="img-responsive" />
</div>
<div class="clearfix"> </div>
</div>
<div class="col-md-4 footer-grid">
<p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Johannesburg, South Africa</p>
<p><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> property#absa.co.za</p>
<p><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>+27000000</p>
</div>
</div>
<div class="clearfix"> </div>
<div class="footer-copy">
<p>© 2016 ABSA Ltd. All rights reserved</p>
</div>
</div>
</div>
<!-- //footer -->
<!-- for bootstrap working -->
<script src="js/bootstrap.js"></script>
<!-- //for bootstrap working -->
<!-- here stars scrolling icon -->
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<!-- //here ends scrolling icon -->
</form>
</body>
</html>
I've Deleted Validation from the scripts but still nothing
First, you have to put some more info...It impossible to know what is really happening only by see some jquery and dependencies..
Second, (in chrome) right click on the element, click on "inspect", go to "Event Listeners" and click on "click".
You will see which are the event listeners of the buttons, and you will be able to investigate what is going on.
Add method="post" attribute to the first form tag and try again;
I mean;
<form id="form1" runat="server" method="post">
I am trying to create one app which is having three pages in single page template architecture first page contains login page and i am using
$.mobile.changePage('xxxx.php'); to navigate its working properly in second page i am having listview from there i am navigating to another page using
$.mobile.changePage('xxxx.php');
and for coming back prev page i am using this $.mobile.changePage('xxxx.php');
But when i go to prev page listview on click delegate method any other method is not working. But it works after I refresh the page.
Below is my code. Any suggestions will be great.
secondpage.php
<!DOCTYPE html>
<html>
<head>
<title> Management</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="./js/jquery.mobile-1.3.1.min.css" />
<script src="./js/jquery.mobile-1.3.1.min.js"></script>
</head>
<body >
<div data-role="page" id="demo-page" >
<div data-role="header" id="header" data-position="fixed" data-tap-toggle="false" data-fullscreen="true" data-theme="a" > <!-- data-position="fixed" data-tap-toggle="false" -->
<a href="#menu" data-role="button" data-inline="true" data-icon="bars" data-iconpos="notext" class="ui-btn-left" ></a>
Edit
<h1 style="font-size:14px;">Event Management</h1>
</div>
<div data-role="content" id="content" >
<div id="listdiv" style="margin-top:15%;margin-bottom:10%;">
<ul data-role="listview" id="list" class="ui-listview " data-split-icon="delete" data-filter="true" data-filter-placeholder="Search..." >
<li data-icon="false" data-name="<?php echo $token_res['event_name'];?>" value="<?php echo $token_res['msg_body'];?>" id="read">
</li>
<li data-icon="false" data-name="<?php echo $token_res['event_name'];?>" value="<?php echo $token_res['msg_body'];?>" id="read">
</li>
</ul>
</div>
</div><!--end of content -->
<script>
$("#list").delegate('li',"click",function(){
var ki=$(this).attr('data-name');
//alert("clicked"+$(this).attr('data-name')+$(this).attr('value'));
$( document ).one( "pagechange", function() {
$.mobile.changePage("edit.php",{type:'post',transition: "slide", data: {'param1':ki}});
});
});
$(document).ready(function() {
});
</script>
<div data-role="footer" id="mainfooter" data-theme="a" data-fullscreen="true" data-position="fixed" data-tap-toggle="false" style=" bottom:0; width:100%;">
</div>
</div><!--end of page -->
</body>
</html>
thirdpage.php
<!DOCTYPE html>
<html>
<head>
<title>Management</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="./js/jquery.mobile-1.3.1.min.css" />
<script src="./js/jquery.mobile-1.3.1.min.js"></script>
</head>
<body >
<div data-role="page" id="demo-page1" >
<div data-role="header" id="header" data-position="fixed" data-tap-toggle="false" data-fullscreen="true" data-theme="a" >
<a href="" data-role="button" id="mback" data-inline="true" class="ui-btn-left" >Back</a>
<a href="" id="medit" data-role="button" data-inline="true" class="ui-btn-right" >Edit</a>
<h1 style="font-size:14px;">Management</h1>
</div>
<div data-role="content" id="content" >
<ul data-role="listview" data-inset="true" style="margin-top:10%;margin-bottom:10%;" >
<li data-role="fieldcontain">
<label for="eventbody">Message-Body</label>
<input type="text" id="eventbody" value=<?php echo decode($_REQUEST['msg_body']);?> >
</li>
<li data-role="fieldcontain">
<label for="eventname">Message-Body</label>
<input type="text" id="eventname" value=<?php echo decode($_REQUEST['event_name']);?> >
</li>
<li data-role="fieldcontain">
<label for="sdate">Message-Body</label>
<input type="text" id="sdate" value=<?php echo decode($_REQUEST['sdate']);?> >
</li>
<li data-role="fieldcontain">
<label for="edate">Message-Body</label>
<input type="text" id="edate" value=<?php echo $_REQUEST['param1'];?> >
</li>
<li data-role="fieldcontain" id="nouse" style="display:none;">
<input type="text" id="eid" value=<?php echo decode($_REQUEST['id']);?> >
</li>
<li >
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="submit" id="mcancel" data-theme="d">Cancel</button></div>
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
</fieldset>
</li>
</ul>
</div><!--end of content -->
<div data-role="footer" id="mainfooter" data-theme="a" data-fullscreen="true" data-position="fixed" data-tap-toggle="false" style=" bottom:0; width:100%;">
</div>
<script>
$("#mback").click(function(){
alert("alert");
if($("#mback").text()=='Back'){
//e.preventDefault();
var page = document.referrer;
$.mobile.changePage("home.php",{
transition: 'slide',
reloadPage:true,
reverse: true
});
}else{
$("#eventbody").attr("readonly", "readonly");
$("#eventname").attr("readonly", "readonly");
$("#sdate").attr("readonly", "readonly");
$("#edate").attr("readonly", "readonly");
$("#medit .ui-btn-text").text("Edit");
$("#mback .ui-btn-text").text("Back");
$('#mback .ui-btn-text').button('refresh');
$("#medit .ui-btn-text").button('refresh');
}
});
$(document).ready(function() { // <-- ensures the DOM is ready
});
</script>
</div><!--end of page -->
</body>
</html>
i changed the list delegate on click method from id to class then it is working properly as suggested by the link answer
Why don't you use the auto back feature. Just have this in your script after jquery-1.9.1.min.js and before jquery.mobile-1.3.1.min.js:
$.mobile.page.prototype.options.addBackBtn = true;
$.mobile.page.prototype.options.backBtnText = "Back";
Then it would automatically add back button markup on each page except first one and route backwards to the previous pages.
I'm have a Jquery Mobile page where I'm using AJAX to pull data into listviews that are inside of collapsible widgets. In many cases, I have 10+ collapsible widgets each containing a listview.
When I open a collapsible widget, the AJAX function is called and the data is pulled in. This works just fine.
However, I'm experiencing a problem when I open 2 collapsible widgets without closing one of them:
1) When the second collapsible widget is opened, the AJAX function fires for both widgets. I don't want the AJAX function to fire on the first-opened widget.
Thanks in advance for your help. My code is below.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Edit Kits</title>
<link rel="stylesheet" href="css/jquery.mobile-1.0rc2.css" />
<link rel="stylesheet" href="themes/Auer.css" />
<link rel="stylesheet" href="css/custom.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
</head>
<body>
<div data-role="page" id="editkits" class="type-interior">
<div data-role="header">
<h1>Edit Kits</h1>
Home
<a data-rel="back" data-icon="back" class="ui-btn-right">Back</a>
<div class="header-sub">
<div class="ui-bar center-text"><img src="images/logo.png" id="logo" alt="spi_Cname"/></div>
</div>
<div data-role="navbar" class="navbar">
<ul>
<li>TOC</li>
<!-- SPI_HTML_ShowSearchMenu -->
<li>Search</li>
<!-- SPI_HTML_ShowSearchMenu -->
<!-- SPI_HTML_AllowKits -->
<li>Kits</li>
<!-- SPI_HTML_AllowKits -->
<!-- SPI_HTML_AllowSales -->
<li>SPI_SalesMenuText</li>
<!-- SPI_HTML_AllowSales -->
<!-- SPI_HTML_AllowOrderPlacement -->
<li>Cart</li>
<!-- SPI_HTML_AllowOrderPlacement -->
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div data-role="content">
<!-- SPI_No_Kit_Message -->
<div class="ui-grid-a">
<div class="ui-bar ui-bar-e center-text">
<br>
<h2>You have no saved Kits.</h2>
<p>To create a kit, add products to your shopping
cart and click "save as kit" on the menu at the bottom of your display.</p>
</div>
</div>
<!-- SPI_No_Kit_Message -->
<!-- SPI_HTML_HdrOnlyKit -->
<div data-role="collapsible" data-collapsed="true" data-content-theme="d">
<h3 id="SPI_KitId" class="kit">SPI_KitName SPI_KitNote</h3>
<div class="kitid"></div>
</div>
<!-- SPI_HTML_HdrOnlyKit -->
<!-- SPI_HTML_Kit -->
<form name="SPI_KitFormName" method="post" action="WebCatPageServer.exe">
<input name="Action" type="hidden" value="Not_Set" />
<input name="IsAjax" type="hidden" value="Yes" />
<input name="KitId" type="hidden" value="SPI_KitId" />
<input name="SearchTerm" type="hidden" value="Not_Set" />
<ul data-role="listview" id="list" data-inset="true" data-split-icon="delete" data-split-theme="d">
<!-- SPI_HTML_Kit_Product1 -->
<li><a href="javascript:document.ShoppingCart.Action.value='ItemLookup';document.ShoppingCart.SearchTerm.value='SPI_CartLookupPartNum';document.ShoppingCart.submit();">
<!-- SPI_KitProdItemNum -->
<h2>SPI_KitProdPartNum</h2>
<!-- SPI_KitProdItemNum -->
<p class="description">SPI_KitProdDesc</p>
<p><input type="text" name="SPI_KitOrdQtyFieldName" onBlur="clickrecall(this,'0')" tabindex="SPI_KitOrdQtyTabIndex" value="SPI_KitProdQty" onfocus="document.SPI_KitFormName.Action.value='Recalc_Kit';SPI_KitOrdQtyFieldName.select()"/></p>
<p>Unit Price: SPI_KitProdPrice</p>
<p>Ext. Price: <span class="price">SPI_KitProdExtPrice</span></p>
</a>
<!-- SPI_HTML_KitsAllowEdit -->
Delete
<!-- SPI_HTML_KitsAllowEdit -->
</li>
<!-- SPI_HTML_Kit_Product1 -->
<!-- SPI_HTML_Kit_Product2 -->
<li><a href="javascript:document.ShoppingCart.Action.value='ItemLookup';document.ShoppingCart.SearchTerm.value='SPI_CartLookupPartNum';document.ShoppingCart.submit();">
<!-- SPI_KitProdItemNum -->
<h2>SPI_KitProdPartNum</h2>
<!-- SPI_KitProdItemNum -->
<p class="description">SPI_KitProdDesc</p>
<p><input type="text" name="SPI_KitOrdQtyFieldName" onBlur="clickrecall(this,'0')" tabindex="SPI_KitOrdQtyTabIndex" value="SPI_KitProdQty" onfocus="document.SPI_KitFormName.Action.value='Recalc_Kit';SPI_KitOrdQtyFieldName.select()"/></p>
<p>Unit Price: SPI_KitProdPrice</p>
<p>Ext. Price: <span class="price">SPI_KitProdExtPrice</span></p>
</a>
<!-- SPI_HTML_KitsAllowEdit -->
Delete
<!-- SPI_HTML_KitsAllowEdit -->
</li>
<!-- SPI_HTML_Kit_Product2 -->
</ul>
<div data-role="controlgroup" data-type="horizontal">
Delete Kit
<!-- SPI_HTML_KitsAllowEdit -->
Save Kit
<!-- SPI_HTML_KitsAllowEdit -->
Clear Qty's
<!-- SPI_HTML_AllowOrderPlacement -->
Add to Cart
<!-- SPI_HTML_AllowOrderPlacement -->
</div>
</form>
<!-- SPI_HTML_Kit -->
</div><!-- /content -->
<div data-role="footer" id="footer" data-position="fixed">
<h4>© Auer Steel 2011</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Jquery
$("h3.kit").live('click', function () {
$(".kitid").empty().html('<img src="images/load.gif" />');
var kitid = this.id;
var url = 'http://68.188.40.182/WebCat/WebCatPageServer.exe?AJAX&Action=Open_Kit&KitID=' + kitid;
$.ajax({
url: url,
dataType: "html",
cache: false,
success: ajaxCallDone,
complete: function () {},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Error type :" + errorThrown + " Error message :" + XMLHttpRequest.responseXML + " textStatus: " + textStatus);
}
});
function ajaxCallDone(data) {
$(".kitid").html(data);
try {
$('ul#list').listview('refresh');
} catch (e) {
$('ul#list').listview();
}
jQuery('#editkits').page("destroy").page();
}
});
Your selectors are always global, i.e. $(".kitid") will always select ALL elements with a class of kitid.
What you want is to limit the scope of your ajax to the currently clicked item, passed by the this property (you already get it's id but that's about it!).
You need to use that to then only clear/ajax/update the one content the user clicked on, instead of acting on all of them...