When the proper value is selected I want to open the div with id="new_firm" in a modal dialog. I can't get the dialog to open. I know that the script get's executed since the alert pops up. Can anyone please tell me what's wrong here?
<!DOCTYPE html>
<html>
<head>
<title>FileReader Example</title>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.0.css" />
<script type="text/javascript" charset="utf-8" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/phonegap-1.3.0.js"></script>
<script type="text/javascript" charset="utf-8">
function openNewFirmDialog() {
var selected = $("#select_firm option:selected");
var ddValue = selected.text();
if(ddValue === "Add a new company") {
//alert(ddValue);
$('#new_firm').dialog({modal:true});
}
}
</script>
</head>
<body>
<div data-role="page" id="add_details">
<div data-role="content">
<h2>Register hours</h2>
hei
<div data-role="fieldcontain">
<select id="select_firm" data-native-menu="false" onchange="openNewFirmDialog()">
<label for="select_firm" class="select">Select firm:</label>
<option data-placeholder="firm">Firm</option>
<option value="internal">Internal</option>
<option value="new_firm_option">Add a new company</option>
</select>
</div>
<input type="text" id="descritptionTxt" value="Description"/>
<div data-role="controllgroup" data-type="horizontal">
<input type="range" id="number_of_hours" min="0" max="24" step="0.25" value="0" />
<input type="range" id="number_of_minutes" min="0" max="24" step="0.25" value="0" />
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Overview</li>
<li>Add hours </li>
<li>Settings</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="new_firm">
<h2>Add a new firm</h2>
<textarea id="the_new_firm" value="New firm"/>
</div>
</body>
I think you need to add reference to jQuery UI if you want to use dialogs. Available for download here: http://jqueryui.com/demos/dialog/
Related
I've encountered an error while running my application. I'm seeing this error on my console when I run the application
Uncaught TypeError: Cannot read property 'fn' of undefined
at util.js:68
at util.js:10
at bootstrap.min.js:6
at bootstrap.min.js:6
Here is my source code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<!------ Include the above in your HEAD tag ---------->
<div class="sidenav">
<div class="login-main-text">
</div>
</div>
<div class="main">
<div class="col-md-6 col-sm-12">
<div class="login-form">
<form>
<div class="form-group">
<label>User Name</label>
<input type="text"id="userid" class="form-control" placeholder="User Name">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" id="password" class="form-control" placeholder="Password">
</div>
<input type="button" class="btn btn-black" value="Login" onclick="NullValidator()" #*window.location='Url.Action("Dashboard", "Dashboard")*# />
#*<button type="submit" class="btn btn-black">Login</button>*#
<button type="submit" class="btn btn-secondary">Register</button>
<div class="form-group">
<a style="float:left">Forget Password ? </a>
</div>
</form>
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
</body>
</html>
I've tried searching for the fn here but I didn't use it in this page and also on other pages of the application. So I can't determine the cause of the error.
I've solved my problem by adding this code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
I've poked around and found similar questions, but none of the solutions have worked.
I'm writing a simple (so far) app that will allow the user to select a number from 1-6 on a form, then display the that value (1-6) on another page. It works fine on my desktop, but when I try it from the iPhone emulator I click "Submit" and nothing happens at all... as if I didn't even click it.
I'm using jQuery 1.10.1 and jQuery Mobile 1.3.1. I'll add that this is a PhoneGap app using Adobe's PhoneGap Build service.
Here's the code for my main page:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Value Submit</title>
<link rel="stylesheet" type="text/css" href="css/jquery-mobile.css" />
<link rel="stylesheet" type="text/css" href="css/themes/aw-theme2.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-mobile-min.js"></script>
<script type='text/javascript'>
$(document).on('pageinit', function() {
$(document).on('click', '#submitroll', function() {
var dieRoll = $("#dieresult").val();
$.mobile.changePage('valuedresult.html', { data: {arg1:dieRoll}});
return false;
});
});
$(document).on('pageinit', '#valued', function() {
var dieRoll = $("#dieresult").val();
$("#results span").html(dieRoll);
});
</script>
</head>
<body>
<div data-role="page" id="valued" data-theme='a'>
<div data-role="header" data-header-theme='a'>
<a data-icon="back" data-rel="back" back-btn="true">Back</a>
<h1>Value</h1>
<a data-icon="home" href="index.html" data-iconpos="notext">Home</a>
</div>
<div data-role="content" data-theme='a'>
<form id="rollform">
<select id="dieresult" name="dieresult">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
Submit
</form>
</div>
</body>
</html>
And here's the code for valuedresult.html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Value Result</title>
<script>
$(document).on('pageshow', function(event) {
var url = $.url(document.location);
var arg1 = url.param("arg1");
$("#results span").html(arg1);
});
</script>
</head>
<body>
<div data-role="page" id="valueresult" data-theme='a'>
<div data-role="header" data-header-theme='a'>
<a data-icon="back" data-rel="back" back-btn="true">Back</a>
<h1>Value Result</h1>
<a data-icon="home" href="index.html" data-iconpos="notext">Home</a>
</div>
<div data-role="content" data-theme='a'>
<div id="results">Result: <span></span>
</div> <!-- results -->
</div>
</body>
</html>
As I said, it works fine on a desktop browser, but nothing happens on the iPhone emulator when I click "Submit".
I've played around with this for quite a while, referring to other posts, documentation, etc... but I just can't seem to get it working. Hopefully I'm just missing something silly.
Any help is appreciated. Thank you very much in advance!
EDITED: I've noticed this piece of code $.url. This is not part of jQuery or jQuery Mobile. You're missing the Purl JavaScript URL parser plugin. You should add it in the first page's head tag.
Below you can find some fixes related to the code you've posted. I have removed the code which refers to the missing Purl JavaScript URL parser plugin as well.
In the first page, attaching the click event handler on the document element is enough. You don't need to include it inside a pageinit event handler. Moreover instead of using return false; it is better to use event.preventDefault() in order to prevent the default behavior of the event. I have removed some unnecessary code as well.
In the second page, I have modified your script and put it inside the jQM page. The reason is that when a jQM page is loaded through Ajax, the script inside the head tag are not loaded. An alternative solution would be to load this script on the first page's load.
I have modified your example as following:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Value Submit</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type='text/javascript'>
$(document)
.on('click', '#submitroll', function (e) {
e.preventDefault();
var dieRoll = $("#dieresult")
.val();
$.mobile.changePage('valuedresult.html', {
data: {
arg1: dieRoll
}
});
});
</script>
</head>
<body>
<div data-role="page" id="valued" data-theme='a'>
<div data-role="header" data-header-theme='a'>
<a data-icon="back" data-rel="back" back-btn="true">Back</a>
<h1>Value</h1>
<a data-icon="home" href="index.html" data-iconpos="notext">Home</a>
</div>
<div data-role="content" data-theme='a'>
<form id="rollform">
<select id="dieresult" name="dieresult">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
Submit
</form>
</div>
</body>
</html>
valuedresult.html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Value Result</title>
</head>
<body>
<div data-role="page" id="valueresult" data-theme='a'>
<div data-role="header" data-header-theme='a'>
<a data-icon="back" data-rel="back" back-btn="true">Back</a>
<h1>Value Result</h1>
<a data-icon="home" href="index.html" data-iconpos="notext">Home</a>
</div>
<div data-role="content" data-theme='a'>
<div id="results">Result: <span></span>
</div>
<!-- results -->
</div>
<script>
$(document)
.one('pageshow', '#valueresult', function (event) {
var parameters = $(this)
.data("url")
.split("?")[1];
parameter = parameters.replace("arg1=", "");
$("#results span")
.html(parameter);
});
</script>
</div>
</body>
</html>
I hope that helps.
Has anyone ever run into the problem of not neing able to type in spaces when using a text input type in jquery-mobile
Code:
<!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">
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.css"/>
<link rel="stylesheet" type="text/css" href="mobile-css.css"/>
</head>
<body>
<div data-role="dialog" data-theme="d">
<div data-role="header" data-theme="d"><h5 style="margin: 0.6em 10% 0.5em;">Comment</h5></div>
<div id="" data-role="content" data-theme="d">
<label for="txtComment">Your Comment:</label>
<input type="text" id="txtComment" data-theme="d">
</div>
<div data-role="footer" data-theme="d">
<a href="#" data-role="button" data-mini="true" data-inline="true" data-transition="fade"
class="cancelButton" data-theme="c" data-rel="back">Cancel</a>
Save
</div>
</div>
</body>
</html>
Try this simple example (tested on iPhone 5), which uses the latest version of jQuery Mobile at the moment (1.2.0), and let me know if this works:
<html>
<head>
<meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no' />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>HEADER</h1>
</div>
<div data-role="content">
<h1>my content</h1>
<input type="text"/>
<a data-role="button" href="#mydialog" data-rel="dialog">OPEN DIALOG</a>
</div>
<div data-role="footer" data-position="fixed">
<h1>FOOTER</h1>
</div>
</div>
<!-- YOUR DIALOG -->
<div data-role="dialog" data-theme="d" id="mydialog">
<div data-role="header" data-theme="d">
<h5 style="margin: 0.6em 10% 0.5em;">Comment</h5>
</div>
<div id="" data-role="content" data-theme="d">
<label for="txtComment">Your Comment:</label>
<input type="text" id="txtComment" data-theme="d">
</div>
<div data-role="footer" data-theme="d">
<a href="#" data-role="button" data-mini="true" data-inline="true" data-transition="fade"
class="cancelButton" data-theme="c" data-rel="back">Cancel</a>
Save
</div>
</div>
</body>
</html>
You should get the following:
Try typing spaces in the input textbox:
Then, click on the button OPEN DIALOG, which will lead you to your dialog box (the code you provided), and try inputting spaces inside the dialog's input textbox:
I hope this will work for you. Anyway, let me know about your results mate.
jQuery 1.7.1 and jQuery Mobile 1.1.0RC1
Hello, I have a JQM radio button on my site and am programmatically changing its value based on a condition I'm checking on pageshow. Everything works fine, but it isn't happening very "smoothly," by which I mean that it is very visible to the user when it changes i.e. it's in its original state for half a second or so and then switches. Maybe I'm being a little picky, but I'd like the switch to be transparent to the user. I'm still trying to understand the various JQM "page*" events and thought if I did it on pagebeforeshow or pagebeforecreate it would make that happen, but that is not the case.
I've tried to do a jsFiddle for it (my first time), it's happening pretty instantaneously there (maybe something to do with my selection of onDomReady in the options?) but should give you an idea of what I'm talking about ... on my site the selection is very obviously in the Off state for a moment when the page loads and then switches over to On. It's not really a big deal, I'm asking more to help my understanding of the various page* events.
http://jsfiddle.net/pdjeU/
More info:
The web app is basically a document browser, constructed like so: the index.html files contains a list of the documents, or rather a list of links to the TOCs of the available documents. Each of these TOCs contains links to the sections of the actual document.
The code is as follows ... It's probably riddled with bad style since I'm a beginner. The code for my radio button issue is in lines 30-39 of custom2.js and 23-28 of ch2-sec1.html. Also, note that the console.log($("link[href$='styleDay.css']").length); line of code in custom2.js prints out "2" when the stylesheet ends with styleDay.css, and I have no idea why (I expect it to be "1"). My main problem, though, is that there is a noticeable lag when browsing through the content files (e.g. ch2-sec1.html as shown below) and the code flips the radio button to "Day Mode" when the condition is true ... can't this be coded so that it's already flipped by the time the page becomes visible?
root/index.html ...
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="Style/styleNight.css" />
<link rel="stylesheet" type="text/css" href="Style/jquery.mobile.simpledialog.min.css" />
<script type="text/javascript" src="JS/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="JS/jquery.mobile-1.1.0-rc.1.min.js"> </script>
<script type="text/javascript" src="JS/jquery.mobile.simpledialog2.min.js"> </script>
<script type="text/javascript" src="JS/custom2.js"> </script>
</head>
<body>
<div data-role="page" data-theme="b" id="main">
<div data-role="header">
<div style="float:left; width:20%">
<a id="openOptions" href="#" data-role="button" data-icon="gear">Settings</a>
</div>
<div style="float:left; width:60%; text-align:center; padding-top:5px">
<h2>DOCUMENT LIST</h2>
</div>
<div style="float:left; width:20%">
<a id="openSearch" href="#" data-role="button" data-icon="search" data-iconpos="right">Search</a>
</div>
</div>
<!-- /header -->
<div data-role="content" style="clear:both">
<div data-role="controlgroup">
Document 1
Document 2
Document 3
Document 4
Document 5
</div>
</div>
<!-- /content -->
</div>
<!-- /page -->
</body>
</head>
root/doc1-toc.html ...
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="Style/ftidStyleNight.css"/>
<script type="text/javascript" src="JS/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="JS/jquery.mobile-1.1.0-rc.1.min.js"> </script>
<script type="text/javascript" src="JS/custom2.js"> </script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" style="position:relative">
<div style="float:left">Home</div>
<h1>Document 1 TOC</h1>
</div>
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="true">
<h3>
<font color="white">Chapter 1</font>
</h3>
<ul data-role="listview" data-theme="c">
<li>Chapter 1 Section 1</li>
</ul>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>
<font color="white">Chapter 2</font>
</h3>
<ul data-role="listview" data-theme="c">
<li>Chapter 2 Section 1</li>
<li>Chapter 2 Section 2</li>
<li>Chapter 2 Section 3</li>
<li>Chapter 2 Section 4</li>
</div>
</div>
</div>
</div>
</body>
</html>
root/HTML/ch2-sec1.html ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="../Style/styleNight.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="../js/jquery.mobile-1.1.0-rc.1.min.js"> </script>
<script type="text/javascript" src="../js/custom1.js"> </script>
<script type="text/javascript" src="../js/custom2.js"> </script>
</head>
<body>
<div data-role="page" id="doc1-ch2-sec1">
<div id="header" data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
<div id="optionsDiv">
<div style="float:left; width:25%; text-align:left">
Home
Previous
</div>
<div style="float:left; width:50%">
<div class="containing-element">
<fieldset data-role="controlgroup" data-type="horizontal" id="day-night">
<input type="radio" name="radio-choice-1" id="day" value="../Style/styleDay.css" data-theme="b"/>
<label for="day">Day Mode</label>
<input type="radio" name="radio-choice-1" id="night" value="../Style/styleNight.css" checked="checked" data-theme="b"/>
<label for="night">Night Mode</label>
</fieldset>
</div>
</div>
<div style="float:left; width:25%; text-align:right">
TOC
Next
</div>
</div>
</div>
<!-- Main content from legacy data source ->
</div>
</body>
</html>
root/JS/custom2.js ...
$("#main").live("pageinit",function(){
$('<div>').simpledialog2({
mode: 'blank',
animate:false,
top:10,
left:10,
themeDialog:'a',
headerText: false,
headerClose: false,
blankContent :
"<span>Active Checklists: </span><select name='slider' id='flip-b' data-role='slider' data-mini='true' data-theme='a'><option value='off'>Off</option><option value='on'>On</option></select>"+
"<a rel='close' data-role='button' data-theme='b' style='color:white' href='#'>Cancel</a>"
});
});
$(document).on('click', '#openSearch', function() {
$('<div>').simpledialog2({
mode: 'blank',
themeDialog:'a',
animate:false,
top:10,
left:'60%',
headerText: false,
headerClose: false,
blankContent :
"<input type='search' name='search' id='searc-basic' value='' placeholder='Under Construction ...' disabled='disabled' data-mini='true' data-theme='c' />"+
"<a rel='close' data-role='button' style='color:white' href='#' data-theme='b'>Cancel</a>"
});
});
});
$("div[data-role='page']").live("pageshow",function(){
console.log($("link[href$='styleDay.css']").length);
if ($("link[href$='styleDay.css']").length > 0){
$("#day").attr("checked",true).checkboxradio("refresh");
$("#night").removeAttr("checked").checkboxradio("refresh");
}
$("input[name='radio-choice-1']").on('change mousedown',function(event) {
$("link").attr("href",$("input[checked][name='radio-choice-1']").val());
});
});
To get the value of checked radio button I use something like this
$('input:radio[name=rbutton]:checked').val()
This work well until I upgrade the version of jQuery Mobile from 1.0 to 1.1 rc1, then i could not get the value anymore, i just get "undefined"
I dont understand why something basic like this does not work for a change of JQM lib..
I paste and example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test radio button</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script>
$(document).delegate("#test", "pageinit", function(event) {
$("button.select").bind ( "click", function (e) {
// Get value of checked radio with JQM 1.0, but get "undefined" with JQM 1.1 RC
alert( $('input:radio[name=rbutton]:checked').val() );
});
$("input[type=radio]").bind ( "change", function (e) {
alert ($(this).val()); //OK
});
});
</script>
</head>
<body>
<div data-role="page" id="test" >
<div data-role="content">
<fieldset data-role="controlgroup">
<input type="radio" name="rbutton" id="rbutton1" value="1" />
<label for="rbutton1">Option 1</label>
<input type="radio" name="rbutton" id="rbutton2" value="2" />
<label for="rbutton2">Option 2</label>
</fieldset>
<button class="select">selected</button>
</div> <!-- /content -->
</div><!-- /page -->
</body>
</html>
This was a bug and is now fixed:
https://github.com/jquery/jquery-mobile/issues/3687#issuecomment-4251371