11548 sujets

JavaScript, DOM et API Web HTML5

Popup jquery et insertion SQL

Bonjour tout le monde!

je commence tout juste à m'amuser avec Ajax, et je viens de pondre un code qui me permet via un formulaire d'ajouter des infos à ma base de données. Ajax me sert à vérifier que les cases sont bien remplis avant de transmettre le formulaire, puis à l'envoyer à ma page php via $.ajax(. jusque là tout fonctionne.
maintenant, j'aimerais que tout ça s'insère dans une popup jquery, j'utilise ça pour faire une popup: http://www.jquerypopup.com/
et là, malheur, mon code javascript ne s'esxecute plus! pourquoi donc?

le formulaire HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="AjouterSoudeur.css" rel="stylesheet" type="text/css" title="TITRE" />
<script src="../DataTables-1.9.3/media/js/jquery.js" type="text/javascript"></script>
<script src="AjoutSoudeur.js" type="text/javascript"></script>
<title>Document sans titre</title>
</head>
<body>
<div id="contact_form">
<form action="" name="AjoutSoudeur" id="AjouterSoudeur">
    <fieldset>
    
        <label for="NomSoudeur" id="NomSoudeur_label">Nom</label>
        <input type="text" name="NomSoudeur" id="NomSoudeur" size="30" value="" class="text-input" />
        <label class="error" for="NomSoudeur" id="NomSoudeur_error">Veuilliez remplir ce champs.</label>
        <br /> 
        
        <label for="PrenomSoudeur" id="PrenomSoudeur_label">Prenom</label>
        <input type="text" name="PrenomSoudeur" id="PrenomSoudeur" size="30" value="" class="text-input" />
        <label class="error" for="PrenomSoudeur" id="PrenomSoudeur_error">Veuilliez remplir ce champs.</label> 
        <br />
        
        <label for="DateSoudeur" id="DateSoudeur_label">Date</label>
        <input type="date" name="DateSoudeur" id="DateSoudeur" size="30" value="" class="text-input" />        
        <label class="error" for="DateSoudeur" id="DateSoudeur_error">Veuilliez remplir ce champs.</label> 
        <br />
        
        <label for="SoudeurLocalisation" id="SoudeurLocalisation_label">Localisation</label>
        <input type="text" name="SoudeurLocalisation" id="SoudeurLocalisation" size="30" value="" class="text-input" />
        <label class="error" for="SoudeurLocalisation" id="SoudeurLocalisation_error">Veuilliez remplir ce champs.</label> 
        <br />
                
        <label for="SoudeurMatricule" id="SoudeurMatricule_label">Matricule</label>
        <input type="text" name="SoudeurMatricule" id="SoudeurMatricule" size="30" value="" class="text-input" />
        <label class="error" for="SoudeurMatricule" id="SoudeurMatricule_error">Veuilliez remplir ce champs.</label> 
        <br />
    
    	<input type="submit" id="submit" class="submit" value="Ajouter"/>
    </fieldset>
</form>

</div>
</body>
</html>


le code javascript qui véirife la siaise et envoie les infos à la page php:
// JavaScript Document
$(function() {
  $('.error').hide()
  $(".submit").click(function() {
    // validate and process form here
	 $('.error').hide();  
      var NomSoudeur = $("input#NomSoudeur").val();  
        if (NomSoudeur == "") {  
      $("label#NomSoudeur_error").show();  
      $("input#NomSoudeur").focus();  
      return false;  
    }  
        var PrenomSoudeur = $("input#PrenomSoudeur").val();  
        if (PrenomSoudeur == "") {  
      $("label#PrenomSoudeur_error").show();  
      $("input#PrenomSoudeur").focus();  
      return false;  
    }  
        var DateSoudeur = $("input#DateSoudeur").val();  
        if (DateSoudeur == "") {  
      $("label#DateSoudeur_error").show();  
      $("input#DateSoudeur").focus();  
      return false;  
    } 
	    var SoudeurLocalisation = $("input#SoudeurLocalisation").val();  
        if (SoudeurLocalisation == "") {  
      $("label#SoudeurLocalisation_error").show();  
      $("input#SoudeurLocalisation").focus();  
      return false;  
    }
	    var SoudeurMatricule = $("input#SoudeurMatricule").val();  
        if (SoudeurMatricule == "") {  
      $("label#SoudeurMatricule_error").show();  
      $("input#SoudeurMatricule").focus();  
      return false;  
    }
	
	var dataString = 'NomSoudeur='+ NomSoudeur + '&PrenomSoudeur=' + PrenomSoudeur + '&DateSoudeur=' + DateSoudeur + '&SoudeurLocalisation=' + SoudeurLocalisation + '&SoudeurMatricule=' + SoudeurMatricule;  
    //alert (dataString);return false;  
    $.ajax({  
      type: "post",  
      url: "AjouterSoudeur.php",  
      data: dataString,  
      success: function(data) {
		console.log(data);  
        $('#contact_form').html("<div id='message'></div>");  
        $('#message').html("<h2>Contact Form Submitted!</h2>")  
        .append("<p>We will be in touch soon.</p>")  
        .hide()  
        .fadeIn(1500, function() {  
          $('#message').append("<img id='checkmark' src='images/check.png' />");  
        });  
      }  
    }); 
	
	
	
	
	
	
	
	
	
    return false;  	
	
  });
});


