jQuery Forum

1. // Autocomplete marque
       var ac_marques = {
           source: 'http://www.web.com/manager/templates/naoux/xmlhttprequest/autocomplete-marques.php',
           autoFocus: true,
           close: function( event, ui ) {
               $("#h_marque").val("");
           },
           minLength: 1,
           select:function(event, ui){
               $("#f_marque").val(ui.item.id_marque);
   
               if($("#"+$(this).attr('id')+"_h").length){
                   $("#"+$(this).attr('id')+"_h").val(ui.item.id_marque);
               }
           }
       };
   
       $(".fmarque").autocomplete(ac_marques);
   //FIN Autocomplete marque

1. // Autocomplete marque
       var ac_marques = {
           source: 'http://www.website.com/manager/templates/name/xmlhttprequest/autocomplete-marques.php',
           minLength: 1,
           select:function(event, ui){
               $("#h_marque").val(ui.item.id); // That hidden field wil contain the id of the brand car
               $("#f_modele").show();
           }
       };
       $(".fmarque").autocomplete(ac_marques);
   //FIN Autocomplete marque

1.     if($('#googleAPI').length != 0){
              
           //var track_id = "me";
           if (Tracking.watch_id == null) {
          
               Tracking.watch_id = navigator.geolocation.watchPosition(
               // Success
               function(position){
                  
                   var lat = position.coords.latitude;
                   var long = position.coords.longitude;
                  
                   var latLng = new Array();
                   latLng[0] = lat;
                   latLng[1] = long;
                  
                   //Tracking.myCoordinates.push(lat,long);
                   Tracking.myCoordinates.push(latLng);
                  
                   addMarker(lat, long);
                  
                   Alert.show('Watch called' + lat + '/' + long);
              
               },
               // Error
               showError,
               {
                   frequency: 1000
      
               });
              
               console.log('HW : WatchPosition called. Id:' + Tracking.watch_id);
              
           }
      
       }else{
           Alert.show('The map API has not been loaded. Check for connection and try again. (pagebeforeshow)');
       }

