jQuery Forum

I am using SPRY for creating a list from an xml file. On the desktop, everything works smooth. As soon the project gets compiled in phonegap, the list does not get rendered smooth on iPad 2 or iPhone 4 (both iOS 5.0.1).

Only the first part is visible. When I touch scroll, the next part of the list gets rendered (very slow). When I reach the end of the list and scroll up, the same happens again.

1. <ul data-role="listview" spry:region="species">
2. <li spry:repeat="species" spry:setrow="species"><a href="#details"><img class="ui-li-icon" src="include_css/images/{recommendation}icon.png">{common_name}</a></li>
3. </ul>

I don't understand what the problem could be. I think, it can't be a device memory problem. I mean, I am playing 3D ego shooter with a lot of graphic rendering on my iPad. Then, the device should not have a problem with rendering a list with 50 entries. right?

In the alpha version, i just changed in the JQM-Script

1. ajaxFormsEnabled:false

to disable ajax for the form. Looks like this function does not exist anymore in the current version. So, I was following the suggestion in the demo and added data-ajax="false" to the form tag. But looks like the form does not get handled correctly.

How can I disable ajax form handling in the current JQM version?

To prevent form submissions from being automatically handled with Ajax, add the data-ajax="false" attribute to the form element. You can also turn of Ajax form handling completely via the ajaxEnabled global config option.

The form below is identical to the one above except for the addition of the data-ajax="false" attribute attribute. When the submit button is pressed, it will result in a full page refresh.

I am planing to develop a native JQM/Phonegap app for watching mp4 clips which are stored on our web server.
The episode list with links to the teaser images, video descriptions, links to the mp4 clips and other details are stored and updated in an xml file on the web server as well.

Since there are cross-domain restrictions when it comes to parsing xml, I would need an "Update Episodes" button in my native application. Trigger the button should download the xml file from the web server and save it whithin the application directory on the mobile device. And of course, it should overwrite the old xml file.

Then, the application would parse the new xml file locally stored in the device.

Is this possible? And if yes, how to do that?

Remarks: 1. The app will be exclusively for iOS devices only. 2. Only the xml will be stored locally, The content will be streamed from the web server. 3. I know, it would be easier to just make a web application to solve the cross-domain problem. But I really want a native app.

I have no idea how to parse a detail page from json. Even I can create a detail page, I stuck with some functions. Since I am not a good coder, I would need help...

This is the json I've shorten for this post. Only the the entry with id:421:

1. var species = [{id:"421", recommendation:"A", common_name:"Abalone", source_wild:"1", source_aqua:"0"}];

