Difference between revisions of "JQuery-Mobile"

Revision as of 19:06, 4 March 2013

docs

Jquery-Mobile questions

on styling

http://blog.dkferguson.com/index.cfm/2011/3/15/jQuery-Mobile-styling-loaded-content

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>

@@ Line 1: / Line 1: @@
 ===docs===
 *[http://jquerymobile.com/blog/2013/02/20/jquery-mobile-1-3-0-released/ main docs]
+*[http://api.jquerymobile.com/ api]
+*[http://view.jquerymobile.com/1.3.0/ demo ctr]
+*[http://view.jquerymobile.com/1.3.0/docs/intro/rwd.php (rwd) responsive web design]
 ===Jquery-Mobile questions===

Anonymous

Search