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">

<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<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

piero5673

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.

remstorvarld

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

piero5673

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 ?

remstorvarld

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 -->