Bonjour,

Je suis donc en pleine création d'un site et j'utilise Handsontable, un framework qui permet d'ajouter un tableau excel à la page web. Dans mon site, le tableur est envoyé en ajax pour vérifier les données qui s'y trouvent. Ensuite, j'appelle une fonction de callback pour traiter ces erreurs. J'ai donc besoin d'accéder à l'objet que j'ai créé avant et on m'a conseillé d'utiliser les variables globales.

Voici donc le code expliqué à chaque étape.
D'abord voici le code où je déclare mon tableur :

var hotTraitement = new Handsontable(container, {
    data: data_traitement,
    stretchH: 'all',
    minSpareRows: 1,
    observeChanges : true,
    rowHeaders: false,
    colHeaders: false,
    contextMenu: true
    });

C'est donc juste une instanciation d'un objet que j'appelle donc hotTraitement.
Ensuite, voici juste l'appel à ma requête Ajax et ma fonction de callback :

$(document).ready(function()
        {
            $('#submit_button_traitement').click(function()
            {               
                $.post("ajaxUpdate.php",
                {arr:data_traitement,id_essai,table,idTable},
                insertTraitementCallback,'json');
            });
        });

Il faut savoir que la requête ajax marche parfaitement, je récupère bien ce que je veux récupérer.

J'appelle ensuite ma fonction callback que voici :

function insertTraitementCallback(responseObject,ioArgs)
    {
        alert(hotTraitement);
    }

J'essaie donc d'accéder à cet object mais il semble qu'il n'est pas défini (hotTaitement is undefined).

J'ai regardé plusieurs tuto, mais aucun n'est capable de me donner la solution, je suis un peu désespérée ^^'

Merci de votre aide :)

21 réponses


Defy
Réponse acceptée

Ben pour pouvoir utiliser un objet en ajax t'es obliger de faire les traitements dans la requettes ajax, tu peut faire une requette en ajax sur un window.onload pour recupérer le tableau a l'ouverture de la page et gérer le callback ajax sur le bouton

Yop, place dans fonction insertTraitementCallback et ta variable hotTraitement dans ta fonction document.ready ;)

Erlaunis
Auteur

Si je fais ça, mon évènement "onclick" sur le bouton ne marche plus et je n'appelle pas ajax :/

si mes souvenir sont bon, une global il suffit d'enlever le var devant la variable et celle-ci devient global enfin sous node.js cela fonctionne comme ca et vue que c'est du javascript je presume que sur jquey ca marche aussi comme ceci

Erlaunis
Auteur

Ouais j'ai déjà essayé mais pas moyen de récupérer après que ce soit avec window.variable ou juste avec le nom.

ta variable global tu la déclare en dedans ou en dehors de ton code jQuery?

Erlaunis
Auteur

En dehors à la base mais ToToSe m'a conseillé de le faire à l'intérieur. Donc j'ai essayé mais sans succès.

ta fonction qui utilise la variable est dedans aussi?

Erlaunis
Auteur

Actuellement, j'ai tout remis à l'extérieur. Quand je mets tout, plus rien ne marche, je n'accède plus à mon code sur le click de mon bouton (donc ma requête ajax ne se fait pas). Quand je mets uniquement ma fonction qui utilise la variable, l'évènement marche mais je n'arrive toujours pas à récupérer ma variable.

remet tous ensemble et copie le code ici pour voir l'architecture de celui ci ( variable fonction click et tous le tralala

Erlaunis
Auteur
<script>
            function insertTraitementCallback(responseObject,ioArgs)
            {
                alert(window.hotTraitement.getData(1,1));
            }

            var data = [];
            var readOnlyCells = {};

            var container = document.getElementById('tab_traitement');
            var hotTraitement = new Handsontable(container, {
                data: data_traitement,
                stretchH: 'all',
                minSpareRows: 1,
                observeChanges : true,
                rowHeaders: false,
                colHeaders: false,
                contextMenu: true       
            });