la page PHP qui traite les infos et les ajoute en base:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Document sans titre</title>
</head>
<body>
<?php
/*session_start();
if(!isset($_SESSION['Droit']))
{
	echo "<SCRIPT LANGUAGE='JavaScript'>\n
	function redirect() {\n
							window.location='conectionLDAP.html'\n
						}\n
	setTimeout('redirect()',100); // delai en millisecondes\n
	</SCRIPT>\n";
	}
else
{	*/
	
	include('misc.inc');
	$connexion = mysql_connect($host, $user, $password);
	//echo $_POST["NomSoudeur"];	
	/*if (!$connexion) {
		die("Error: " . mysql_error());*/
	
	//}
/*if(isset($_POST["NomSoudeur"]) and isset($_POST["PrenomSoudeur"]) and isset($_POST["DateSoudeur"]) and isset($_POST["SoudeurLocalisation"]) and isset($_POST["SoudeurMatricule"]))
{*/
	mysql_select_db($bdd);
	$NomSoudeur	= $_POST["NomSoudeur"];
	$PrenomSoudeur = $_POST["PrenomSoudeur"];
	$DateSoudeur = $_POST["DateSoudeur"];
	$SoudeurLocalisation = $_POST["SoudeurLocalisation"];
	$SoudeurMatricule = $_POST["SoudeurMatricule"];
			
	$sql="INSERT INTO ".$TB_Soudeur."(NomSoudeur,PrenomSoudeur,DateSoudeur,SoudeurLocalisation,SoudeurMatricule) VALUES ('$NomSoudeur','$PrenomSoudeur','$DateSoudeur','$SoudeurLocalisation','$SoudeurMatricule')";
	mysql_query($sql,$connexion) or die("Erreur SQL:" .mysql_error());
	
	echo "Soudeur Ajouté";
	//}
//}
?>
</body>
</html>


La page qui appel la popup, c'est le bouton "Ajouter un Soudeur" tout en bas du code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Document sans titre</title>
</head>

<body>
<?php
/*session_start();
if(!isset($_SESSION['Droit']))
{
	echo "<SCRIPT LANGUAGE='JavaScript'>\n
	function redirect() {\n
							window.location='conectionLDAP.html'\n
						}\n
	setTimeout('redirect()',100); // delai en millisecondes\n
	</SCRIPT>\n";
	}
else
{	*/
	include('misc.inc');
	$connexion = mysql_connect($host, $user, $password);
	if (!$connexion) {
		die("Error: " . mysql_error());
	}
	mysql_select_db($bdd);
	$result = mysql_query("SELECT * FROM ".$TB_Soudeur);
