JQuery-Mobile
From Wiki2
Jquery-Mobile questions
Clear the application cache in chrome?
But watchout, developer tolls doesn't update.
ANS: close the page then goto chrome://appcache-internals/);
Turn Object into Array?
ANS: var arr = jQuery.makeArray(elems);
Sort Array?
var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.sort());
ANS: fruits.sort();
try them here http://jsfiddle.net/mckennatim
Refresh on attribute change?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
</head>
<body>
<div id="thelists" data-role="page">
<div data-role="header">
<a href="#" data-icon="back" id="get" data-role="button" >get</a>
<h2>TestPage</h2>
<a href="#" data-icon="home" id="change" data-role="button">change</a>
</div><!-- /header -->
<div data-role="content">
<ul id="list" class="current" data-split-icon="gear" data-role="listview" data-filter="false"></ul>
</div><!-- /content -->
</div><!-- /page -->
<script>
$('#get').click(function() {
for (i=1; i<6; i++){
$('#list').append('<li><a>list</a><a class="orig">items</a></li>');
}
$('#list').listview('refresh');
return false;
});
$('#change').click(function() {
console.log($('ul').attr('data-split-icon'));
$('#list').attr('data-split-icon', 'info'); //jqmData doesn't work either
console.log($('ul').attr('data-split-icon'));
//$('#list').listview();
//$('#list').listview('refresh');
$('#thelists').trigger('create');
$('#thelists').trigger('pagecreate');
$('#list').listview();
$('#list').listview('refresh');
return false;
});
$('#change').click(function() {
console.log($('ul').attr('data-split-icon'));
$('#list').attr('data-split-icon', 'info'); //jqmData doesn't work either
console.log($('ul').attr('data-split-icon'));
$("[data-icon=gear]").each(function() {
var $this = $(this);
$this.attr('data-icon','info');
$this.children().children().removeClass('ui-icon-gear').addClass('ui-icon-info');
});
$('#list').listview('refresh',true);
return false;
});
</script>
</body>
</html>
ANS: you could hack the widget css shit as seen in tools-developer-elements
Removing appended html using jQuery?
ANS: jQuery('#main').empty();
In jquery-mobile how do you programmically add page elements that have all the css?
When this code runs you can see it doesn't render the programmatically added input field as a mobile styled element. I could force it to by adding all the classes that get put in when a page is rendered. Is there an easier way?
http://jsfiddle.net/mckennatim/KKTr4/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
</head>
<body>
<div id="thelists" data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<h3>Add List</h3>
<form>
<div data-role="controlgroup" id="addwhat">
<input type="text" name="inp0" class="inp" />
</div>
<div data-role="controlgroup" data-type="horizontal" class="aisubmit">
<input type="submit" data-theme="b" id="addinput" value="Add Input"/>
</div>
</form>
</div><!-- /content -->
</div><!-- /page -->
<script>
var ct =0;
$('body').on('click', "#addinput", function (e) {
ct++;
e.stopImmediatePropagation();
e.preventDefault();
//to add form elemnt you have to add all the class css stuff
//$('#addwhat').append('<input type="text" name="list' + ct + '" class="inp ui-input-text ui-body-c ui-corner-all ui-shadow-inset" />');
$('#addwhat').append('<input type="text" name="list' + ct + '"/>');
});
</script>
</body>
</html>
ANS: $('#thelists').trigger('create'); should do the trick.
[javascript] [jquery-mobile] Why won't mailto include link parameters?
When this code runs the alert box comes up with the link that includes &list=groceries and &email=tim@sitebuilt.net. When the mailto: fires and brings up the email window those parameters are missing and I can't figure out why. the length of the string doesn't seem to matter.
This code has all it needs to run. You can run it here: http://jsfiddle.net/mckennatim/rRerR/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
</head>
<body>
<div id="thelists" data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<h3>Add List</h3>
<form>
<div data-role="controlgroup" id="addwhat">
<input type="email" id="shemail" name="inp0" class="inp" />
</div>
<div data-role="controlgroup" data-type="horizontal" class="aisubmit">
<input type="submit" data-theme="b" id="mailit" value="mail it"/>
</div>
</form>
</div><!-- /content -->
</div><!-- /page -->
<script>
$('body').on('click', "#mailit", function (e) {
e.stopImmediatePropagation();
e.preventDefault();
repo = "Sebaza";
list = "groceries";
semail = $("#shemail").val();
//(semail);
urri ='mailto:'+ semail + '?subject=share this list with me' + '&cc=' + semail + '&body=Hi, I think it would be cool if we shared this ' + list +' list on our phones. That way when either of us modified it we would see the update. http://10.0.1.18/webeshoppin/stuff2get/www/food2buy.html?repo=' + repo + '&list=' + list + '&email=' + semail ;
window.location = urri;
alert('clicked ashare ' +urri);
});
</script>
</body>
</html>
ANSWER: encode ? -> %3F and & - > %26
[jqm] How can I grab the searchValue?
If no items match the searchValue I want to add that searchValue to a list.
My plan is to somehow monitor the when the visible matches goes to 0 then grab the value in the filter box.
Here is my test code (it has all it needs to run) I've got the callback function part wrong.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
<script>
$('#thelists').live('pageinit', function(event) {
$('body').on('click', "#getdata", function (e) {
e.stopImmediatePropagation();
e.preventDefault();
visib = $("#mylist li:visible").length;
console.log('list has ' + visib + ' elements left');
$("#mylist").listview('option', 'filterCallback', myFilterFunction);
});
function myFilterFunction( text, searchValue ){
console.log('Searching for ' + searchValue);
return text.toLowerCase().indexOf( searchValue ) === -1;
};
});
</script>
</head>
<body>
<div id="thelists" data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<a href="index.html" id="getdata" data-role="button">getSearchTxt</a>
<div class="content-primary">
<ul id="mylist" data-role="listview" data-filter="true">
<li><a href="index.html">Acura</a></li>
<li><a href="index.html">Audi</a></li>
<li><a href="index.html">Aukervile</a></li>
<li><a href="index.html">Auadillac</a></li>
<li><a href="index.html">Chrysler</a></li>
<li><a href="index.html">Dodge</a></li>
<li><a href="index.html">Ferrari</a></li>
<li><a href="index.html">Foraud</a></li>
<li><a href="index.html">GMC</a></li>
<li><a href="index.html">Honda</a></li>
<li><a href="index.html">Hyundai</a></li>
<li><a href="index.html">Infiniti</a></li>
<li><a href="index.html">Jeep</a></li>
<li><a href="index.html">Kia</a></li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
ANSWER: Detect the keyup event of the searchbox
$("input[data-type='search']").keyup(function() {
//$("input[data-type='search']").keyup(function() {
var optCount = $("#mylist > li:visible").size();
if(optCount < 1) {
alert('Value: '+$(this).val());
}
});
[jqm] How do you add an element programmatically with all the css?
ANSWER: Add all the classes to it that you see in developer tools elements.
See http://10.0.1.18/webeshoppin/stuff2get/zmisc/add2form.html
How do you access an element enclosing the active element?
will traverse upward and return the nearest selector provided. http://api.jquery.com/closest/
$("a.removerow").click(function(e){
$(this).closest('tr').hide();
e.preventDefault();
});
ANSWER: Use Query's closest(selector) function
[jqm] How do you force a refresh after a page move?
method1
location.href= 'food2buy.html?repo=' + rep + '&list=' + lis;
method2 (data-ajax="false")
$('#allyourlists').append('<li><a href="food2buy.html?repo=' + rep +
'&list=' + lis + '" data-ajax="false" >Repo: ' + rep + '& List: ' +
lis + '</a></li>');
ANSWER: use location.href or data-ajax="false"
Why doesn't the clich http://10.0.1.18/webeshoppin/stuff2get/zmisc/buttonnotfiring.html
arrays
http://www.hunlock.com/blogs/Mastering_Javascript_Arrays
[js] How do you set value of arrays?
var myCars=new Array(); // regular array (add an optional integer
myCars[0]="Saab"; // argument to control array's size)
myCars[1]="Volvo";
myCars[2]="BMW";
var myCars=new Array("Saab","Volvo","BMW"); // condensed array
var myCars=["Saab","Volvo","BMW"]; // literal array
ANSWER: [] or new Array() or myCars.push("XKE")
How do you search an array for a value?
ANS: use $.inArray()
How do you add key value to array?
ANS: a['name'] = 'oscar';
[jqm] Why is the button not firing?
http://10.0.1.18/webeshoppin/stuff2get/zmisc/buttonnotfiring2.html
this works
- BTW shoudn't use id for multiple items
<script>
//Why is delete button not firing?
$('#thelists').bind('pageinit', function(event) {
console.log('in bind pageinit for yourlists');
var thelists = ["list1", "list2"];
console.log(thelists);
$.each(thelists, function(index, alist) {
$('#allyourlists').append('<li><a href="index.html" data-role="button" id="delalist">List: ' + alist + '</a></li>');
});
$('#allyourlists').listview('refresh');
});
//gets the val of val1 from the previois call
$('body').on('click', "#delalist", function (e) {
e.stopImmediatePropagation();
e.preventDefault();
alert ('in delalist') ;
});
</script>
this doesn't
<script>
//Why is delete button not firing?
$('#thelists').bind('pageinit', function(event) {
console.log('in bind pageinit for yourlists');
var thelists = ["list1", "list2"];
console.log(thelists);
$.each(thelists, function(index, alist) {
$('#allyourlists').append('<li><a href="index.html" data-role="button" id="delalist">List: ' + alist + '</a></li>');
});
$('#allyourlists').listview('refresh');
});
//gets the val of val1 from the previois call
$("#delalist").click(function (e) {
e.stopImmediatePropagation();
e.preventDefault();
alert ('in delalist') ;
});
</script>