</script>

<script type="text/javascript">
        $(document).ready(function()
        {

            $('#submit_button_traitement').click(function()
            {
                $.post("ajaxUpdate.php",{arr:data_traitement,id_essai,table,idTable}, insertTraitementCallback,'json');
            });
        });

</script>
Erlaunis
Auteur

Voilà ce qu'il y a dans mon code actuellement. C'est le code brut, j'ai juste enlevé les options du handsontable qui ne sont pas intéressantes ici et qui prennent beaucoup de place. Donc ici, j'essai de récupérer hotTraitement dans la fonction insertTraitementCallback() et il dit qu'il n'est pas défini

Ben deja on evite le js directe dans le html on le met dans des fichiers externe c'est un peut plus serieux. enssuite l'ajax est asynchrone donc non bloquant. Pour pouvoir utiliser l'objet data_traitement tu doit passer le hotTraitement dans le callback ajax

Erlaunis
Auteur

J'ai essayé de faire un fichier externe mais mon code est assez compliqué, ça fait parti des options de handsontable dont je parlais. J'utilise du php dans mon js (pas moyen de faire autrement) donc impossible de mettre dans un fichier js à part même si je sais, c'est moche. Donc en fait, je dois mettre en paramètre du callback le hotTraitement pour pouvoir le récupérer ?

Oui c'est ca. l'ajax etant asynchrone vue que ton appel est long puisqu'il a besoin de communiquer avec le serveur, javascript vas exécuter les autres demande en parallele. Pour pouvoir recupérer ta variable et la traiter tu doit resté dans la porté de ta fonction.

Erlaunis
Auteur

D'accord, j'avais déjà essayé cette idée mais je n'arrivais pas à passer en paramètre. Vu que responseObject et ioArgs sont les paramètres par défaut d'un callback, je n'arrive pas à ajouter un autre paramètre. Pourrais-tu m'indiquer comment faire stp ?

Erlaunis
Auteur

J'ai changé ma ligne où j'appelle ajax en :

$.post("ajaxUpdate.php",{arr:data_traitement,id_essai,table,idTable},function(){insertTraitementCallback()},'json');

Mais je dois mettre quoi dans les parenthèses ?

evite de mettre sur une seul ligne aussi ^^ l'indentation c'est mieux pour si retrouver

et dans ton callback de traitement tu met ta fonction. En gros si je me trompe pas, ca fait un moment que j'utilise plus trop Jquery

$.post("ajaxUpdate.php",{arr:data_traitement,id_essai,table,idTable},function()
{
var data = [];
            var readOnlyCells = {};

            var container = document.getElementById('tab_traitement');
            var hotTraitement = new Handsontable(container, {
                data: data_traitement,
                stretchH: 'all',
                minSpareRows: 1,
                observeChanges : true,
                rowHeaders: false,
                colHeaders: false,
                contextMenu: true       
            });

            function insertTraitementCallback(responseObject,ioArgs)
            {
                alert(window.hotTraitement.getData(1,1));
            }

},'json');

C'est fait comme ca a l'arrache mais dans l'ensemble ca devrait etre ca

Erlaunis
Auteur

Si je declare mon handsontable dans ma fOnction ajax, ca va pas aller, mon tableau s'affichera pas a l'ouverture de la page. Il faur absolument que ca, ca soit en dehors du jquery

Erlaunis
Auteur

Je pense que ça devrait être bon. Donc en fait, j'ai juste instancié mon objet dans un window.load et ça a l'air de fonctionner puisque j'arrive à alert quelque chose. Il me reste plus qu'à régler quelques détails avec Handsontable pour que tout fonctionne correctement et ça devrait le faire. Merci Defy ! :)

attention oublie pas que la porté des data se fait au sein de la requette ajax elle meme, en dehors tu peut faire ce que tu veut la data ne sera pas la