Partage
  • Partager sur Facebook
  • Partager sur Twitter

Conflit entre Bootstrap Ajax Jquery et PHP

Appel PHP par Jquery Ajax dans une page Bootstrap 4.2.1

    16 juin 2019 à 20:40:12

    Bonjour les codeurs, sauver moi sinon je vais craquer

    j'explique mon probleme.

    mon home.php est en bootstrap et je charge mes formulaires dans cette page en fonction de la valeur d l'url avec GET.la ca va.mais le probleme est quand je saisie les données et que je valide.le formulaire fait appel a une fonction php pour l'insertion via jquery et Ajax.rien ne fonctionne.mais un test en dehors du home bootstrap  marche bien.des que je ramente dans bootrap le formulaire  il n y a plus insertion.aidez moi svp.

    entete home.php

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <meta charset="utf-8">
      <link href="vendor/bootstrap/css/mystyle.css" rel="stylesheet">
       <!-- Bootstrap core CSS -->
      <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <!-- Custom styles for this template -->
      <link href="css/simple-sidebar.css" rel="stylesheet">
     </head>
    <body>

    Jquery ajax html qui appel php

    <html>
    <head>
          <script type="text/javascript" src="cdnactif.js"></script>
    </head>
    <body>
    <form action=''>
        <label>Libelle</label>
        <input type="text" id="libelle">
        <label>obs</label>
        <input type="text" id="obs">
        <button type="button" id="button123">Valider--</button> 
    </form>
        <script>
            $(document).ready(function(){
                $("#button123").click(function(){
                    var contch1=$("#libelle").val();
                    var contch2=$("#obs").val();
                    $.ajax({
                        url:'receptionperso.php',
                        method:'POST',
                        data:{libelle1:contch1,obs1:contch2
                        },
                       success:function(data){
                           alert(data);
                       }
                    });
                });
            });
        </script>
    </body>
    </html>

    fonction php pour insertion


    <?php
     $libelle=$_POST['libelle1'];
     $obs=$_POST['obs1'];
     ajoutercolis($libelle,$obs);
    ?>

    -
    Edité par remstorvarld 16 juin 2019 à 20:41:29

    • Partager sur Facebook
    • Partager sur Twitter
      17 juin 2019 à 15:41:02

      Bonjour,

      il te manque au moins un " et un }

      Tu ne peux pas exécuter une fonction php en js : php = serveur, js = client.

      • Partager sur Facebook
      • Partager sur Twitter
        18 juin 2019 à 13:38:19

        piero5673 il me semble que tu ne m'a pas bien suivit. je dis ceci mon script php appelé Jquerysendatform.php s'execute cote serveur voici le code de traitement

        <?php
         require_once('../cfsyst/connexion.php');
         require_once("../model/controllerMenu.php");   
         $libelle=$_POST['libelle'];
         $obs=$_POST['obs'];
         ajoutercolis($libelle,$obs);
        ?>

        pas de probleme ca marche parfaitement tu peux copier et essayer che toi ca marche.

        Html form client  contenant les champ envoi par ajax jquery les donnees au code precedent c'est tout et c'est normal voici le code

        <html>
        <head>
              <script type="text/javascript" src="cdnactif.js"></script>
        </head>
        <body>
            <label>Libelle</label>
            <input type="text" id="libelle">
            <label>obs</label>
            <input type="text" id="obs">
            <button type="submit" id="button23">SAVE</button>   
            <script>
                $(document).ready(function(){
                    $("#button23").click(function(){
                        var libelle=$("#libelle").val();
                        var obs=$("#obs").val();
                        $.ajax({
                            url:'Jquerysendatform.php',
                            method:'POST',
                            data:{
                                libelle:libelle,
                                obs:obs
                            },
                           success:function(data){
                               alert(data);
                           }
                        });
                    });
                });
            </script>
        </body>
        </html>
        Le seul probleme est que desque je copie ce code html et que je pose dans home bootstrap ca ne marche plus. alors la raison que vous avez evoquez a mon avis n'est pas juste

        • Partager sur Facebook
        • Partager sur Twitter
          18 juin 2019 à 14:30:09

          Il existe un bouton code (</>) pour poster du code sur le forum, c'est plutôt pas mal.

          Non, ça ne marche pas chez moi, je peux pas require des fichiers qui n'existent pas sur mon pc, pareil pour le html, je n'ai pas les fichiers js correspondants. Un submit sans formulaire ça marche ? Si je comprends bien, tu met un document html complet (avec un script js) dans un autre document html ?

          • Partager sur Facebook
          • Partager sur Twitter
            18 juin 2019 à 20:15:46

            BONSOIR

            tu as raison;il y'a trop de lien externe dans mon application . ca ne s'executera pas che toi. c'est le principe de jquery avec bootrap k je veux comprendre pourquoi ca ne marche pqs.

            les 2 require correspondent 1. aux parametre de ta connexion a ta bd. le 2.correspond a un ensemble de fonction PDO que j'appel grace a ajoutercolis($libelle,$obs); avec pour parametre $libelle et $obs.

            ecris tn php n'importe comment et ta table mysql avec 3 champs. l'exemple c'est de reussi a inserrer les donnees dans la bd.

            <?php
             require_once('../cfsyst/connexion.php');
             require_once("../model/controllerMenu.php");   
             $libelle=$_POST['libelle'];
             $obs=$_POST['obs'];
             ajoutercolis($libelle,$obs);
            ?>
            
            pas de probleme ca marche parfaitement tu peux copier et essayer che toi ca marche.
            
            Html form client  contenant les champ envoi par ajax jquery les donnees au code precedent c'est tout et c'est normal voici le code
            
            <html>
            <head>
                  <script type="text/javascript" src="cdnactif.js"></script>
            </head>
            <body>
                <label>Libelle</label>
                <input type="text" id="libelle">
                <label>obs</label>
                <input type="text" id="obs">
                <button type="submit" id="button23">SAVE</button>   
                <script>
                    $(document).ready(function(){
                        $("#button23").click(function(){
                            var libelle=$("#libelle").val();
                            var obs=$("#obs").val();
                            $.ajax({
                                url:'Jquerysendatform.php',
                                method:'POST',
                                data:{
                                    libelle:libelle,
                                    obs:obs
                                },
                               success:function(data){
                                   alert(data);
                               }
                            });
                        });
                    });
                </script>
            </body>
            </html>
            Le seul probleme est que desque je copie ce code html et que je pose dans home bootstrap ca ne marche plus. alors la raison que vous avez evoquez a mon avis n'est pas juste
            


             regarde comment j'appel ce formulaire jquery html dans mon bootstrap.nb: vu partiel du code. en php simple ca fonctionne avec execution mais avec recharge de la page et cela me gene.je veux ajax et jquery pour eviter la recharge merci.

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                      <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
            				    <?php 
            						   //DISPLAY MENU
            							$iduseractif=$_SESSION["authUser"]["iduser"];
            							$OBJMenuList=getALLMenufusion($iduseractif);
            							foreach($OBJMenuList as $listMenuF):
            							$listMenuF->idmenuF;
            					?>	
            					   <!--horizontal menu-->		  
            						<li class="nav-item active">
            						    <a class="list-group-item list-group-item-action bg-light" href="?action=<?=$listMenuF->idM?>"><?=$listMenuF->labelM ?><span class="sr-only">(current)</span></a>
            					    </li>
            					<?php endforeach; ?>
            						<!--end--->	 
                      </ul>
                    </div>
                  </nav>
            	  <!--All forms and page--->
                  <?php
            			$UrlMenu=isset($_GET["action"])? $_GET["action"]:""; 
            			$UrlForm=isset($_GET["formnow"])? $_GET["formnow"]:"";
            			$IDtuple=isset($_GET["IDtuple"])? $_GET["IDtuple"]:"";
            			if($testbtn='Valider'){				   
            			   if($UrlMenu!=''){	
            			              switch($UrlForm){
            							case(5):
            								
                                            require_once("../jqueryAJAX-insert/senddata.php");
            								
            								
            								
            								//require_once("../view/form/menu/menu.php");
            								//$libelle=htmlentities(addslashes(@$_GET["labelmenu"]));
            								//$obs=htmlentities(addslashes(@$_GET["obstext"]));
            								//ajoutercolis($libelle,$obs);
            						    break;
            				
            							}
            			
            						}
            			}
            			
            			
            	?>
                 </div>
            	   <!--All forms and page   IDtuple=6423  IDtuple=-1--->
                </div>
                <!-- /#page-content-wrapper -->
              </div>
              <!-- /#wrapper -->




            • Partager sur Facebook
            • Partager sur Twitter

            Conflit entre Bootstrap Ajax Jquery et PHP

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            • Editeur
            • Markdown