can you please tell me how to show date box above the pop up screen .Actually I am try to implement date box but it is showing below the pop up screen .Here is fiddle.
http://jsfiddle.net/ravi1989/3yG9E/
- <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-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="css/jquery.mobile-1.3.1.min.css"-->
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.css">
<link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.css">
<link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.min.css">
<link rel="stylesheet" href="css/jquery.mobile.theme-1.3.1.css">
<link rel="stylesheet" href="css/jquery.mobile.theme-1.3.1.min.css">
<link rel="stylesheet" href="css/base.css">
<!-- Extra Codiqa features -->
<!-- jQuery and jQuery Mobile -->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="cordova-2.7.0.js"></script>
<!--script src="js/jquery.mobile-1.3.1.min.js"></script-->
<!--script src="js/jquery.mobile-1.3.1.min.js"></script-->
<script src="lib/jquery.textselect.min.js" type="text/javascript"></script>
<script src="lib/jquery.scrollTo.min.js" type="text/javascript"></script>
<script src="js/jquery.search.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.1.js"></script>
<script src="js/index.js"></script>
<script src="js/PopupScript.js"></script>
<script src="js/CasePadDatabase.js"></script>
<script type="text/javascript" src="js/websocket.js"></script>
<script src="js/BackButtonImplentation.js"></script>
<script src="js/fontSizeFunctionality.js"></script>
<script src="js/CreateFolder.js"></script>
<script type="text/javascript" charset="utf-8" src="js/WebSocketPlugin.js"></script>
<script type="text/javascript" charset="utf-8" src="js/highlight.js"></script>
<script src="js/EmailComposer.js"></script>
<!--link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /-->
<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" rel="stylesheet" />
<!--script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script-->
<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.durationbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.slidebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
</head>
<body>
<!--**********************************Home page Star******************************-->
<div data-role="page" id="Home" >
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" >
<h1 class="ui-title" id="hdr" style="text-align:left;margin-left: 100px;">My Cases</h1>
<div class="ui-btn-right" id="headerButtons" data-role="controlgroup" data-type="horizontal">
Setting
Add
Edit
</div>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="folderData" >
</ul>
<!-- **************Case Information Pop up Start*******************-->
<div data-role="popup" id="CaseInformationScreen" data-close-btn="none" data-overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="b" >
Cancel
<h1>Case Information</h1>
Add
</div>
<div data-role="content">
<div><img src="img/Documents.png"/></div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
<input name="text-12" id="text-12" value="" type="text" class="caseName_h" >
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;" >Case Date:</label>
<!--input name="text-12" id="text-12" value="" type="date" class="caseDate_h" -->
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true}'/>
</div>
<div data-role="fieldcontain">
<label for="textarea-12">Textarea:</label>
<textarea cols="40" rows="8" name="textarea-12" id="text-12" class="caseTextArea_h"></textarea>
</div>
</div>
</div>
Actually i have header having button .on click it show pop up screen on click date field it is showing below the pop up screen .How to show date box above the pop up screen may i change z index?
A quick fix is to add "zindex":1200 to your data-options object in your date-box input
This is from jquery mobile.
Note: Chaining of popups not allowed
The framework does not currently support chaining of popups so it's not possible to embed a link from one popup to another popup. All links with a data-rel="popup" inside a popup will not do anything at all.
This also means that custom select menus will not work inside popups, because they are themselves implemented using popups. If you place a select menu inside a popup, it will be rendered as a native select menu, even if you specify data-native-menu="false".
A workaround to get chained popups working is the use of a timeout for example in the popupafterclose event bound to the invoking popup. In the following example, when the first popup is closed, the second will be opened by a delayed call to the open method:
$( document ).on( "pageinit", function() {
$( '.popupParent' ).on({
popupafterclose: function() {
setTimeout( function(){ $( '.popupChild' ).popup( 'open' ) }, 100 );
}
});
});
Related
Found this Datebox example on internet but when I copy the code in a separate html file this doesn't seem to work on any browser. Please suggest how to use datebox and what is the problem with the code?
http://jsfiddle.net/Gajotres/ktbcP/
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.durationbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.slidebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<label for="mydate">Some Date</label>
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true}'/>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Try this :
<html>
<head>
<title>jQM Complex Demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="http://jeromeetienne.github.com/jquery-mobile-960/css/jquery-mobile-fluid960.css">
<script type='text/javascript' src="http://timeago.yarp.com/jquery.timeago.js"></script>
<script type='text/javascript' src="http://imakewebthings.github.com/jquery-waypoints/waypoints.min.js"></script>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.durationbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.slidebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"> </script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<label for="mydate">Some Date</label>
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true}'/>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
I got this textbox where i can put a hex-color to change the color in my application:
#Html.TextBoxFor(m => m.Page.Color)
Is there a, not to complicated, way to change the textbox into
a colorpicker?
For simplicity i try to add farbtastic to the layout, here is the full page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<link rel="stylesheet" href="~/Content/farbtastic.css" type="text/css" />
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="~/Scripts/farbtastic.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#demo').hide();
$('#picker').farbtastic('#color');
});
</script>
</head>
<body>
<div id="demo" style="color: red; font-size: 1.4em">jQuery.js is not present. You must install jQuery in this folder for the demo to work.</div>
<form action="" style="width: 400px;">
<div class="form-item"><label for="color">Color:</label><input type="text" id="color" name="color" value="#123456" /></div><div id="picker"></div>
</form>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
The <div id="demo" style="color: red; font-size: 1.4em">jQuery.js is not present. You must install jQuery in this folder for the demo to work.</div>
Does not run so I suppose it works...However, no wheel is showing in my view, just the
iputboxes. What could be wrong?
Download Farbtastic
Include farbtastic.js and farbtastic.css into your solution. Then have this html and jquery on page -
<html>
<head>
<title>Farbtastic</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="farbtastic.js"></script>
<link rel="stylesheet" href="farbtastic.css" type="text/css" />
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#demo').hide();
$('#picker').farbtastic('#color');
});
</script>
</head>
<body>
<h1>jQuery Color Picker: Farbtastic</h1>
<div id="demo" style="color: red; font-size: 1.4em">jQuery.js is not present. You must install jQuery in this folder for the demo to work.</div>
<form action="" style="width: 400px;">
<div class="form-item"><label for="color">Color:</label><input type="text" id="color" name="color" value="#123456" /></div><div id="picker"></div>
</form>
</body>
</html>
Then when you run -
I am creating a SPA ios application using phonegap and having some issue with Jquery mobile the lastest version (1.4.0). The pages do not fit to the screen of the iphone but they appear one after another and I can scroll down to view all my pages ! (possibly data-role = "page" is not working correctly. Can anyone shed a light on this. Here is my HTML
<!DOCTYPE html>
<html>
<head>
<title>App Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1" />
<!--<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="phonegap.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/soapclient-1.2.js"></script> <!-- for soap v1.1 use js/soapclient.js -->
<script src="js/EmailComposer.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="js/jquery.ui.map.full.min.js"></script>
<script src="js/jquery.imageLens.js"></script>
<script src="js/jquery.alerts.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/touchable.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/date.js"></script>
<script src="js/moduleScripts/timetoport.js"></script>
<script src="js/moduleScripts/imageslogic.js"></script>
<script src="js/moduleScripts/loadingScript.js"></script>
<script src="js/moduleScripts/LoginController.js"></script>
<script src="js/moduleScripts/kmlMap.js"></script>
<script src="js/moduleScripts/tools.js"></script>
<script src="js/moduleScripts/dataService.js"></script>
<script src="js/jquery.mobile-1.4.0.js"></script>
<script>
$(document).ready(function() {
InitializeLoginScreen();
CheckDisclaimer();
});
$("#discpage1").live("pageshow",function() {
$("#agree").click(function() {
localStorage.setItem('disclaimerAccepted', true);
tools.GoForward("#loginPage");
});
$("#disagree").click(function() {
localStorage.setItem('disclaimerAccepted', false);
navigator.notification.alert('To ccontinue you must accept the Disclaimer', null, '', 'OK');
});
});
$(document).delegate(".scroll-disabled", "scrollstart", false);
</script>
</head>
<body id="boddy">
<!-- LOGIN PAGE -->
<div data-role="page" id="loginPage" class="scroll-disabled">
<div data-role="header" class="header" >
<div id="LoginHeader" class="headerText">Login</div>
</div>
<div data-role="content">
<div>
<img src="images/shiplogo.png" id="logobspt">
<label id="ship2Go">Ships to go</label>
</div>
<div id="loginContainer">
<div>
<label for="uid" id="uidLabel">Username</label>
<input type="text" value="test" name="uid" id="uid" placeholder="Enter username" />
</div>
<div id="loaderdiv" style="height:50px;width:100px;padding:5px;margin-left:87px;margin-top:-12px;display:none;">
<img src="images/loading3.gif" id="loadingimg" style="margin-left:30px;">
<div id="loadingMsg">
<center >Please wait...</center>
</div>
</div>
<div>
<label for="pwd" id="pwdLabel">Password</label>
<input type="password" value="test" name="pwd" id="pwd" placeholder="Enter password"/>
</div>
</div>
<div class="Button" id="loginButton">Login</div>
<div data-role="footer">
<div id="envLabel"></div>
</div>
</div>
</div>
<!-- DISCLAIMER PAGE -->
<div data-role="page" id="discpage1" class="scroll-disabled">
<!--<div id="dleftpanel"></div>
<div id="drightpanel"></div>-->
<div id="dcontent">
<div id="bplogo"></div>
<div id="shiplogo"></div>
<div id="discHeading">Disclaimer</div>
<div id="agree" class="Button discButton">I have read and I agree</div>
<div id="disagree" class="Button discButton">Disagree</div>
</div>
</div>
</body>
</html>
Whenever this happens to me (as - I admit - it does from time to time), it is ALWAYS that the CSS file for jQuery Mobile is missing, linked to the wrong path, or I have a typo (used a "dot" instead of a "dash" more often than not).
Any chance that could be it?
A quick way to check is to open up the file you pasted in above in Chrome (or whatever) and look at the debug console for any messages throwing a fit about the CSS file.
I am trying to share a ViewModel between pages.
Say I have pageA.html and pageB.html and a separate data.js file. pageA has fields bound (using Knockout) and after clicking a button it moves to pageB which also has some fields bound to the same ViewModel. I can't get this to work - what am I missing?
Of course I can keep all pages (data-role="page") inside a single .html file and it would work fine but is that the only way?
EDIT - pageB.html is a copy of pageA - I am trying to show the problem NOT having another login functionality in many pages!!!
This is the code:
pageA.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
<title>PageA</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="JS/data.js"></script>
</head>
<body>
<div data-role="page" id="login">
<div id="loginDetails">
<div data-role="fieldcontain">
<label for="username">
Username:</label>
<input type="text" name="name" id="username" data-bind="value: userid" />
</div>
<div data-role="fieldcontain">
<label for="pswd">
Password:</label>
<input type="text" name="name" id="pswd" data-bind="value: pswd" />
</div>
</div>
<a id="btnLogin" data-role="button" data-bind="click: login">Login</a>
</div>
<script type="text/javascript">
ko.applyBindings(S5.myViewModel);
</script>
</body>
</html>
pageB.html (largely the same as above but its javascript block doesn't seem to get called...)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
<title>pageB</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="JS/data.js"></script>
</head>
<body>
<div data-role="page" id="abcd">
<div id="loginDetails">
<input type="text" name="name" data-bind="value: userid" />
<input type="text" name="name" data-bind="value: pswd" />
</div>
</div>
<script type="text/javascript">
debugger; <-- THIS NEVER GETS CALLED!!
ko.applyBindings(S5.myViewModel);
</script>
</body>
</html>
data.js
var S5;
(function (S5) {
S5.myViewModel = {
userid: ko.observable('marcel'),
pswd: ko.observable('xxx'),
login: function () {
// ** DO LOGIN CHECK then move to pageB
$.mobile.changePage("pageB.html", { transition: "slideup" });
},
};
})(S5 || (S5 = {}));
jQuery Mobile uses Ajax Navigation to load and change views. When using multi-html page template, it loads first page (html file) entirely. However, for other views /pages fetched with Ajax, it loads contents inside <body> only, neglecting other tags i.e. <script>, <head> etc...
To solve your problem, move any extra JS libraries or code inside <div data-role="page">.
I'm trying to open a jquery mobile panel through code but the method is not recognized.
the error I'm getting is: "Object[object Object} has no method 'panel' "
I have a html page consists of several jquery-mobile div pages and an external javascript file.
this is the js function:
function open_panel() {
var selected_child=$('#kids_select').val();
alert(selected_child);
$("#mypanel").panel("open");
// $("#mypanel").panel().panel("open");
}
$('#mypanel').live('pageinit', function () {
alert("works");
});
I'ts a project started by another student, and he included duplicate js files in the html head section. I guess it's because the old jquery mobile is loaded insted of the 1.3, but when I try to remove some of the references the design gets all messy or some other code isn't recognized.
here's the head section:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />
<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<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="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="my.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js">
</script>
<script src="js/js_functions.js" type="text/javascript"></script>
finnaly I added a href attribute to the 'a' tag pointing the panel and it gets loaded after the function fires up, but the panel's pageinit function won't fire.
I tried:
$('#mypanel').live('pageinit', function () {
alert("works");
});
and:
$('#mypanel').live('pageshow', function () {
alert("works");
});
but that doesn't work
here's the relevant part of the html body: (with the panel)
<div data-role="page" id="mainpage">
<div data-theme="b" data-role="header">
<h3>
Iallow
</h3>
</div>
<div data-role="content" style="text-align: center;">
<div>
<div style="width: 50%; float: left">
<label for="NewkidBTN">
Click to add new kid</label>
<a id="NewkidBTN" data-role="button" data-theme="b" href="#RegisterChild" data-icon="plus"
data-iconpos="right">Add Kid</a>
</div>
<div id="kids_div">
</div>
</div>
<a onclick="open_panel()" href="#mypanel" data-role="button" data-inline="true" data-icon="bars">Add transaction</a>
</div>
<div data-role="panel" id="mypanel">
<h3>enter action</h3>
<select name="select-type" id="select-type" onclick="return select-type_onclick()">
<option value="deposit">deposit</option>
<option value="withdrawal">withdrawal</option>
</select>
<label for="ammount">Write the ammount</label>
<input type="number" data-clear-btn="false" name="ammount" id="ammount" value="">
<label for="desc" class="ui-hidden-accessible">
description:</label>
<input type="text" name="desc" id="descTB" value="" placeholder="description" runat="server" />
<button id="Button1" type="submit" data-theme="b" data-icon="check" runat="server" onclick="transaction">
submit</button>
</div>
edit:
I changed the head section by removing old jquery mobile and jquery.
now the panel loads but the pageinit function I added to the panel won't fire up.
I tried every syntax, such as:
$('#mypanel').live('pageshow', function () {
alert("works");
});
$('#mypanel').live('pageinit', function () {
alert("works");
$('#mypanel').on('pageshow', function () {
alert("works");
});
$('#mypanel').on('pageinit', function () {
alert("works");
});
maybe panels don't work like pages in jquery mobile..
the head now looks like this:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<!--<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />-->
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />
<!--<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>-->
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<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="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>-->
<!--<script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js">
</script>-->
<script src="js/js_functions.js" type="text/javascript"></script>