1. $('#profile').live('pagebeforeshow', function(e){
       
   // Get the values of the profile in order to have the field filled with the value, before
   // modifying it 
       moduleId = localStorage.getItem('moduleId');
      
       // Injection des valeurs du formulaire
       modulesJSON = Modules.get('bipme');
          
       for (var i = 0; i < modulesJSON['modules'].length; i++) {
      
           if (modulesJSON['modules'][i].id == moduleId){
               var moduleData = modulesJSON.modules[i];
           };
       };
   
   //(I am using mustache in order to get the value)
       // Get the Pseudo and fill the field
       var tplFormPseudo    = '{{pseudo}}';
       var htmlFormPseudo = Mustache.to_html(tplFormPseudo, moduleData);
       $('#profile #edit-profile #pseudo-edit').val(htmlFormPseudo).trigger('create');
      
       /*
       // Get the phone and fill the field  
       var tplFormGsm= '{{gsm}}';
       var htmlFormGsm = Mustache.to_html(tplFormGsm, moduleData);
       $('#profile #edit-profile #module-edit-gsm').val(htmlFormGsm).trigger('create');
       */
       // Get the perimetre and ...
       var tplFormPerimetre= '{{perimetre}}';
       var htmlFormPerimetre = Mustache.to_html(tplFormPerimetre, moduleData);
       $('#profile #edit-profile #module-edit-perimetre').val(htmlFormPerimetre).selectmenu('refresh');
      
       // Get the profile Profile
       var tplFormProfile    = '{{profile}}';
       var profile = Mustache.to_html(tplFormProfile, moduleData);
       $('#profile #edit-profile').find( 'input[name="profile"]' ).attr('checked',false);
       $('#profile #edit-profile #module-edit-'+profile).attr('checked',true);
       $('#profile #edit-profile input[type="radio"]').checkboxradio('refresh');
      
       // Get the Gsm country code
       var tplFormGsmcc= '{{gsmcc}}';
       var htmlFormGsmcc = Mustache.to_html(tplFormGsmcc, moduleData);
       $('#profile #edit-profile #module-edit-gsmcc').val(htmlFormGsmcc).selectmenu('refresh');
      
       // Get the Gsm aera code
       var tplFormGsmac= '{{gsmac}}';
       var htmlFormGsmac = Mustache.to_html(tplFormGsmac, moduleData);
       $('#profile #edit-profile #module-edit-gsmac').val(htmlFormGsmac).selectmenu('refresh');
      
       // Get the Gsm number
       var tplFormGsmnb= '{{gsmnb}}';
       var htmlFormGsmnb = Mustache.to_html(tplFormGsmnb, moduleData);
       $('#profile #edit-profile #module-edit-gsmnb').val(htmlFormGsmnb).trigger('create');
      
       // Get Mode   
       var tplFormMode    = '{{mode}}';
       var mode = Mustache.to_html(tplFormMode, moduleData);
       $('#profile #edit-profile').find( 'input[name="mode"]' ).attr('checked',false);
       $('#profile #edit-profile #module-edit-'+mode).attr('checked',true);
       $('#profile #edit-profile input[type="radio"]').checkboxradio('refresh');
      
      
       // When we click on save the validator plugin get in action
       $("#edit-profile").validationEngine('attach',{
                  
           onValidationComplete : function(form, status){
               // If there is no error
               if(status == true){
                    // I update ma localStorage      
                  
   // Get the new value of mode
                   for (var j = 0 ; j < form[0].mode.length; j++){
                       if(form[0].mode[j].checked == true){
                           var mode = form[0].mode[j].value;
                       }
                   }
      // Get the new value of profile            
                   for (var j = 0 ; j < form[0].profile.length; j++){
                       if(form[0].profile[j].checked == true){
                           var profile = form[0].profile[j].value;
                       }
                   }
         // This is code which allow me to attribue a color to the marker profile.          
                   var profileActual = Modules.getOneValue('modules','profile');
                  
                   if (profileActual == profile){
      
                       var color = Modules.getOneValue('modules','iconColor');
                  
                   }else{
      
                       var color = IconColor.selectAColor(profile);
      
                   }
                   // Save the value
                   Modules.edit('pseudo',form[0].pseudo.value);
                   Modules.edit('perimetre',form[0].perimetre.value);
                   Modules.edit('gsmcc',form[0].gsmcc.value);
                   Modules.edit('gsmac',form[0].gsmac.value);
                   Modules.edit('gsmnb',form[0].gsmnb.value);
                   Modules.edit('mode',mode);
                   Modules.edit('profile',profile);   
                   Modules.edit('iconColor',color);
                  
                  
                   $.mobile.changePage('#modules', {
                           transition     : 'slide'
                           //dataUrl     : '#modules'
                   });   
                          
               };
           }
                  
       });
      
   
   })

