Menu

Insert data

Messages postés
99
Date d'inscription
jeudi 6 novembre 2008
Dernière intervention
14 décembre 2018
-
Bonjour chers confrères,
Je sollicite votre aide en JS/ajax. Je développe un site en HTML/PHP (et un peu de jQuery et d'ajax) et Bootstrap 4.
Mon problème est que quand je souhaite envoyer un formulaire, ma fonction ajax n'est plus appelée ou ne fonctionne plus. (avant que je restylise en bootstrap 4, ça marchait).

Mon form
<form id="form_fact" action='' method=''>
     <input type="hidden" id="date_fact" name="date_fact" value="<?php echo $lastDateOfMonth ?>">
     <input type="hidden" id="num" name="num" value="<?php echo $_POST['mois'].''.$_POST['annee'] ?>">
     <input type="hidden" id="total_ffb" name="total_ffb" value="<?php echo $total_ffb ?>">
     <input type="hidden" id="total_glob_pb" name="total_glob_pb" value="<?php echo $total_glob_pb ?>">
     <input type="hidden" id="total_glob_rr" name="total_glob_rr" value="<?php echo $total_glob_rr ?>">
     <input type="hidden" id="total_dep" name="total_dep" value="<?php echo $total_dep ?>">
     <input type="hidden" id="av_ffb_sa" name="av_ffb_sa" value="<?php echo $av_ffb_sa ?>">
     <input type="hidden" id="total_avances" name="total_avances" value="<?php echo $total_avances ?>">
     <input type="hidden" id="frais_tickets" name="frais_tickets" value="<?php echo $frais_tickets ?>">
     <input type="hidden" id="du_cau" name="du_cau" value="<?php echo $du_cau ?>">
     <button type="button" class="btn btn-primary btn-sm" name="insert-data" id="insert-data" onclick="insertData()">Générer la note de frais</button>
</form>


Mon Ajax, après de </body> dans ma page footer.php incluse dans la page du formulaire.
<script type="text/javascript">

    function insertData() {
      
        var num=$("#num").val();
        var date_fact=$("#date_fact").val();
        var total_ffb=$("#total_ffb").val();
        var total_glob_pb=$("#total_glob_pb").val();
        var total_glob_rr=$("#total_glob_rr").val();
        var total_dep=$("#total_dep").val();
        var av_ffb_sa=$("#av_ffb_sa").val();
        var total_avances=$("#total_avances").val();
        var frais_tickets=$("#frais_tickets").val();
        var du_cau=$("#du_cau").val();

        // AJAX code to send data to php file.
        $.ajax({
            type: "POST",
            url: "refact_insert.php",
            data: {num:num,date_fact:date_fact,total_ffb:total_ffb,total_glob_pb:total_glob_pb,total_glob_rr:total_glob_rr,total_dep:total_dep,av_ffb_sa:av_ffb_sa,total_avances:total_avances,frais_tickets:frais_tickets,du_cau:du_cau},
            dataType: "JSON",
            success: function(data) {
             $("#message").html(data);
            $("p").addClass("alert alert-success");
            },
   error: function(err) {
            //alert(err);
            }
        });
    }
</script>


le code de : refact_insert.php, a été testée ça fonctionne.

Merci d'avance pour votre aide

Configuration: Macintosh / Safari 12.0.1


Bien PHPment et MySQLment
Delaville
Afficher la suite 

Votre réponse

2 réponses

Messages postés
23656
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 décembre 2018
0
Merci
Bonjour,

Commence par regarder si il n'y a pas de message d'erreur dans la console de ton navigateur.
Regarde aussi la requête ajax envoyée. ( si tu utilises chrome, tu dois installer le plugin ajax debug )
Ajoutes également des "console.log" dans ton code JS pour t'assurer que tu passes bien dedans et ce que valent tes variables.

et pour finir, réactive également l'error dans ton appel ajax comme ceci afin de voir si il n'y a pas un souci.
var datas = {num:num,date_fact:date_fact,total_ffb:total_ffb,total_glob_pb:total_glob_pb,total_glob_rr:total_glob_rr,total_dep:total_dep,av_ffb_sa:av_ffb_sa,total_avances:total_avances,frais_tickets:frais_tickets,du_cau:du_cau};
console.log("datas",datas);
$.ajax({
            type: "POST",
            url: "refact_insert.php",
            data: datas,
            dataType: "JSON",
            success: function(data) {
                $("#message").html(data);
                $("p").addClass("alert alert-success");
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }
 });

delaville81
Messages postés
99
Date d'inscription
jeudi 6 novembre 2008
Dernière intervention
14 décembre 2018
-
Salut jordane45,
Merci de ra réponse.
J'ai fait comme ton modèle, j'ai ceci

Uncaught TypeError: $.ajax is not a function
at insertData (refact.php:236)
at HTMLButtonElement.onclick (refact.php:164)


Comment puis-je solutionner .
PS : je ne suis vraiment pas un bête en JS
Commenter la réponse de jordane45
Messages postés
99
Date d'inscription
jeudi 6 novembre 2008
Dernière intervention
14 décembre 2018
0
Merci
J'ai remplacé le jQuery de Bootstrap:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

par

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

et ça marche
Mais une chose que je ne comprends pas est que la fonction PHP s'exécute bien mais les alert de errors s'affichent également
Commenter la réponse de delaville81