Discussion :

[splifferwolf]

Bonjour à tous,

Je viens vers vous pour une erreur que je n'arrive pas à comprendre, je vais tenter de vous expliquer cela.

J'utilise tyniMCE comme editeur texte dont voici le formulaire HTML

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<div>
  <form id="ent-new" name="ent-new" data-frm="context" data-idc="{IDC}" data-ide="{IDE}">
    <div class="title-form-absolute">Ajouter {TITLEP}</div>
 
    <input type="hidden" name="type" id="type" value="{TYPE}" />
 
    <!-- Titre -->
    <div class="form-group">
        <label class="col-sm-2 control-label" style="text-align:right;line-height:25px;">Dénomination</label>
        <div class="col-sm-4">
            <input type="text" value="{TITLE}" name="title" id="title" title="" placeholder="Titre" class="form-control" />
        </div>
    </div>
    <div class="clearfix" style="margin-bottom:5px;"></div>
 
    <!-- Texte -->
    <div class="form-group" style="margin-bottom:20px;">
        <label class="col-sm-2 control-label" style="text-align:right;line-height:25px;">Détails</label>
        <div class="col-sm-9"><textarea class="form-control" id="content-txt" name="content-txt" rows="2" style="width:50%;">{CONTENT}</textarea></div>
    </div>
    <div class="clearfix" style="margin-bottom:5px;"></div>
 
    <div class="line-form" style="margin-top:20px;">
      <div class="col-sm-offset-1 col-sm-2 o-button-div" id="save-context">Enregistré</div>
      <div class="col-sm-offset-1 col-sm-2 o-button-div reset-form">Recommencer</div>
      <div class="col-sm-offset-1 col-sm-2 o-button-div frm-absolute-close">Fermer</div>
    </div>
  </form>
</div>
<script type="text/javascript">
$(document).ready(function(){
    $('select').select2();
    
    // wysiwig
    TinyMCEStart('#content-txt', 'extreme');
});
</script>

Ce formulaire est appelé en ajax pour s'ouvrir dans un modal, jusque là aucun souci. Mon problème est quand je click sur le bouton "Enregistrer" qui porte l'id "save-context"
J'ai donc ceci dans mon script javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
$("body").on("click","#save-context",function(){
        type = $("#type").val();
        title = $("#title").val();
        txt = tinyMCE.get("content-txt").getBody();
        prm = {
            'type' : type,
            'title' : title,
            'txt' : txt,
        };
        // Exécute ma fonction ajax en lui passant les paramètres (Mis en commentaire temps que j'ai l'erreur)
        // XhrLoad('exec','context',prm,false);
        console.log(prm);
    });

le console.log n'est pas exécuté, et voici l'erreur que j'obtiens dans la console :

TypeError: 'click' called on an object that does not implement interface HTMLElement.

Si dans mon formulaire je met le tinyMCE en commentaire et que je récupère juste la valeur du textarea, là pas de souci et aucune erreur (met aucune mise en forme du texte possible, hors c'est ce qui m'est demander)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
// En commentaire, plus aucun soucis
// TinyMCEStart('#content-txt', 'extreme');

Tout d'abord à quoi correspond ce type d'erreur car je ne la comprend pas, de ce que je comprend (et c'est loin d'être sûr), j'ai cliquer sur un élément ne faisant pas partie de l'interface HTML hors mon bouton est bien en HTML...
Et enfin comment résoudre cette erreur ?

D'avance merci de votre participation.
Bien à vous
Spliffer

[ma5t3r]

La notation hiérarchique avec jQuery est super mais pourquoi ne pas optimiser la vitesse de ton code quand tu as a ta disposition l'Id de l'élément visé ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
$("#save-context").on("click",function(){       
       var prm = {
            type: $("#type").val(),
            title: $("#title").val(),
            txt:  tinyMCE.get("content-txt").getBody() // je ne suis pas sûr de ça
        };
 
        console.log(prm);
    });

Faut tester et voir ce que ça donne dans la console

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
tinymce.init({...});

C'est mieux que start qqchose :-)

[splifferwolf]

La notation hiérarchique avec jQuery est super mais pourquoi ne pas optimiser la vitesse de ton code quand tu as a ta disposition l'Id de l'élément visé ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
$("#save-context").on("click",function(){       
       var prm = {
            type: $("#type").val(),
            title: $("#title").val(),
            txt:  tinyMCE.get("content-txt").getBody() // je ne suis pas sûr de ça
        };
 
        console.log(prm);
    });

Parceque le formulaire est appelé en ajax et que donc l'élément n'est pas sélectionnable puisque chargé après le chargement de la page, mais j'ai contourner en l'incluant dans mon html directement.

Faut tester et voir ce que ça donne dans la console

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
tinymce.init({...});

C'est mieux que start qqchose :-)

C'est déjà le cas, en faite la fonction TinyMCEStart('#content-txt', 'extreme'); n'est qu'une fonction qui contient la configuration init, j'ai fait ça pour éviter la redondance de code.

J'ai tout inclus dans le HTML directement, pour être sûr et conclusion : toujours la même erreur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
$("#save-context").on("click",function(){       
       var prm = {
            page: "Client",
            epage: "exec",
            action: "context",
            idc: $("#idc").val(),
            type: $("#type").val(),
            title: $("#title").val(),
            txt:  tinyMCE.get("content-txt").getBody()
        };
        $.ajax({ type: 'post', 
                 url : "ajax.php", 
                data : prm,
                async: true,
              success: function(r){
 
              }
        });
    });

Donc ça ne change rien, j'ai toujours l'erreur quand je clique sur le bouton enregistré

[ma5t3r]

J'ai installé un tiny sur un projet bidon
Voici mon jQuery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(function() {
   $("#save-context").on("click",function(){
        var prm = {
            mavar: "truc",
            txt:  tinyMCE.get("content-txt").getContent()
        };
        
        $.ajax({ type: 'post',
            url: "../ajax/testouille",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data : prm,
            success: function(response){
                console.log(response);
            },
            error : function(jqXHR, status, error) {
                console.log('error : ' + error);
            }
        });
    });
});

ma fonction php ridicule qui est appelée via ajax

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
 public function testouille() {
        echo json_encode("Am I the Dude ?");
    }

Et ma console me renvoie bien : Am I the Dude ?

Parceque le formulaire est appelé en ajax et que donc l'élément n'est pas sélectionnable puisque chargé après le chargement de la page, mais j'ai contourner en l'incluant dans mon html directement

Peu importe, la méthode .on() sert justement à accéder aux éléments ajoutés dynamiquement dans le DOM

Fais un test en laissant ton bouton save-content apparent sur ta page html.
Peut-être un problème de z-index, ou un id multiple
Il faut faire fonctionner ton ajax d'abord, tu généreras ton form dynamiquement par la suite. Faudra juste mettre le bon ID dans ton jquery