JQuery-Mobile
From Wiki2
Revision as of 00:03, 4 February 2012 by Tim (talk | contribs) (→[javascript] [jquery-mobile] Why won't mailto include link parameters?)
Jquery-Mobile questions
[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
[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";
2:
var myCars=new Array("Saab","Volvo","BMW"); // condensed array
3:
var myCars=["Saab","Volvo","BMW"]; // literal array
ANSWER: [] or new Array()
[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>
