J'utilise rsform pro pour afficher les valeurs des options de liste déroulante de la base de données joomla. J'ai 2 listes déroulantes, A liste tout le nom de la catégorie et son identifiant alors que B liste tous les éléments k2 disponibles.
J'ai une fonction jquery onchange pour A où il fait une requête ajax en utilisant joomla com_ajax, les codes sont joints ci-dessous. Comment utiliser com_ajax pour renseigner les valeurs de la liste déroulante B en fonction de la sélection effectuée sur A?
Code du plugin
class plgAjaxK2progitems extends JPlugin
{
function onAjaxK2progitems()
{
//$k2parid = (int) $_POST['id']; <- Old Method
$input = JFactory::getApplication()->input;
$k2parid = $input->post->get('id');
// Prepare the database connection
$db = JFactory::getDbo();
$query = $db->getQuery(true);
// Run the SQL query and store it in $results
$query
->select($db->quoteName(array('u.id', 'u.title', 'u.catid', 'um.name')))
->from($db->quoteName('#__k2_items', 'u'))
->join('LEFT', $db->quoteName('#__k2_categories', 'um') . ' ON (' . $db->quoteName('u.catid') . ' = ' . $db->quoteName('um.id') . ')')
->where($db->quoteName('um.parent') ." = ".$db->quote($k2parid))
->where($db->quoteName('u.published') ." = ".$db->quote('1'))
->order($db->quoteName('u.id') . ' DESC');
$db->setQuery($query);
$results = $db->loadObjectList();
return $results;
}
}
Appel Ajax
$(function() {
$("#dept").change(function() {
var $department = $(this).val();
$.ajax({
type: "POST",
data: {id: $department},
url: 'index.php?option=com_ajax&plugin=k2progitems&format=json',
success: function(results) {
console.log(results);
}
});
});
});
Journal de la console
Object { success: true, message: null, messages: null, data: Array[1] }
Nouveau journal de la console
Array[1]
0: Array[3]
0: Object
catid: "18"
id: "9"
name: "xxx"
title: "yyy"
__proto__: Object
1: Object
catid: "18"
id: "10"
name: "xxx"
title: "yyy"
__proto__: Object
2: Object
catid: "18"
id: "11"
name: "xxx"
title: "yyy"
__proto__: Object
Mise à jour d'un appel Ajax - Fonctionne
$(function() {
$("#dept").change(function() {
var $department = $(this).val();
$.ajax({
type: "POST",
data: {id: $department},
url: 'index.php?option=com_ajax&plugin=k2progitems&format=json',
success: function(results) {
//console.log(results.data) <- removed this as no longer needed
var $el = $("#progitems");
var selectId = '#progitems';
$el.empty(); // remove old options
$el.append($("<option></option>")
.attr("value", '').text('Please Select Item'));
// Iterate through results - worked with results.data[0]
$.each(results.data[0], function(key, value) {
if ($(selectId+' option[value="'+value.id+'"]').length == 0) {
$(selectId).append($('<option/>').val(value.id).text(value.title+' - '+value.name));
}
});
}
});
});
});
Vous aurez besoin de quelque chose comme ça:
var selectId = '#dropdownB'; // ID of your dropdown B
var selected = ''; // Pass selected element here
// Iterate through results
$.each(results.data, function(key, value) {
if ($(selectId+' option[value="'+value.id+'"]').length == 0) {
$(selectId).append($('<option/>').val(value.id).text(value.title+' - '+value.name));
// Add selected property
if (key == selected) {
$(selectId+' option[value="'+value.id+'"]').prop('selected', 'selected');
}
}
});
// Update Chosen if Joomla's Bootstrap is used
$(selectId).trigger("liszt:updated");
utilisez le champ de type de type de liste puis déclenchez ce script, éditez-le selon vos besoins.
jQuery(document).ready(function(){
var list = jQuery('#jform_list_ID');
var parent = list.parent();
list.trigger('chosen:updated');
list.ajaxChosen({
type: 'GET',
url: ajax_url,
dataType: 'json'
}, function(response) {
var results = [];
var data = response.data || [];
//change accordingly to the structure you provided
var items = data[0] || [];
if (items) {
jQuery.each(items, function(i, item){
results.Push({
value: item.value,
text: item.text
});
});
}
return results;
});
});