WordPress.org

1. O-Zone
   Member
   Posted 2 years ago #

   Hi all, i'm developing a simple plugins that use ajax to dynamically retrieve data from an array. Here's my piece of code:
   

   <select name='openitaly4wp_regione' onChange=\"ajaxViewProvince(this[this.selectedIndex].value,'divProvincia');\">
           <option value='$openitaly4wp_regione'>$openitaly4wp_regione</option>
           <option value='Abruzzo'>Abruzzo</option>
           <option value='Basilicata'>Basilicata</option>
           <option value='Calabria'>Calabria</option>
           <option value='Campania'>Campania</option>
           <option value='Emilia-Romagna'>Emilia-Romagna</option>
           <option value='Friuli-Venezia Giulia'>Friuli-Venezia Giulia</option>
           <option value='Lazio'>Lazio</option>
           <option value='Liguria'>Liguria</option>
           <option value='Lombardia'>Lombardia</option>
           <option value='Marche'>Marche</option>
           <option value='Molise'>Molise</option>
           <option value='Piemonte'>Piemonte</option>
           <option value='Puglia'>Puglia</option>
           <option value='Sardegna'>Sardegna</option>
           <option value='Sicilia'>Sicilia</option>
           <option value='Toscana'>Toscana</option>
           <option value='Trentino-Alto Adige'>Trentino-Alto Adige</option>
           <option value='Umbria'>Umbria</option>
           <option value='Valle Aosta'>Valle d'Aosta</option>
           <option value='Veneto'>Veneto</option>
       </select></p>
       <p>Provincia:<div id='divProvincia'><select name='openitaly4wp_provincia'>
           <option value='$openitaly4wp_provincia'>$openitaly4wp_provincia</option>
       </select></div></p>
       <p>Comune<div id='divComune'><select name='openitaly4wp_comune'>
           <option value='$openitaly4wp_comune'>$openitaly4wp_comune</option>
       </select></div></p>
       <div id='loading' style='display: none;'>
           <img src='".openitaly4wp_path("img/spinner.gif")."' style='width:12px; height:12px; vertical-align: middle;'>&nbsp;Please wait, loading data...
       </div>";

   and this is javascript functions:

   <script type='text/javascript'>
       //<![CDATA[
       function ajaxViewProvince(regione,container) {
           jQuery.ajax({
               type: 'post',
               url: '".openitaly4wp_path("ajaxcb.php")."',
               data: { action: 'getprov', regione: regione},
               beforeSend: function() {
                   jQuery('#loading').show('slow');
               },
               complete: function() {
                   jQuery('#loading').hide('fast');
               },
               success: function(html) {
                   jQuery(container).html(html);
               }
           });
           return true;
       }
   
       function ajaxViewComuni(regione,provincia,container) {
           jQuery.ajax({
               type: 'post',
               url: '".openitaly4wp_path("ajaxcb.php")."',
               data: { action: 'getcomuni', regione: regione, provincia: provincia},
               beforeSend: function() {
                   jQuery('#loading').show('slow');
               },
               complete: function() {
                   jQuery('#loading').hide('fast');
               },
               success: function(html) {
                   jQuery(container).html(html);
               }
           });
           return true;
   
       }
       //]]>
       </script>

   ajaxcb.php simply return HTML code to be renderered inside "container" div. Using HttpFox to see what's happen, seems that ajax call was fine but i can't see any results. I've tried also with fixed *echo" without success so i think i'm still doing something wrong.

   Any help very appreciated !

   Michele "O-Zone"

2. Roger Theriault
   Member
   Posted 2 years ago #

   You're passing a div ID to your AJAX function... don't forget to access an ID you need to use the # character, such as jQuery('#content').html('foo');

   So, try this:

   <select name='openitaly4wp_regione' onChange=\"ajaxViewProvince(this[this.selectedIndex].value,'#divProvincia');\">

   or this:
   

   success: function(html) {
                   jQuery('#'+container).html(html);
               }

   Also I've found Firebug (on Firefox) with the Net XHR panel to be invaluable in debugging AJAX.

3. O-Zone
   Member
   Posted 2 years ago #

   YES YES YES !!! It works perfectly...thanks a lot !!!! If you wanna try, you can download full plugin code from http://www.openitaly.net/wp

   Michele "O-Zone"

Topic Closed

This topic has been closed to new replies.