web-dev-qa-db-fra.com

Formulaire d'arrière-plan Joomla avec ajax autocomplete

Je suis complètement perdu à créer une fonction de saisie semi-automatique pour un champ de formulaire. Même si ce que je veux est assez simple:

J'ai créé un formulaire pour le backend. Maintenant, j'ai un champ de texte que je veux fondamentalement être autocompleted avec les données d'une table de ma base de données.

Dans mon form.xml le champ ressemble à ceci

        <field
            name="studio_id"
            type="text"
            label="COM_MYCOMPONENT_STUDIO_LABEL"
            description="COM_MYCOMPONENTSTUDIO_DESC"
            size="100"
            class="span5"
            default=""
            />

À cette fin, j'ai pris un code que j'ai déjà utilisé pour la fonction de saisie semi-automatique et cela a fonctionné parfaitement. C'est le code JQuery

$( "#jform_studio_id" ).autocomplete({

minLenght:0,

source: function( request, response ) {
                  $.ajax({
                    url : 'index.php?format=raw&option=com_mycomponent&task=testing',
                    dataType: "raw",
                    type: "POST",
                    data: {search: request.term,},

                    success: function( data ) {
                        response( $.map( data, function( item ) {
                            return {
                                label: item.studio_name,
                                studio_id: item.studio_id
                            }
                        }));
                    }
                  });
              },

select: function( event, ui ) {

    $("#jform_studio_id").val(ui.item.studio_id);
},

messages: {
    noResults: '',
    results: function() {}
},

open: function() { 
    $("ul.ui-menu").width( $(this).innerWidth() );
}
});

D'après ce que j'ai lu, dans ce cas, je devrais créer une méthode dans le fichier d'entrée principal de mon composant.

mycomponent.php

<?php
defined('_JEXEC') or die('Restricted access');

class MyComponentControllerAjax extends JControllerLegacy
{
    protected $default_view = 'mycomponent';

    public function testing() {

        $studios[] = array('studio_id' => '1', 'studio_name' => 'studio');

        echo json_encode($studios);
    }
}
?>

Comme je l'ai dit je suis complètement perdu. J'ai essayé plusieurs choses différentes. J'ai cherché des solutions pendant plusieurs heures, mais je ne pouvais pas trouver quelque chose qui résolve mon problème. J'espère que quelqu'un pourra me pousser dans la bonne direction.

ajaxjoomla-3.4
3
Taiga

Utilisez jQuery () au lieu de $ (). L’administrateur Joomla utilise jQuery en mode sans conflit .

2
Ville Niemi

Je pense que votre URL ne pointe pas correctement. La première chose que votre nom de contrôleur n'est pas claire ici.

Remplacer

JpanimesController

Avec

{your_component_name}Controller{controller_name}

et

Remplacer

index.php?format=raw&option=com_mycomponent&task=testing

Avec

index.php?format=raw&option=com_mycomponent&task={your_full_controller_name}.testing

Mise à jour: - Voici le code que j'ai implémenté avec succès un mois plus tôt, ici bd.jQuery == jQuery == $

jQuery( "#agents" ).autocomplete({
            source: function (request, response){
                bd.jQuery.ajax(
                    {
                        url:"index.php?option=com_jestate&view=company&task=company.getUserAgentList&tmpl=component",
                        data:
                        {
                            query: request.term
                        },
                        success: function(data)
                        {
                            todisplay = [];
                            data = jQuery.parseJSON(data);
                            bd.jQuery(data).each(function(key,val){
                               insert = '{"label":"'+val.username+'","value":"'+val.username+'","user_id":"'+val.id+'"}';
                               todisplay.Push(JSON.parse(insert));
                            });
                            response(todisplay);
                        }
                    });
            },
            select:function(event,ui){
                if(bd.jQuery('#'+ui.item.user_id).length != 0){
                    alert('Agent Already Added');
                }else{
                    detail =  '<div id="'+ui.item.user_id+'">';
                    detail +=  '<span>'+ui.item.value+'</span>';
                    detail +=  '<input type="hidden" value="'+ui.item.user_id+'" name="agentSelected[]"/>';
                    detail += '<a href="#" class="removeAgent"> Remove</a>';
                    detail +=  '</div>';
                    bd.jQuery('#agentList').append(detail);
                    bd.jQuery('.removeAgent').on('click',function(e){
                        e.preventDefault();
                        bd.jQuery(this).parent().remove();
                    });
                    bd.jQuery(this).val('');
                    return false;
                }
            }
        });
1
subashbasnet8