Discussion :

[dotEden]

Bonjour,

J'ai actuellement des difficultés avec le JavaScript.
Je génère un formulaire html en JQuery sur l’événement ready() du document et j'aimerais utiliser la méthode ajax sur ce dernier.

Voici mon code source :

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
23
24
25
26
27
28
$(document).ready(function() {
    var html = '';
    html += '<div id="background_add">';
    html += '<form id="form_background" action="/background/create" method="post">';
    html += '<input type="text" class="input-small" required="required" name="background[tag]" id="background_tag">';
    html += '<input type="submit" value="Add" class="btn btn-link">';
    html += '</form></div>';
 
    $('#patient_background').parent().append(html);
});
 
$('#form_background').submit(function(event) {
    var type = $(this).attr('method');
    var url = $(this).attr('action');
 
    $.ajax({
        type: type,
        url: url,
        data: $(this).serialize(),
        dataType: "html",
        success: function(response) {
            alert("lol");
            console.log(response);
        }
    });
 
    return false;
});

Le formulaire s'affiche correctement, cependant la fonction de l'événement submit n'est pas exécutée lors du clic sur le bouton d'envoi.

Je me creuse là tête depuis une heure dessus, ainsi j'en appelle à votre aide.

Merci de votre aide.

Cordialement.

[Bovino]

Il y a effectivement un problème de conception et de chronologie dans le code...

Je génère un formulaire html en JQuery sur l’événement ready() du document

OK, donc jQuery va attendre que le DOM soit prêt pour insérer le formulaire.
Le problème, c'est que le code qui se trouve en dehors du .ready() (dont ta gestion du submit) va être interprété et exécuté au moment où il est rencontré par le parseur, c'est-à-dire bien avant que les éléments existent dans le DOM. Donc ta gestion d'événement ne s'applique à aucun formulaire puisqu'aucun ne correspond au sélecteur quand le code est interprété.

[dotEden]

Merci de m'accorder de ton temps, mais j'ai évidemment essayé de mettre l'évenement submit dans l'événement ready(), mais j'ai le même résultat.
Si ça peut aider, j'ai exactement le même code qui fonctionne lorsque le formulaire n'est pas généré par le Javascript

[danielhagnoul]

Code dynamique, on(), etc. (déjà traité X fois sous diverses formes) : $( "body" ).on( "submit", "#form_background", function( event ){ ... });.

[dotEden]

Merci beaucoup, j'essayerais demain et je vous ferais un retour.

[dotEden]

Ta solution ne fonctionne pas.

Voici mon code actuel :

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
23
24
25
26
27
28
$(document).ready(function() {
    var html = '';
    html += '<div id="background_add">';
    html += '<form id="form_background" action="/background/create" method="post">';
    html += '<input type="text" class="input-small" required="required" name="background[tag]" id="background_tag">';
    html += '<input type="submit" value="Add" class="btn btn-link">';
    html += '</form></div>';
 
    $('#patient_background').parent().append(html);
 
    $('body').on('submit', '#form_background', function(event) {
        var type = $(this).attr('method');
        var url = $(this).attr('action');
 
        $.ajax({
            type: type,
            url: url,
            data: $(this).serialize(),
            dataType: "html",
            success: function(response) {
                alert("lol");
                console.log(response);
            }
        });
 
        event.preventDefault();
    });
});

Évidemment, je n'ai aucune erreur Javascript sur la page.