yui, soumission de formulaire et tableau de données

Question

Je suis un programmeur Java, mais pas un programmeur JavaScript. Je viens de découvrir YUI et j'essaie de commencer à l'utiliser. Ce que j'aimerais essayer, c’est d’avoir le formulaire de requête en haut de la page, de cliquer sur Soumettre et les résultats s'affichent dans un YUI DataTable sous le formulaire de requête.

Normalement, bien sûr, sur un formulaire HTML sur lequel l'utilisateur appuie sur Soumettre, la demande est envoyée au serveur. J'utilise Struts pour le traiter, puis la transmettre à un fichier JSP et le code HTML est renvoyé au navigateur. C'est ce que je fais quotidiennement. Avec Ajax, je comprends que ce soit différent en ce sens que je devrais plutôt retourner XML. Pas de problème. Facile à faire.

Les questions que j’ai abordées ont trait au côté YUI. Que se passe-t-il lorsque vous cliquez sur le bouton Soumettre? Soumission de formulaire pas normale, non? Dois-je implémenter une fonction JavaScript onSubmit () qui déclenche ensuite une source de données YUI pour aller récupérer les données? Comment les paramètres de requête sont-ils transmis? J'espère que je n'ai pas à construire la demande manuellement. Je suppose que j'utilise un YAHOO.util.XHRDataSource et qu’il s’agit du DataSource pour le DataTable.

J'ai réussi à faire en sorte que le YUI DataTable fonctionne avec un élément de tableau HTML. Maintenant, je dois juste passer aux données réelles. Curieusement, la documentation de YUI semble un peu faible ici, à moins que quelque chose ne me manque. Peut-être n’est-ce qu’un simple Ajax que les documents YUI ne couvrent pas?

Answer 1

Tout d’abord, lorsque vous utilisez Ajax, vous n’avez pas besoin de renvoyer XML depuis le serveur, vous pouvez renvoyer du texte brut, XML, des chaînes JSON, littéralement toute forme de données textuelles souhaitée. Voici un exemple d’alimentation d’un datatable avec des données JSON:

http://developer.yahoo.com/yui/examples/datatable /dt_xhrjson.html

Vous trouverez ici un exemple d'envoi d'une demande de publication utilisant Ajax et YUI.

http://developer.yahoo.com/yui/examples/connection /post.html

Cela devrait vous aider à démarrer. Maintenant, liez les deux ensemble.

Pour vous connecter au serveur, vous pouvez utiliser la méthode Yahoo.util.Connect.asyncRequest qui intègre les paramètres suivants:

static object asyncRequest ( method , uri , callback , postData );

Voir un exemple ici, celui-ci utilise " GET " vous pouvez donc utiliser soit "GET". ou " POST " assurez-vous simplement de passer vos paramètres

http://developer.yahoo.com/yui/examples/json /json_connect.html

Une fois que votre fonction est revenue sur votre " onSuccess " procédez comme suit pour analyser le texte de la réponse au format JSON

try {
    jsonData = YAHOO.lang.JSON.parse(o.responseText);
}
 catch (x) {
    alert("JSON Parse failed!");
    return;
}

Le " jsonData " objet contient maintenant vos données, vous pouvez donc maintenant suivre cet exemple:

http://developer.yahoo.com/yui/examples/datatable /dt_basic.html

Il vous montre comment initialiser un datatable avec un objet local contenant la source de données. fondamentalement, ce serait quelque chose comme ça

var myColumnDefs = [
        {key:"Column1Data", label:"Column1 Header" sortable:true, resizeable:true},
        {key:"Column2Data", label:"Column2 Header" sortable:true, resizeable:true}
        ];

var myDataSource = new YAHOO.util.DataSource(jsonData);
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        myDataSource.responseSchema = {
            fields: ["Column1Data","Column2Data"]
        };

        var myDataTable = new YAHOO.widget.DataTable("basic",
                myColumnDefs, myDataSource, {caption:"DataTable Caption"});

Pour que cela fonctionne, vous devez disposer d'un " div " conteneur dans le code HTML avec un identifiant de "base". notez que cela correspond au premier paramètre du DataTable

J'espère que cela vous aidera