Przykład wykorzystania technologii Ajax w WordPressie. Double select – onchange event.

Poniższy kod ukazuje sposób na realizację zadania, polegającego na stworzeniu w formularzu podwójnego elementu select. Jeden select zależny jest od drugiego selecta, a dane z bazy danych pobierane są z wykorzystaniem technologii Ajax. Problem będzie rozwiązany w systemie CMS WordPress.

Prosty formularz z podwójnym selectem:

<form><select id="wojewodztwo" name="wojewodztwo">
<option value="0">wybierz</option>
<option value="1">dolnośląskie</option>
<option value="2">kujawsko-pomorskie</option>
<option value="3">lubelskie</option>
</select><select id="miasto" name="miasto">
<option value="0">wybierz</option>
</select>
<input type="submit" value="Wyszukaj" />
</form>

Główny plik wtyczki:
– odpowiednie includy:

add_action( 'wp_enqueue_scripts', 'cities_enqueue_ajax_scripts');

function cities_enqueue_ajax_scripts(){
wp_enqueue_script('jquery');

//nasz plik z którego wyślemy zapytanie
wp_enqueue_script('ajax-cities', plugins_url('/js/cities.js' , __FILE__));

//ustalamy odpowiedni protokół
if (isset($_SERVER['HTTPS']))
$protocol = 'https://';
else
$protocol = 'http://';

//pobieramy adres do pliku admin-ajax.php
$admin_ajax_url = admin_url( 'admin-ajax.php', $protocol );

//za pomocą tej funkcji przekazujemy zmienną zawierająca adres, do javascript
wp_localize_script( 'ajax-cities', 'ajax_options', array('admin_ajax_url' => $admin_ajax_url) );
}

-odebranie żądania oraz wykonanie zapytania:



function getCities() {
global $wpdb;
$cities=array();
$voivodeship_id = $_POST['main_catid'];
if(is_numeric($voivodeship_id)) {
$result2 = $wpdb->get_results( "SELECT id, nazwa_miasta FROM Miasta WHERE Wojewodztwa_id=".$voivodeship_id." ORDER BY nazwa_miasta");
foreach($result2 as $key => $value) {
$cities[$value->id] = array('nazwa_miasta' => $value->nazwa_miasta);
}
}
echo json_encode($cities);
die();
}
add_action('wp_ajax_getCities', 'getCities');
add_action('wp_ajax_nopriv_getCities', 'getCities');

W pliku cities.js zawieramy kod:



jQuery(function() {
jQuery("#wojewodztwo").change(function() {
var mainCat=jQuery("#wojewodztwo").val();

var data = {
action: "getCities",
main_catid: mainCat
}
jQuery("#miasto").empty();
jQuery("#miasto").append(''+'wybierz');
jQuery.post(ajax_options.admin_ajax_url, data, function(response){
var obj = JSON.parse(response);
for (var k in obj){
jQuery("#miasto").append(''+obj[k].nazwa_miasta+'');
}
});
}
);
});