With help of the JQchain script, I create a item list of all json entries (#species) and a detail page (#thedetails):

1.       $(function(){
2.              $("#species").items(species).chain();
3.              $("#thedetails").items({}).chain();
4.       });

followed by a filter for the list:

1. function filter()
2.       {
3.         $("#species").items("filter", $("#search").val());
4.       }

followed by a click event:

1. function speciesclick(event)
2.       {
3.         var element = (event.target.nodeName == "SPAN") ? event.target.parentNode : event.target;
4.         var reco = $(element).children("span.recommendation").text();
5.         var comm = $(element).children("span.common_name").text();
6.         var sowi = $(element).children("span.source_wild").text();
7.         var soaq = $(element).children("span.source_aqua").text();

followed by a replacer for the detail page:

1. $("#thedetails").item("replace", {common_name:comm, recommendation:reco}).chain();
2.       }

The filter function for the list is not important now, since the filter works perfectly. But here it is:

1.     <form>
2.         <ul class="edit rounded">
3.             <li><input id="search" type="search" name="search" onKeyUp="filter()" placeholder="Search" autocomplete="on"></input></li>
4.         </ul>
5.     </form>

Here the list element I use for my click event. This works so far too. At the moment, I display only "common_name" in my list. But I need to integrate the other details (hidden) because I need them later in the detail page:

1. <li><a onClick="speciesclick(event)" href="#details"><span style="display:none" class="recommendation"></span><span class="common_name"></span><span style="display:none" class="source_wild"></span><span style="display:none" class="source_aqua"></span></a></li>

Now my first problem. My script above creates pure text wrapped in <span>. But I need a dynamically created icon ("recommendation") before the span "common_name". It should look like this:

1. <li><a onClick="speciesclick(event)" href="#details"><img scr="images/icon{recommendation}.png"> <span class="common_name"></span><span style="display:none" class="source_wild"></span><span style="display:none" class="source_aqua"></span></a></li>

So, the browser should render "images/iconA.png" for the json example above. No clue how to code this. I think, var reco = $(element).children("span.recommendation").text(); is wrong for creating an icon dynamically. and also nodeName == "SPAN" can't be the right thing for an icon.

Now, what I have for my detail page:
<div id="thedetails">

1.       <ul>
2.       <li><span class="common_name"></span></li>
3.       </ul>
4.       </div>

This works so far. JQuery does parsing "common_name" correctly.

Problem number two: I also need the icon 'recommendation' infront of the <span>:
<li><img scr="images/icon{recommendation}.png"> <span class="common_name"></span></li>

Problem number three: In additon, I want to add more details from the json database. I try to explain in simple words what I would like to have:

1. IF JSON 'source_wild' = "1" THEN PARSE THIS:
2. <li><img scr="images/icon_wild.png"> Wild Caught Species</li>
3. END IF
4. IF JSON 'source_wild' = "0" THEN PARSE NOTHING

and also an other "ON/OFF SWITCH ":

1. IF JSON 'source_aqua' = "1" THEN PARSE THIS:
2. <li><img scr="images/icon_aqua.png"> Aquaculture Breed</li>
3. END IF
4. IF JSON 'source_aqua' = "0" THEN PARSE NOTHING

I really hope, somebody can help me with this. I know how to do it with SPRY, But my application becomes very slow, since the spry scripts are very big. I can also do it with PHP/MySQL. But the 'product' will be an offline native iPhone app. I really would love to have a json/jquery solution. – A Seafood Guide for WWF Singapore.

Thanks a lot for your support.

I just implemented the experimental scrollview in my app to fix the header.

On my iPhone4, scrolling is not smoov anymore when i use the scrollview function. On top of that, it triggers randomly links of my listview when I do a touch scroll. Lets say I am on the bottom of a list. I touch the screen where list item Z is and slide up to scroll. It starts scrolling. but when I release my finger, it triggers the link of list item Z. But it does not always happen. Removing scrollview and scrolling is nice again.

I am using following scripts:

jquery-1.6.2.min.js
jquery.mobile-1.0b2.min.js
jquery.easing.1.3.js
jquery.mobile.scrollview.js
scrollview.js

In addition, I am using spry scripts for generating the listview (Adobe Dreamweaver CS5.5)

When I build an run the application in lates iOS SDK with Phonegap, all JQM icons (like home icon) are displayed correctly, when I build the app for the iPhone simulator.

When I build and run it on my iPhone4, all icon images are messed. I have for example the "Star" in the home button instead the "House" icon. The images are also little bit shifted and not centred in the button. The link button in the listview is just a gray circle. - The arrow is missing.

That is kind of strange, since both builds are using the same CSS files.

[EDIT]
Stupid Me! upgraded the app with JQM Beta 2 and forgot to replace the icon png's (icon-18-black.png...)

Hi

I am using a jquery script (simple date picker). But I would like to change the output format of the date. I am a js dummy but managed to rearange Day Month and Year in this part of the script:

1. jQuery.fn.simpleDatepicker.formatOutput = function (dateObj) {
           return  dateObj.getDate() + "/" + (dateObj.getMonth() + 1) + "/" + dateObj.getFullYear();
       };

Now, my output is for example 9-1-2011 (d-m-yyyy)
But I need leading zeros for date and month: 09-01-2011 (dd-mm-yyyy)

I am using this date format in a form which generates a csv file. This csv is later used for import in a crm. So, it goes in a mysql database at the end.

Does the date in the mysql database need leading zeros or can it be in d-m-yyyy format? if not, I let my script like it is now.

Thanks for clarification


Here the whole script:

1. /**
       the script only works on "input [type=text]"
   
   **/
   
   // don't declare anything out here in the global namespace
   
   (function($) { // create private scope (inside you can use $ instead of jQuery)
   
       // functions and vars declared here are effectively 'singletons'.  there will be only a single
       // instance of them.  so this is a good place to declare any immutable items or stateless
       // functions.  for example:
   
       var today = new Date(); // used in defaults
       var months = 'January,February,March,April,May,June,July,August,September,October,November,December'.split(',');
       var monthlengths = '31,28,31,30,31,30,31,31,30,31,30,31'.split(',');
         var dateRegEx = /^\d{1,2}\/\d{1,2}\/\d{2}|\d{4}$/;
       var yearRegEx = /^\d{4,4}$/;
   
       // next, declare the plugin function
       $.fn.simpleDatepicker = function(options) {
   
           // functions and vars declared here are created each time your plugn function is invoked
   
           // you could probably refactor your 'build', 'load_month', etc, functions to be passed
           // the DOM element from below
   
           var opts = jQuery.extend({}, jQuery.fn.simpleDatepicker.defaults, options);
          
           // replaces a date string with a date object in opts.startdate and opts.enddate, if one exists
           // populates two new properties with a ready-to-use year: opts.startyear and opts.endyear
          
           setupYearRange();
           /** extracts and setup a valid year range from the opts object **/
           function setupYearRange () {
              
               var startyear, endyear; 
               if (opts.startdate.constructor == Date) {
                   startyear = opts.startdate.getFullYear();
               } else if (opts.startdate) {
                   if (yearRegEx.test(opts.startdate)) {
                   startyear = opts.startdate;
                   } else if (dateRegEx.test(opts.startdate)) {
                       opts.startdate = new Date(opts.startdate);
                       startyear = opts.startdate.getFullYear();
                   } else {
                   startyear = today.getFullYear();
                   }
               } else {
                   startyear = today.getFullYear();
               }
               opts.startyear = startyear;
              
               if (opts.enddate.constructor == Date) {
                   endyear = opts.enddate.getFullYear();
               } else if (opts.enddate) {
                   if (yearRegEx.test(opts.enddate)) {
                       endyear = opts.enddate;
                   } else if (dateRegEx.test(opts.enddate)) {
                       opts.enddate = new Date(opts.enddate);
                       endyear = opts.enddate.getFullYear();
                   } else {
                       endyear = today.getFullYear();
                   }
               } else {
                   endyear = today.getFullYear();
               }
               opts.endyear = endyear;   
           }
          
           /** HTML factory for the actual datepicker table element **/
           // has to read the year range so it can setup the correct years in our HTML <select>
           function newDatepickerHTML () {
              
               var years = [];
              
               // process year range into an array
               for (var i = 0; i <= opts.endyear - opts.startyear; i ++) years[i] = opts.startyear + i;
      
               // build the table structure
               var table = jQuery('<table class="datepicker" cellpadding="0" cellspacing="0"></table>');
               table.append('<thead></thead>');
               table.append('<tfoot></tfoot>');
               table.append('<tbody></tbody>');
              
                   // month select field
                   var monthselect = '<select name="month">';
                   for (var i in months) monthselect += '<option value="'+i+'">'+months[i]+'</option>';
                   monthselect += '</select>';
              
                   // year select field
                   var yearselect = '<select name="year">';
                   for (var i in years) yearselect += '<option>'+years[i]+'</option>';
                   yearselect += '</select>';
              
               jQuery("thead",table).append('<tr class="controls"><th colspan="7"><span class="prevMonth">&laquo;</span>&nbsp;'+monthselect+yearselect+'&nbsp;<span class="nextMonth">&raquo;</span></th></tr>');
               jQuery("thead",table).append('<tr class="days"><th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th></tr>');
               jQuery("tfoot",table).append('<tr><td colspan="2"><span class="today">today</span></td><td colspan="3">&nbsp;</td><td colspan="2"><span class="close">close</span></td></tr>');
               for (var i = 0; i < 6; i++) jQuery("tbody",table).append('<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>');   
               return table;
           }
          
           /** get the real position of the input (well, anything really) **/
           //http://www.quirksmode.org/js/findpos.html
           function findPosition (obj) {
               var curleft = curtop = 0;
               if (obj.offsetParent) {
                   do {
                       curleft += obj.offsetLeft;
                       curtop += obj.offsetTop;
                   } while (obj = obj.offsetParent);
                   return [curleft,curtop];
               } else {
                   return false;
               }
           }
          
           /** load the initial date and handle all date-navigation **/
           // initial calendar load (e is null)
           // prevMonth & nextMonth buttons
           // onchange for the select fields
           function loadMonth (e, el, datepicker, chosendate) {
              
               // reference our years for the nextMonth and prevMonth buttons
               var mo = jQuery("select[name=month]", datepicker).get(0).selectedIndex;
               var yr = jQuery("select[name=year]", datepicker).get(0).selectedIndex;
               var yrs = jQuery("select[name=year] option", datepicker).get().length;
              
               // first try to process buttons that may change the month we're on
               if (e && jQuery(e.target).hasClass('prevMonth')) {               
                   if (0 == mo && yr) {
                       yr -= 1; mo = 11;
                       jQuery("select[name=month]", datepicker).get(0).selectedIndex = 11;
                       jQuery("select[name=year]", datepicker).get(0).selectedIndex = yr;
                   } else {
                       mo -= 1;
                       jQuery("select[name=month]", datepicker).get(0).selectedIndex = mo;
                   }
               } else if (e && jQuery(e.target).hasClass('nextMonth')) {
                   if (11 == mo && yr + 1 < yrs) {
                       yr += 1; mo = 0;
                       jQuery("select[name=month]", datepicker).get(0).selectedIndex = 0;
                       jQuery("select[name=year]", datepicker).get(0).selectedIndex = yr;
                   } else {
                       mo += 1;
                       jQuery("select[name=month]", datepicker).get(0).selectedIndex = mo;
                   }
               }
              
               // maybe hide buttons
               if (0 == mo && !yr) jQuery("span.prevMonth", datepicker).hide();
               else jQuery("span.prevMonth", datepicker).show();
               if (yr + 1 == yrs && 11 == mo) jQuery("span.nextMonth", datepicker).hide();
               else jQuery("span.nextMonth", datepicker).show();
              
               // clear the old cells
               var cells = jQuery("tbody td", datepicker).unbind().empty().removeClass('date');
              
               // figure out what month and year to load
               var m = jQuery("select[name=month]", datepicker).val();
               var y = jQuery("select[name=year]", datepicker).val();
               var d = new Date(y, m, 1);
               var startindex = d.getDay();
               var numdays = monthlengths[m];
              
               // http://en.wikipedia.org/wiki/Leap_year
               if (1 == m && ((y%4 == 0 && y%100 != 0) || y%400 == 0)) numdays = 29;
              
               // test for end dates (instead of just a year range)
               if (opts.startdate.constructor == Date) {
                   var startMonth = opts.startdate.getMonth();
                   var startDate = opts.startdate.getDate();
               }
               if (opts.enddate.constructor == Date) {
                   var endMonth = opts.enddate.getMonth();
                   var endDate = opts.enddate.getDate();
               }
              
               // walk through the index and populate each cell, binding events too
               for (var i = 0; i < numdays; i++) {
              
                   var cell = jQuery(cells.get(i+startindex)).removeClass('chosen');
                  
                   // test that the date falls within a range, if we have a range
                   if (
                       (yr || ((!startDate && !startMonth) || ((i+1 >= startDate && mo == startMonth) || mo > startMonth))) &&
                       (yr + 1 < yrs || ((!endDate && !endMonth) || ((i+1 <= endDate && mo == endMonth) || mo < endMonth)))) {
                  
                       cell
                           .text(i+1)
                           .addClass('date')
                           .hover(
                               function () { jQuery(this).addClass('over'); },
                               function () { jQuery(this).removeClass('over'); })
                           .click(function () {
                               var chosenDateObj = new Date(jQuery("select[name=year]", datepicker).val(), jQuery("select[name=month]", datepicker).val(), jQuery(this).text());
                               closeIt(el, datepicker, chosenDateObj);
                           });
                          
                       // highlight the previous chosen date
                       if (i+1 == chosendate.getDate() && m == chosendate.getMonth() && y == chosendate.getFullYear()) cell.addClass('chosen');
                   }
               }
           }
          
           /** closes the datepicker **/
           // sets the currently matched input element's value to the date, if one is available
           // remove the table element from the DOM
           // indicate that there is no datepicker for the currently matched input element
           function closeIt (el, datepicker, dateObj) {
               if (dateObj && dateObj.constructor == Date)
                   el.val(jQuery.fn.simpleDatepicker.formatOutput(dateObj));
               datepicker.remove();
               datepicker = null;
               jQuery.data(el.get(0), "simpleDatepicker", { hasDatepicker : false });
           }
   
           // iterate the matched nodeset
           return this.each(function() {
              
               // functions and vars declared here are created for each matched element. so if
               // your functions need to manage or access per-node state you can defined them
               // here and use $this to get at the DOM element
              
               if ( jQuery(this).is('input') && 'text' == jQuery(this).attr('type')) {
   
                   var datepicker;
                   jQuery.data(jQuery(this).get(0), "simpleDatepicker", { hasDatepicker : false });
                  
                   // open a datepicker on the click event
                   jQuery(this).click(function (ev) {
                                                
                       var $this = jQuery(ev.target);
                      
                       if (false == jQuery.data($this.get(0), "simpleDatepicker").hasDatepicker) {
                          
                           // store data telling us there is already a datepicker
                           jQuery.data($this.get(0), "simpleDatepicker", { hasDatepicker : true });
                          
                           // validate the form's initial content for a date
                           var initialDate = $this.val();
                          
                           if (initialDate && dateRegEx.test(initialDate)) {
                               var chosendate = new Date(initialDate);
                           } else if (opts.chosendate.constructor == Date) {
                               var chosendate = opts.chosendate;
                           } else if (opts.chosendate) {
                               var chosendate = new Date(opts.chosendate);
                           } else {
                               var chosendate = today;
                           }
                              
                           // insert the datepicker in the DOM
                           datepicker = newDatepickerHTML();
                           jQuery("body").prepend(datepicker);
                          
                           // position the datepicker
                           var elPos = findPosition($this.get(0));
                           var x = (parseInt(opts.x) ? parseInt(opts.x) : 0) + elPos[0];
                           var y = (parseInt(opts.y) ? parseInt(opts.y) : 0) + elPos[1];
                           jQuery(datepicker).css({ position: 'absolute', left: x, top: y });
                      
                           // bind events to the table controls
                           jQuery("span", datepicker).css("cursor","pointer");
                           jQuery("select", datepicker).bind('change', function () { loadMonth (null, $this, datepicker, chosendate); });
                           jQuery("span.prevMonth", datepicker).click(function (e) { loadMonth (e, $this, datepicker, chosendate); });
                           jQuery("span.nextMonth", datepicker).click(function (e) { loadMonth (e, $this, datepicker, chosendate); });
                           jQuery("span.today", datepicker).click(function () { closeIt($this, datepicker, new Date()); });
                           jQuery("span.close", datepicker).click(function () { closeIt($this, datepicker); });
                          
                           // set the initial values for the month and year select fields
                           // and load the first month
                           jQuery("select[name=month]", datepicker).get(0).selectedIndex = chosendate.getMonth();
                           jQuery("select[name=year]", datepicker).get(0).selectedIndex = Math.max(0, chosendate.getFullYear() - opts.startyear);
                           loadMonth(null, $this, datepicker, chosendate);
                       }
                      
                   });
               }
   
           });
   
       };
   
       // finally, I like to expose default plugin options as public so they can be manipulated.  one
       // way to do this is to add a property to the already-public plugin fn
   
       jQuery.fn.simpleDatepicker.formatOutput = function (dateObj) {
           return  dateObj.getDate() + "/" + (dateObj.getMonth() + 1) + "/" + dateObj.getFullYear();
       };
      
       jQuery.fn.simpleDatepicker.defaults = {
           // date string matching /^\d{1,2}\/\d{1,2}\/\d{2}|\d{4}$/
           chosendate : today,
          
           // date string matching /^\d{1,2}\/\d{1,2}\/\d{2}|\d{4}$/
           // or four digit year
           startdate : today.getFullYear(),
           enddate : today.getFullYear() + 1,
          
           // offset from the top left corner of the input element
           x : 18, // must be in px
           y : 18 // must be in px
       };
   
   
   1. })(jQuery);

All my pages are in the same html file.

I have a .js file with records in json. Here just the first record, otherwise it gets too long:

1. var json_var = '{"idx422":{"id":"422","recommendation":"A","common_name":"Alaska Pollock","chinese_name":"\u963f\u62c9\u65af\u52a0\u72ed\u9cd5","scientific_name":"Theragra chalcogramma","origin":"Alaska","source_wild":"1","source_aqua":"0","met_purse":"0","met_gil":"0","met_jig":"0","met_trap":"0","met_trol":"0","msc":"1","photo":"alaska_pollock.jpg","credit":"1","notes":""}}';

I would like to know how I can parse an <ul> of this json records. The <li> element contains:

• - A dynamic icon: js/images/{recommendation}.png
• - {common_name}
• - <a> links to the detail page: #species_detail
  

In addition, I would like to have two sort buttons. 1: Sort after {recommendation}, 2: Sort after {common_name}

Tap on the <li> element opens the detail page of the according record which will contain all the additional data of this record (for example "origin", "source_wild",......)

I know this should be easy, but js programming is somethig very abstract and complex for me. Hope to get little bit help.

Cheers
Ralph

Just for those who don't know it yet:

http://www.photoswipe.com/

Gallery framework with full support for JQM (comes even with example files for JQM), Features like slideshow, swipe, zoom and rotation (yes! you can zoom and rotate the images by pinching them with your fingers).

I did the integration within 10 minutes and it really works very smooth.

Cheers
Ralph

The header of my web application looks like this:

- I have a page "theguide" containing a list with links to the page "detail"

2. <ul data-role="listview">
3. <li data-role="list-divider">Photo</li>
4. <li><span class="image_loader"><img src="images_species/{photo}"></span></li>
5. </ul>

As you can see in my code above, i have an image in a "read only" list element. This image should not get the thumbnail formatting. I want this image appearing in full size. Is there a way to "switch off" the thumbnail function for this list element?

for an iphone application (compiled by phonegap), i dont want to use a serverside technology. So I am using a XML file as datasource. So I do a data binding plus repeating data regions. The data sets need a link to the detail page with more information about the specific enty. Passing the ID to the next page und query the according entry would be great (like i would do it in php). But no clue how to do that with XML.

So I came up with a different concept: In the same html, I will have the main page with the UL list of all entries. 1. 1. Every <li> gets an entry from the xml (spry). That works so far.
2. Every entry gets a link to call an intenal page (detailpage)
3. The whole detailpage is actually a repeated spry data set. So in the final output, i will have a detailpage each entry. Theoretically, It should be possible to address the detailpage. The concept works if JQM is not involved. But if I do this concept with JQM, I am getting page loading errors.

Main internal page:

1. ....
   
2. <div data-role="content">
       <ul data-role="listview" data-inset="true">
       <li spry:region="ds1" spry:repeat="ds1"><a href="detail{id}"><img src="js/images/{recommendation}.png" class="ui-li-icon">{common_name}</a></li>
       </ul>
       </div>
3. ....
   

Detail page (internal):

1. ...
   
2. <div spry:repeat="ds1" data-role="page" data-theme="a" id="detail{id}">
3.     <div data-role="header">
4.         <h1>Species</h1>
5.     </div><!-- /header -->
6.     <div data-role="content">
7.       <p>{common_name}<p>
8. ....