web-dev-qa-db-fra.com

Utilisation de com_ajax dans un plugin personnalisé pour récupérer des éléments k2 de la base de données

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));


                    }
                });


            }
        });
        });
    });
3
Ron Modz

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");
2
Dmitry Rekun

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;
    });
});
0
Eilluj