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 -
Related
I want to create a simple select option with `bootstrap-select. I'm using bootstrap-select to create my select picker.
I see this error in the console.
HTML
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.rtl.min.css">
<link rel="stylesheet" href="css/bootstrap-select.min.css">
<title>مدیریت</title>
<style>
* {
font-family: Tahoma;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="lang">زبان</label>
<select id="lang" name="lang" class="form-control">
<option value="1">فارسی</option>
<option value="2">عربی</option>
<option value="3">انگلیسی</option>
</select>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<script src="js/defaults-fa_IR.min.js"></script>
<script>
$('#lang').selectpicker();
</script>
</body>
</html>
How can I achieve this?
use following version of select picker
https://github.com/snapappointments/bootstrap-select/archive/v1.14.0-beta2.zip
the mdl class mdl-layout__content is blocking my tooltip from showing in my graph. I made a codepen that shows the problem. Are there style settings I can make to still use this class for my nav, but show my tooltip.
Link to CodePen that shows the issue
here's my HTML code
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>New UI 07052017</title>
<link href="css/layout.css" rel="stylesheet" type="text/css">
<!-- Material Design Lite
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.orange-indigo.min.css"> -->
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.orange-indigo.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> -->
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="css/angular-toggle-switch-bootstrap-3.css" type="text/css" media="screen">
<link href="css/bootstrap-material-design.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.resize.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> **** updated to 1.6.1 on 6/29/17-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<!-- <script src="https://www.gstatic.com/firebasejs/3.2.0/firebase.js"></script> -->
<script src="https://www.gstatic.com/firebasejs/3.6.6/firebase.js"></script>
<!-- <script src="https://cdn.firebase.com/libs/angularfire/2.0.1/angularfire.min.js"></script> -->
<script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script>
<script src="js/angular-toggle-switch.min.js"></script>
<script src="js/angularScripts.js"></script>
<!-- JustGage tools for the dashboard -->
<script src="js/justgage.js"></script>
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="images/android-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Pellet Pirate">
<link rel="apple-touch-icon-precomposed" href="images/apple-icon-114x114.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="images/apple-icon-144x144.png">
<meta name="msapplication-TileColor" content="#3372DF">
<link rel="shortcut icon" href="images/pelletpirate-icon-32x32.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.cyan-light_blue.min.css">
<link rel="stylesheet" href="css/styles.css">
<!-- Import and configure the Firebase SDK -->
<!-- These scripts are made available when the app is served or deployed on Firebase Hosting -->
<!-- If you do not serve/host your project using Firebase Hosting see https://firebase.google.com/docs/web/setup -->
<script src="/__/firebase/4.0.0/firebase-app.js"></script>
<script src="/__/firebase/4.0.0/firebase-auth.js"></script>
<script src="/__/firebase/init.js"></script>
<style>
#view-source {
position: fixed;
display: block;
right: 0;
bottom: 0;
margin-right: 40px;
margin-bottom: 40px;
z-index: 900;
}
</style>
</head>
<body ng-app="PelletPirate">
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class="demo-header mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">smoker</span>
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="search">
<label class="mdl-textfield__label" for="search">Enter your query...</label>
</div>
</div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn">
<i class="material-icons">more_vert</i>
</button>
</div>
</header>
<div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
<header class="demo-drawer-header">
</header>
<nav class="demo-navigation mdl-navigation mdl-color--blue-grey-800">
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">whatshot</i>Manage a Cook</a>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">inbox</i>Inbox</a>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">delete</i>Trash</a>
<div class="mdl-layout-spacer"></div>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">help_outline</i>
<span class="visuallyhidden">Help</span></a>
</nav>
</div>
<!-- *********************************************************************************************************************-->
<!-- need help here. I'm not sure what settings to make in CSS to enable the tooltip popup to show. If I comment out the -->
<!-- the mdl-layout__content class then the tooltips show but my graph now drifts left behind my left nav -->
<!-- *********************************************************************************************************************-->
<main class="mdl-layout__content mdl-color--grey-100">
<!-- <main class="mdl-color--grey-100"> -->
<div class="mdl-grid demo-content">
<div class="demo-graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--8-col">
<div class="plot-container">
<div id="temp-placeholder" class="plot-placeholder"></div>
</div>
</div>
<div class="row" id="ControlsRow">
<div class="mdl-cell mdl-cell--12-col">
<div class="plot-container">
<div id="controls-placeholder" class="plot-placeholder"></div>
</div>
</div>
</div>
</div>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer--middle-section">
<div class="mdl-logo">"It's a Pirate's life for me."</div>
<ul class="mdl-mini-footer--link-list">
<li>Help</li>
<li>Privacy & Terms</li>
</ul>
</div>
</footer>
</main>
</div>
</body>
<script src="https://www.gstatic.com/firebasejs/4.1.2/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyD3_xJ0aYVK3VwjuuliOdb6t5wbbi87RB8",
authDomain: "pelletpirate.firebaseapp.com",
databaseURL: "https://pelletpirate.firebaseio.com",
projectId: "pelletpirate",
storageBucket: "pelletpirate.appspot.com",
messagingSenderId: "731610976061"
};
firebase.initializeApp(config);
var Ref = firebase.database().ref()
</script>
<script src="js/scripts.js"></script>
<script src="js/Cscripts.js"></script>
</html>
I figured it out: z-index to bring the tooltip to the forefront. In CSS:
#tooltip {
z-index: 1;
}
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>