Changing an element with Jquery like .attr("data-iconpos","...") is indeed performed, as can be seen inspecting the element.
However, it has no effect on the page rendering, which puzzles me (I was expecting the behaviour described in http://demos.jquerymobile.com/1.2.1/docs/buttons/buttons-icons.html).
Tested with :
Chrome Version 39.0.2171.95 m
Firefox 34.0.5
IE 11.0.9600
Why is that ? (thanks for alternative solution, still my question is why does page rendering fails ? : I am interested to know if I missed something about Jquery).
I made a code sample available at http://akelai.fr/iconpos.html
Here is the code :
<!doctype html>
<html>
<head>
<title>test iconpos</title>
<meta charset="UTF-8">
<meta name="viewport" width="device-width" content="initial-scale=1 maximum-scale=1 user-scalable=no" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).ready(function() {
$(window).resize(function() {
windowResize();
});
function windowResize() {
var width = $(window).width();
if (width < 900) {
$("#me").attr("data-iconpos", "left");
} else {
$("#me").attr("data-iconpos", "right");
}
}
}); //
</script>
</head>
<body id="theBody">
<div data-role="page" id="board" data-theme="b">
<div data-role="header" data-position="horizontal">
<h1>test changing iconpos</h1>
</div>
<div data-role="footer" class="ui-btn">
<input type="button" id="me" data-icon="grid" value="Is icon on my left (width < 900px) or my right (width > 900px)">
</div>
</div>
</body>
</html>
Try to change the class of your button:
if (width < 900) {
$("#me").removeClass("ui-btn-icon-right").addClass("ui-btn-icon-left");
} else {
$("#me").removeClass("ui-btn-icon-left").addClass("ui-btn-icon-right");
}
UPDATE: as #Tasos noticed, it must be done on the parent instead of the button itself:
if (width < 900) {
$("#me").parent().removeClass("ui-btn-icon-right").addClass("ui-btn-icon-left");
} else {
$("#me").parent().removeClass("ui-btn-icon-left").addClass("ui-btn-icon-right");
}
UPDATE 2: A third, simpler option:
if (width < 900) {
$("#me").button("option", "iconpos", "left");
} else {
$("#me").button("option", "iconpos", "right");
}
Related
I create a App which Phonegap on IOS, where I need to play sounds for specified actions.
To play the sound from a url works fine, but not from a local source. I tried different things.
Here is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="msapplication-tap-highlight" content="no"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/sisMedia.css"/>
<link rel="stylesheet" href="css/sisMedia_custom.css"/>
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css"/>
<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="js/jqm_custom.js"></script>
<script src="js/jquery-validation/jquery.validate.min.js"></script>
<title>Einlasskontrolle</title>
</head>
<body>
<div data-role="header" id="header" data-position="fixed" data-theme="a">
<h1>Audiotest</h1>
</div><!-- /header -->
<div data-role="page" data-title="Einlasskontrolle">
<div role="main" class="ui-content">
<button onclick="playAudio('audio/ok.mp3')">Play</button>
<button onclick="playAudio('audio/ok.mp3',true)">Play</button>
<button onclick="playAudio('https://test.sistecs.de/sismedia/files/admin/downloads/ok.mp3')">Play</button>
<script>
function playAudio(src, absolute) {
if (absolute == true) {
src = getPhoneGapPath() + src;
}
if (device.platform == 'Android') {
src = 'file://' + src;
}
var media = new Media(src, success, error_error);
media.play();
}
function success() {
// ignore
}
function error_error(e) {
alert('error ' + e.message);
}
function getPhoneGapPath() {
var path = window.location.pathname;
var sizefilename = path.length - (path.lastIndexOf("/") + 1);
path = path.substr(path, path.length - sizefilename);
return path;
}
</script>
</div>
</div>
<div data-role="footer" id="footer" data-theme="b" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Scan</li>
<li>Setup</li>
</ul>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
Can you help me?
I'm currently building a mobile site for iPad using jquery mobile and ASP.NET MVC 4. I have a dynamically created listview that is displaying search results. I want the user to be able to click on an item in the listview and have the text from that particular list item appear in a textbox that is also in the view.
I can get this to work in Safari on my desktop machine, but it will not work on an iPad.
For the sake of simplicity and to attempt to narrow down the problem, I hard-coded a simple little listview in my View. The results were the same. Works on desktop in Safari, but not on iPad.
Here is the very simplified VIEW code that works in Safari on desktop (Please note that _Header is a separate, partial View):
#section Header
{
<script type="text/javascript">
$('#testJs li').on('click', (function () {
var results = $.trim($(this).text());
$('#testText').val(results);
}));
</script>
#{ Html.RenderPartial("_Header"); }
}
#section Content
{
<input type="text" id="testText">
<ul id="testJs" data-role="listview" data-inset="true" data-theme="c">
<li id="task400" class="tasks">Test task 400</li>
<li id="task295" class="tasks">Test task 295</li>
</ul>
}
Please note that I have tried changing 'click' to 'tap' (see below) with no success. It still doesn't work on iPad.
<script type="text/javascript">
$('#testJs li').on('tap', (function () {
var results = $.trim($(this).text());
$('#testText').val(results);
}));
</script>
I've also tried using the following with the same results. Still doesn't work on the iPad.
<script type="text/javascript">
$('#testJs').delegate('li', 'tap', function () {
var results = $.trim($(this).text());
$('#testText').val(results);
});
</script>
I do wonder if this has something to do with our use of layout pages. We have slightly different layout pages, depending on if the site is being rendered on a mobile device or not.
Mobile Layout View:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
#Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
#Scripts.Render("~/bundles/modernizr")
#Styles.Render("~/Content/mobileCss", "~/Content/css")
<script type="text/javascript">
$(document).ready(function () {
$.mobile.ajaxEnabled = false;
});
</script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
#if (IsSectionDefined("Header")) {
#RenderSection("Header", false) }
else { <h1>#ViewBag.Title</h1> }
</div>
<div data-role="content">
#RenderSection("Content")
</div>
</div>
</body>
</html>
Desktop Layout View:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
#Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
#Scripts.Render("~/bundles/modernizr")
#Styles.Render("~/Content/mobilecss", "~/Content/css")
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
#if (IsSectionDefined("Header")) {
#RenderSection("Header") }
else { <h1>#ViewBag.Title</h1> }
</div>
<div data-role="content">
#RenderSection("Content")
</div>
</div>
</body>
</html>
I've been stuck on this for a few days, so any help would be appreciated. Everything I try works on my desktop, but not on an iPad - which is where I actually need it to function.
Thanks!
Did you try using bind on your testJs li? I'd bind a tapHandler like below:
<script>
$(function(){
$( "#testJs li" ).bind( "tap", tHandler );
function tHandler( event ){
var results = $.trim($(this).text());
$("#testText").val(results);
}
});
</script>
or with on like this should work:
$('#testJs').on('tap', 'li', function (event) {
var results = $.trim($(this).text());
$("#testText").val(results);
console.log('this should work')
}
Also used double quotes on top example but that shouldn't make a difference I don't think. If it doesn't then make sure you .js references are correct, and use firebug in firefox to debug for any straggling errors.
I'm want to run a self created function and then when true run a jQuery Mobile PopUp, but don't know how?
Here is what I think I should do:
$(document).ready(function() {
var finished = false;
$("#mytest").click(function() {
// RUN MY FUNCTION AND THE IF TRUE RUN POPUP
if(finished == true){
// ACTIVATE JQUERY MOBILE POPUP FUNCTION
}
});
});
I then should activate mytest function like this:
<a style="height: 75px;" href="" data-rel="popup" data-role="button" id="mytest">Test</a>
Nothing seems to happen though? I don't seem to get inside the mytest function? And when I do get in, how do I activate the popup function?
Hoping for help :-)
see working example: finished == true and finished == false: click the button and see what happens...
1) finished == true: the popup opens automatically
2) finished == false: I used return false to prevent opening the popup
script:
$(document).bind('pageinit', function() {
$("#mytest").click(function() {
var finished = false;
// RUN MY FUNCTION AND THEN IF TRUE RUN POPUP (WILL OPEN AUTOMATICALLY)
if(finished == false){
// PREVENT OPENING POPUP
return false;
}
});
});
complete example:
<html>
<head>
<meta charset="utf-8">
<title>popup</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.2.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" id="myPage">
<div data-role="content">
<h1>Popup</h1>
<a style="height: 75px;" href="#eat" data-rel="popup" data-role="button" id="mytest">Test</a>
</div>
<section data-role="popup" data-overlay-theme="a" id="eat">
Are you sure you want to eat?
</section>
<script>
$(document).bind('pageinit', function() {
$("#mytest").click(function() {
var finished = false;
// RUN MY FUNCTION AND THEN IF TRUE RUN POPUP (WILL OPEN AUTOMATICALLY)
if(finished == false){
// PREVENT OPENING POPUP
return false;
}
});
});
</script>
</div>
</body>
</html>
Try this!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>popup</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$().ready(function () {
$(document).bind('pageinit', function () {
$("#mytest").click(function () {
var finished = false;
// RUN MY FUNCTION AND THEN IF TRUE RUN POPUP (WILL OPEN AUTOMATICALLY)
if (finished == false) {
// PREVENT OPENING POPUP
return false;
}
});
});
});
</script>
</head>
<body>
<div data-role="page" id="myPage">
<div data-role="content">
<h1>Popup</h1>
<a style="height: 75px;" href="#eat" data-rel="popup" data-role="button" id="mytest">Test</a>
</div>
<div data-role="popup" id="eat" data-theme="c" data-overlay-theme="c">
Eat Something
</div>
</div>
</body>
</html>
I am tryign to implement a random answer on a page loaded via an ajax call. I am using jquery mobile inclusive layout. Therefore I added a simple java script in the div data-roll container and initialized it via $(document).live or $(document).on or $(document).bind, like it should be according to many answers or suggestions here. Everything works fine, when I use a normal alert function. Like this
<script>
$(document).live('pageinit', "#answerPage", function (event) {
alert("Page Initialized");
});
</script>
Also my script works fine, when I add it to a normal html page.
So when I instead using an alert I use function getanswer() it doesn`t work. What do I do wrong here? Thanks for your help.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="answerPage" data-theme="b" data-add-back-btn="true">
<script>
$(document).on("pageinit", "#answerPage", function(event) {
function getanswer() {
var r_text = new Array ();
r_text[0] = "A";
r_text[1] = "B";
r_text[2] = "C";
r_text[3] = "D";
r_text[4] = "E";
r_text[5] = "F";
r_text[6] = "G";
var i = Math.floor(7*Math.random());
document.getElementById("ShowAnswer").innerHTML = r_text[i];
};
});
</script>
<div data-role="header" data-position="fixed" data-theme="b">
<div id="ShowAnswer"> </div>
</div>
</div>
</body>
</html>
you forgot to call your function getanswer()...
see working example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<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.2.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" id="answerPage" data-theme="b" data-add-back-btn="true">
<div data-role="header" data-position="fixed" data-theme="b">
<div id="ShowAnswer"></div>
</div>
</div>
<script>
$(document).on("pageinit", "#answerPage", function(event) {
getanswer();
});
function getanswer() {
var r_text = new Array ();
r_text[0] = "A";
r_text[1] = "B";
r_text[2] = "C";
r_text[3] = "D";
r_text[4] = "E";
r_text[5] = "F";
r_text[6] = "G";
var i = Math.floor(7*Math.random());
document.getElementById("ShowAnswer").innerHTML = r_text[i];
};
</script>
</body>
</html>
I am trying to attach onBlur and onFocus handler to a SSN input field. However, I am seeing an error saying object has no method 'ON'. The code is at http://jsfiddle.net/H4Q5f/
As you can see, I commented out to figure out the details, however had no luck so far. Any help is appreciated. For convenience, here is the code:
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Page</title>
<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" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.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/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="../../appjavascript/ssa/mkwr/mytest.js"></script>
</head>
<body>
<div data-role="page" id="MyTestPage">
<div data-role="header" data-position="fixed" data-logo="true" data-tap-toggle="false" data-fullscreen="false" >
<h1> Page Title </h1>
</div>
<div data-role="content">
<div class="content-primary divcontent">
<h1 class='h1title'>Using This App</h1>
<p> Here are the instructions </a>
</p>
</div>
<div class="inputdata">
<br /> <br />
<input type="text" name="accessCode" id="AccessCode" value="" placeholder="Access Code:" /> <br />
<input type="text" id="ssn1" class="ssn" value="" placeholder="SSN1:" /> <br />
<input type="text" id="ssn2" class="ssn" value="" placeholder="SSN2:" /> <br />
</div>
<input type="button" id="myalert" value="Next" />
</div>
<!-- /content -->
</body>
</html>
And here is the java script
if (typeof TEST == "undefined" || !TEST) {
var TEST = {};
}
( function() {
TEST.mkwr = {
init : function() { // this is a public function
$("[data-role='page']").on("pagebeforeshow", TEST.mkwr.hideError());
$("[data-role='page']").on("pageshow", TEST.mkwr.setHandlers());
},
// On Blur, we need to add the '-'s if they doesn't exist so the user
// view edit the entered value formatted
ssnOnBlurHandler : function(input) { // Auto format SSN on blur
if ($(input).val().length == 9) {
var _ssn = $(input).val();
var _ssnSegmentA = _ssn.substring(0, 3);
var _ssnSegmentB = _ssn.substring(3, 5);
var _ssnSegmentC = _ssn.substring(5, 9);
$(input).val(
_ssnSegmentA + "-" + _ssnSegmentB + "-" + _ssnSegmentC);
}
}, // _ssnOnBlurHandler
// On focus, we need to remove the '-'s if they exist so the user
// can edit the entered value
ssnOnFocusHandler : function(input) {
// allow backspace, tab, delete, arrows, numbers and keypad numbers ONLY
if ($(input).val().length == 11) {
var _ssn = $(input).val();
var _ssnSegmentA = _ssn.substring(0, 3);
var _ssnSegmentB = _ssn.substring(4, 6);
var _ssnSegmentC = _ssn.substring(7, 11);
$(input).val(_ssnSegmentA + _ssnSegmentB + _ssnSegmentC);
}
}, // _ssnOnFocusHandler
// Hide all errors
hideError : function() {
$(".error").hide(); // Hide all errors
},
setHandlers : function() {
alert("Set Handlers");
// $(".ssn").each( function() {
// var input = this; input.blur(TEST.mkwr.ssnOnBlurHandler(input))
// });
// $(".ssn").each( function() {
// var input = this; input.focus(TEST.mkwr.ssnOnFocusHandler(input))
// });
}
};
})(); // end the anonymous function
$("[data-role='page']").bind("pageinit", TEST.mkwr.init());
I found a couple of issues with the code on the jsfiddle. Here is an updated one that is working to fire handlers and parse code. It looks like your ssn logic might need to be fixed a little but everything is getting you to there.
http://jsfiddle.net/H4Q5f/10/
The problems I saw were partly what was mentioned before you were using .on instead of .bind given the jquery version. But also you were not setting your handlers but rather firing your handlers. You had this:
input.bind("blur",TEST.mkwr.ssnOnBlurHandler(input))
which would return the result of the function to the set method which is not what you were looking for. So I changed it to this:
input.bind("blur",TEST.mkwr.ssnOnBlurHandler)
So now you are passing the handler to the set method so that it will fire when the event takes place.
Hope this makes sense.
The .on() function was introduced in jQuery 1.7. The code you've posted above includes jQuery 1.6.4 (<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>), which doesn't have that function. You can either upgrade to the latest version of jQuery (recommended) or use the equivalent function - .bind() - for the older versions.