1. $('#home').live("pagebeforeshow", function() {...code...}
2. $('#profile').live("pagebeforeshow", function() {...code...}
3. $('#info').live("pagebeforeshow", function() {...code...}
4. $('#map').live("pagebeforeshow", function() {...code...}
5. $('#contact').live("pagebeforeshow", function() {...code...}

1. // When I visit the #home page
   
   $('#home').live('pagebeforeshow', function(e){
      
       // Resize #mapHome (#mapHome = Sreen hight - footer - header)
       $('#mapHome').css('height', Resize.content()-0 +'px');
        // Start tracking the Use
          
           // extract les id des modules existants
           navigator.geolocation.getCurrentPosition(function(position){
      
               showMap('mapHome',position.coords.latitude, position.coords.longitude);
          
           },
           function(){
               //error
           },
           {
              
                   enableHighAccuracy    : true,
                   maximumAge            : 30000
                   //maximumAge:Infinity
           });
          
           // Place and move the marker regarding to my position and deplacement
           var track_id = "me";
           Tracking.watch_id = navigator.geolocation.watchPosition(
           // Success
           function(position){
      
               var lat = position.coords.latitude;
               var long = position.coords.longitude;
              
               var latLng = new Array();
               latLng[0] = lat;
               latLng[1] = long;
              
               //Tracking.myCoordinates.push(lat,long);
               Tracking.myCoordinates.push(latLng);
               addMarker('me',lat, long);
          
           },
           // Error
           showError,
           {
               frequency: 10000
   
           });
      
   })
2. // When I leave the page
   
   $('#home').live("pagebeforehide", function() {
       track_id = "me";
   
       // Stop tracking the user
       navigator.geolocation.clearWatch(Tracking.watch_id);
      
       // Save the tracking data
       window.localStorage.setItem(track_id, JSON.stringify(Tracking.myCoordinates));
   
       // Reset watch_id and tracking_data
       Tracking.watch_id = null;
       Tracking.myCoordinates = new Array();
      
   });

Here is the function showMap:

1. function showMap(canvas,lat,long){
      
           var latLng = new google.maps.LatLng(lat,long);
      
           // Google Map options
           var myOptions = {
             zoom: 25,
             zoomControl    : 1,
             center: latLng,
             mapTypeId: google.maps.MapTypeId.ROADMAP////ROADMAP, SATELLITE, HYBRID and TERRAIN
           };       
   
           // Create the Google Map, set options
           Tracking.mapy = new google.maps.Map(document.getElementById(canvas), myOptions);
   
   }
   

And here the function addMarker

1. function addMarker(quelModule, lat, long){
          
           //console.log(localStorage.getItem('mapToDisplay'));
          // ModulesPos.module('47');
        
           var mapBounds = new google.maps.LatLngBounds();
          
           var latitudeAndLongitude = new google.maps.LatLng(lat, long);
   // Add a personal icon       
   var image = "img/iconGoogleMap/phones.png";
      
               // Clean previous markers     
           for (var i = 0; i < Tracking.markers.length; i++ ) {
              
               Tracking.markers[i].setMap(null);
                  
             }
   
           marker = new google.maps.Marker({
               title    : 'me',
               //animation: google.maps.Animation.DROP, //BOUNCE
               position: latitudeAndLongitude,
               map        : Tracking.mapy,
               icon : image
           });
          
           Tracking.markers.push(marker);
          
           mapBounds.extend(latitudeAndLongitude);
           Tracking.mapy.fitBounds(mapBounds);
   }
   

When I visit the #home page, the map is corretely shown in #home. But for a unknow reason, when I change of page and I come back to #home, the map is not fully shown. It like if the picture of the page is not loaded (it's grey).


I observed that when the map is not correctely loaded, as in the picture, the mode choose is at you can see in red circle. When the map iscorretely load, beside of "Satellite" or can also see "Plan".

I also noticed that when I return to #home, the map is reload.

First I would like to know if you can tell me how can do to load the map if it's not already loaded? In other words, to load the map only once, even if I change of pages.

How can I code a refresh button, like F5 on a browser, to simply reload the map "manualy"

Do you have any idea, why the map is not fully shown, as it's displayed in the picture?

Is there a possibility to cache the map, and making sure it's not reloaded?

Thank for your help and any suggestion to perfect my code is welcome.

Cheers and happy christmas

1. function network(status){
       //document.addEventListener("deviceready", function(){
      
      
       if(status==1){
           $(".network_status").attr("data-icon", "check").trigger('create');
       }else{
           $(".network_status").attr("data-icon", "delete").trigger('create');
          
       }
2.  
       /*
       if(navigator.connection.type != Connection.NONE){
           $(".network_status").text('No Internet ')
                                    .attr("data-icon", "delete")
                                    .button('refresh');
       }else{
           $(".network_status").text('Internet ')
                                    .attr("data-icon", "check")
                                    .button('refresh');
       }
       */
   
       //});
   }
   

1. $('#home').live('pagebeforeshow', function(e){
      
       $('#mapHome').css('height', Resize.content()-35 +'px');
        // Start tracking the User
       var track_id = "me";
      
       watch_id = navigator.geolocation.watchPosition(
           // Success
           function(position){
               tracking_data.push(position);
               //alert(tracking_data[0].coords.latitude);
          
           },
           // Error
           function(error){
               console.log(error);
           },
           // Settings
           { frequency: 3000, enableHighAccuracy: false
       });

1. <form id="edit-perimetre" action="" method="post" data-ajax="true" class="ui-body ui-body-d ui-corner-all ui-shadow">           
          
             <label for="perimetre-edit">Perimètre (mètre)</label>
              <input type="text" id="perimetre-edit" name="code" class="validate[required,custom[number]]">
               
            <fieldset data-role="controlgroup" data-mini="true">
            <legend>Mode</legend>
                       <input type="radio" name="mode" id="perimetre-edit-gps" value="gps" />
                       <label for="perimetre-edit-gps">Point fixe</label>
              
                       <input type="radio" name="mode" id="perimetre-edit-phone" value="phone"/>
                       <label for="perimetre-edit-phone">Téléphone</label>
              
               </fieldset>
   </form>

1.  <div data-role="page" id="page1">
      
       <div data-role="header" data-position="fixed">
           <h1>Page1</h1>
       </div>
      
       <div data-role="content">
       </div>
   
        <div data-role="footer" data-position="fixed">
     
       </div>
      
   </div>
2. <div data-role="page" id="page2">
      
       <div data-role="header" data-position="fixed">
           <h1>Page 2</h1>
       </div>
      
       <div data-role="content">
       </div>
   
        <div data-role="footer" data-position="fixed">
     
       </div>
      
   </div>
3. <div data-role="page" id="page3">
      
       <div data-role="header" data-position="fixed">
           <h1>Page 3</h1>
       </div>
      
       <div data-role="content">
       </div>
   
        <div data-role="footer" data-position="fixed">
     
       </div>
      
   </div>

1.  <div data-role="dialog" id="supprimer">
      
       <div data-role="header" data-position="fixed">
           <h1>Supprimer</h1>
       </div>
      
       <div data-role="content">
           <h4>Etes-vous sûre e vouloir supprimer ce module?</h4>
      
           <form id="JSON-formSupprimer" method="post" data-ajax="true">
           <label for="moduleId">@pseudo</label>
               <input type="hidden" id="moduleId" name="moduleId" value="222"><br><br>
               <label for="save_supp"></label>
               <input type="submit" id="save_supp" name="save_supp" value="Supprimer">
           </form>
       </div>
      
   </div>

1. I store a string text into a localStorage variable
2. Secondly, I retrieve that string into a variable jsonText
3. Third, and this is my problem, I try to convert the string a an objet (JSON format) with the function JSON.parse(). But in console log I always have that error
   
   "
   SyntaxError: JSON.parse: unexpected character

   var obj = JSON.parse(jsonText);

   "
4. I also try with this http://api.jquery.com/jQuery.parseJSON/ but without success

Some one can help me to convert text into JSON format variable?

1. $(document).live('pageinit', function(e){
   
       localStorage.setItem('modules','{"0":[{"id" : "0","pseudo" : "Titi","mode" : "gps","perimetre" : "3","distance" : "1","start" : "2012-09-23 08:00:00","refresh" : "08:20:00","last" : "2012-09-23 08:00:00"}]}');
       var name ='modules';
       var jsonText = localStorage.getItem[name];
       var obj = JSON.parse(jsonText);               
       console.log(obj);
        
   })

Thank for all

1.         function onSuccess(data, status)
           {
              data = $.trim(data); //until here it works fine
               $("#dialog-contenu").html(data); // It works fine
               $("#dialog1").dialog(); //it doe not work
              
               }

1. function onSuccess(data, status)
           {
               data = $.trim(data);
               $("#resultSql").text(data);
           } 

1.     <div data-role="content">
    
           <h1>Gestion des fruits</h1>
           <div id="resultSql"></div>
   </div>

1. <div class="ui-collapsible-set" data-content-theme="d" data-theme="c" data-role="collapsible-set">
2.       <div data-role="collapsible" data-collapsed="true">
3.             <h3 class="">Apple</h3>
4.                   <form method="post" id="fruit_1">
5.                         <div data-role="fieldcontain">
6.                               <label for="fd_nom">Nom du fruit :</label>
7.                               <input type="text" name="fd_nom" id="fd_nom" data-mini="true" value="Apple" />
8.                         </div>
9.                         <div data-role="fieldcontain">
10.                                     <label for="fd_active">Actif:</label>
11.                                     <select name="fd_active" id="fd_active" data-role="slider" data-mini="true">
12.                                          <option value="0" <?php ($data_fruits['fd_active']) ? print('') : print('selected'); ?>>Off</option>
13.                                         <option value="1" <?php ($data_fruits['fd_active']) ? print('selected') : print(''); ?>>On</option>
14.                                     </select>
15.                        </div>
16.                        <div data-role="controlgroup">
17.                                     <button data-theme="b" type="submit" class="submit" id="submit_1" name="submit" value="submit">Submit</button>
18.                                     <button data-theme="c" type="reset" name="reset" value="reset">Effacer</button>
19.                        </div>
20.                    </form>
21.                                            </div>
22. </div>

1. <link rel="stylesheet" media="screen" href="/themes/tricosachic/modules/blockcategories/jQuery/superfish-1.4.8/css/superfish.css" />
   <link rel="stylesheet" media="screen" href="/themes/tricosachic/modules/blockcategories/jQuery/superfish-1.4.8/css/superfish-navbar.css" />
   
   <script type="text/javascript" src="/themes/tricosachic/modules/blockcategories/jQuery/superfish-1.4.8/js/hoverintent.js"></script>
   <script type="text/javascript" src="/themes/tricosachic/modules/blockcategories/jQuery/superfish-1.4.8/js/superfish.js"></script>
   
   <script language="javascript">       
       // initialise plugins
           $(document).ready(function(){
               $("ul.tree-horizon").superfish({
                   //delay        :    800,  // the delay in milliseconds that the mouse can remain outside a submenu without it closing
                   dropShadows    :   false,
                   pathClass    :    'selected',
                   disableHI     :    'false'
                  
               });
           });
   </script>  

1. <?php
   header( 'content-type: text/html; charset=utf-8' );
   $clients = array(
   );   
   
   $root="../";
   include($root.'sql/db_connect.php');
   $sql_search = 'SELECT * FROM tb_clients ORDER BY fd_name';
   $query_search = mysql_query($sql_search)or die(mysql_error());
   $nb_search = mysql_num_rows($query_search);
   
   
   while($data_search=mysql_fetch_assoc($query_search)){
       $clients[]=$data_search;
   }
    
   // Cleaning up the term
   
   #$q = trim(strtolower(strip_tags($_GET['term'])));
   $q = "Gom"; //temporyrely for test
   if (!$q) return;
   
   // Rudimentary search
   $matches = array();
   foreach($clients as $client){
      
       if(stripos($client['fd_name'], $q) !== false){
       #if (strpos(strtolower($city['city']), $q) !== false) {
           // Add the necessary "value" and "label" fields and append to result set
           $client['value']= $client['fd_name'];
           $client['label']="{$client['fd_name']} {$client['fd_firstname']}, {$client['fd_state']}";
   
           $matches[] = $client;
       }
       #else{
           #$matches[]= '';
       #}
   }
    
   // Truncate, encode and return the results => LIMIT THE OUTPUT
   #$matches = array_slice($matches, 0, 10);
   
   print json_encode($matches);
   ?>