Page appelée par AJAX qui ne prend pas en compte la mise en forme jQuery

Version imprimable

08/03/2016, 02h33
onlyonlylight

Page appelée par AJAX qui ne prend pas en compte la mise en forme jQuery

Bonjour tout le monde, je continue de coder mon editeur de masse prestashop. J'essaye de mettre un Input Tag Select pour afficher/éditer les métas mots clés de ma base de données. J'utilise donc un script.

J'ai un index.php, qui via ajax inclue une vue.php dans cette même première page.

Je crée juste ceci :

Code:

<input class="tags" value="foo,bar,baz" />

J'appelle cette méthode :

Code:

$('.tags').tagsInput();

Si je mets mes TAG dans index.php, alors cela fonctionne.
Mais si je le place dans view.php, ça ne marche pas.
Par contre, si j'appelle directement view.php, ça fonctionne aussi...

Sauriez-vous m'expliquer pourquoi et comment remédier ?

Merci
08/03/2016, 03h23
onlyonlylight

Aie

J'ai lu 30 topics sur le problème en Anglais ou Français, et généralement personne ne trouve de solution.... Je désespère :weird:
08/03/2016, 08h16
SpaceFrog

Code:

qui via ajax inclue une vue.php dans cette même première page.

Le sujet a déjà été abordé sur ce forum, et il me semble que DanielHagnoul y avais apporté une solution élégante...

La solution que j'avais proposé est simplement sur le callback de ton ajax qui charge ta page de relancer une initialisation de ton plugin
08/03/2016, 16h58
onlyonlylight

Salut Spacefrog

Salut Spacefrog, merci pour ton attention. En toute honnêteté j'ai déjà passé près de 3h sur le problème sans arriver à rien. A savoir que j'avais passé du temps un première fois pour autre chose, mais que j'avais pu contourner le problème en insérant le code dans mon index.html (ce qui était même mieux)... J'ai essayé 10 solutions différentes avec ce que j'ai pu lire et réussir à comprendre en Anglais...

Cependant, ici c'est devenu impossible.

Je vous ai fait une vidéo ultra minimaliste, très peu de code à lire, 1 ligne de Jquery et 2 lignes de HTML de débutant... Avec le rendu.

Si quelqu'un peut me dire exactement quoi écrire et où... c'est pas une volonté d'être assisté mais j'ai tout tenté, j'ai passé ma soirée dessus hier et je suis démotivé... j'aimerai bien avancer dans mon projet.

https://www.youtube.com/watch?v=PETDQbX82ng
08/03/2016, 17h19
SpaceFrog

relance juste un

Code:

$('.tags').tagsInput();

sur le callback de ton appel ajax ...
08/03/2016, 18h00
onlyonlylight

Merci SpaceFrog. J'ai lu un peu sur le sujet, mais j'ai du mal à comprendre. Quel est le nom de la fonction de callback et ou faut il la placer ?
09/03/2016, 04h07
onlyonlylight

BoN...

Bon je sais je suis vraiment nul mais j'ai toujours pas réussi >_<
Il y a autant de fonction callback qui trainent sur internet et de syntaxes que de pages sur le sujet.
Au secours.
09/03/2016, 08h31
SpaceFrog

copie ici la partie du code qui fait l'ajax pour insérer les tagsInput $('.tags')

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<script>
 
function showListProductFromSelectedCategory(str) {
    if (str == "") {
        document.getElementById("productsGrid").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("productsGrid").innerHTML = xmlhttp.responseText;
            }
        };        
        xmlhttp.open("GET","../view/showListProductFromSelectCat.php?q="+str,true);
        xmlhttp.send();
    }
 
}
 
 
 
function updateDataBase(id, content, column){
    if (id == "") {
        document.getElementById("productsGrid").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
 
 
        xmlhttp.open("GET","../model/updateDataBase.php?id="+id+"&content="+content+"&column="+column,true);
        xmlhttp.send();
    }
 
 
}
 
 
</script>

Voilà mon fichier AJAX. J'ai peut-être trouvé une solution en jQuery avec success et complete... J'étudie pour améliorer mon code à l'avenir mais pour le moment j'ai du mal à appeler la page ajax avec le onblur car si je surcharge l'élément de la liste de checkbox de catégories, cela détruit la mise en forme préalable... Et j'ai encore un peu de mal à comprendre toutes les subtilités du jQuery... L'essentiel dans un premier temps serait de conclure mon projet... Je veux bien la solution pour ma page Ajax.

Merci SpaceFrog

09/03/2016, 15h00
SpaceFrog

Heu pourquoi tu fais un ajax en js simple au lieu de passer par un $.ajax de jquery ...
09/03/2016, 15h04
onlyonlylight

Disons que j'ai juste appris sur le tas pour pouvoir faire ce dont j'avais besoin... J'ai pu bosser une semaine comme ça. Le jQuery à l'air beaucoup mieux en effet, mais j'ai appris le jQuery aussi sur le tas après l'Ajax... J'ai des difficultés à adapter le code. Mais effectivement, le problème de comprendre le callback etc du Ajax vient du fait que je n'ai pas utilisé jQuery.
10/03/2016, 20h19
mathieu

si j'ai bien compris ce que propose SpaceFrog, le code "$('.tags').tagsInput();" se met après la modification de innerHtml
10/03/2016, 20h22
onlyonlylight

C'est ca

Il suffisait simplement de mettre dans onreadystatechange. Un ami m'a aidé. C'était tellement idiot... Ça m'a permis de mieux comprendre cette partie que j'avais bêtement recopier.