//}
?>
<!DOCTYPE html>
<html>
    <head>
        <title>DataTables</title>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <script src="../DataTables-1.9.3/media/js/jquery.js" type="text/javascript"></script>
        <script src="../jPopup release-0.0.1/modal.popup.js" type="text/javascript"></script>
        <script src="../DataTables-1.9.3/media/js/jquery.dataTables.js" type="text/javascript"></script>
        <script src="naturalSort.js" type="text/javascript"></script>
		<script type="text/javascript" language="javascript"> //script pour naturalsort
        jQuery.fn.dataTableExt.oSort['natural-asc']  = function(a,b) {
            return naturalSort(a,b);
        };
         
        jQuery.fn.dataTableExt.oSort['natural-desc'] = function(a,b) {
            return naturalSort(a,b) * -1;
        };
        </script>
        <script type="text/javascript" charset="ISO-8859-1"> //script pour Datatables
            $(document).ready(function(){
                $('#datatables').dataTable({
                    "sPaginationType":"full_numbers",
                    "aaSorting":[[0, "asc"]],
                    "bJQueryUI":true,
					"aoColumns": [
									{ "sType": "natural" },
									{ "sType": "natural" },
									{ "sType": "natural" },
									{ "sType": "natural" },
									{ "sType": "natural" },
									{ "sType": "natural" },
								 ]
                });
            })
        </script>
        <script type="text/javascript" charset="ISO-8859-1"> //Script pour Jpopup
			$(document).ready(function() {
		 
			//Change these values to style your modal popup
			var source = "AjouterSoudeur.html";
			var width = 600;
			var align = "center";
			var top = 300;
			var padding = 10;
			var backgroundColor = "#FFFFFF";
			var borderColor = "#000000";
			var borderWeight = 2;
			var borderRadius = 5;
			var fadeOutTime = 300;
			var disableColor = "#666666";
			var disableOpacity = 40;
			//var loadingImage = "relative_path_to_file/loading.gif";
		
			//This method initialises the modal popup
			$(".modal").click(function() {
		 
				modalPopup( align,
					top,
					width,
					padding,
					disableColor,
					disableOpacity,
					backgroundColor,
					borderColor,
					borderWeight,
					borderRadius,
					fadeOutTime,
					source/*,
					loadingImage*/ );
					
			});	
		 	
			//This method hides the popup when the escape key is pressed
			$(document).keyup(function(e) {
				if (e.keyCode == 27) {
					closePopup(fadeOutTime);
				}
			});
		 
		  });
	  	</script>
              
        <style type="text/css">
            @import "../DataTables-1.9.3/media/css/demo_table_jui.css";
            @import "../DataTables-1.9.3/media/css/jquery.dataTables.css";
        </style>
        <style>
            *{
                font-family: arial;
            }
        </style>
       <?php /*?> <?php
        	if (strpos($_COOKIE["Soudeur_DTI"],"User")<>0)
			{
			$name = substr($_COOKIE["Soudeur_DTI"],0,strpos($_COOKIE["Soudeur_DTI"],"User"));
			echo "Bienvenue $name !";
			}
			else if (strpos($_COOKIE["Soudeur_DTI"],"Admin")<>0)
			{
			$name = substr($_COOKIE["Soudeur_DTI"],0,strpos($_COOKIE["Soudeur_DTI"],"Admin"));
			echo "<br>Bienvenue $name ! <a href=./logout.php>Se deconnecter</a></br>";
			echo "<br>Vous avez les droits d'aministration</br>";
			}
		?><?php */?>
    </head>
    <body>
        <div>
            <table id="datatables" class="display">
                <thead>
                    <tr>
                        <th>Nom</th>
                        <th>Pr&eacute;nom</th>
                        <th>Rep&egrave;re</th>
                        <th>Date</th>
                        <th>Localisation</th>
	                    <th>Matricule</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    while ($row = mysql_fetch_array($result)) {
                        ?>
                        <tr>
                            <td><?=$row['NomSoudeur']?></td>
                            <td><?=$row['PrenomSoudeur']?></td>
                            <td><?=$row['RepereSoudeur']?></td>
                            <td><?=$row['DateSoudeur']?></td>
                            <td><?=$row['SoudeurLocalisation']?></td>
                            <td><?=$row['SoudeurMatricule']?></td>
                        </tr>
                        <?php
                    }
                    ?>
                </tbody>
            </table>
        </div>
    </body>
     
<?php
	if ($_SESSION['Droit']="Admin")
	{
	echo "<input type=submit class='modal' value='Ajouter un Soudeur'/>";
	}
?>
</html>





</body>
</html>

Modifié par milouz (19 Aug 2012 - 18:56)
Bonjour,
Tu ajoute ton input.modal hors du body, je ne sais pas si ça peut être la cause du problème, mais peut-être... Je ne sais pas trop comment jQuery effectue ses recherches.

Et en fait, je me rends compte d'un truc un peu bizarre... C'est quoi cette élément html à l'intérieur du premier body ? Pourquoi tu as toute une page dans une autre page ?
euh oui, effectivement, c'est assez moche, j'ai viré les balises en trop... du coup 
<?php
	if ($_SESSION['Droit']="Admin")
	{
	echo "<input type=submit class='modal' value='Ajouter un Soudeur'/>";
	}
?>
se retrouve bien dans le body, mais rien de nouveau dans le comportement du bouzin Smiley bawling
Sujet clos
Aller à