Dialog et fonctions jQuery

**Schamm** · 23/05/2015, 11h46

Bonjour,

Je me permet de poster ici après moulte tentative pour faire fonctionner mon code. J'utilise JQUERY et UI-APIG pour faire apparaître un formulaire dans une boite de dialog.

Tout fonctionne très bien la première fois, seulement, lors de la ré-ouverture du formulaire en boîte de dialog, mes fonctions jquery sur les select (type onchange) ainsi que le bouton valider ne fonctionne plus.

Je ne trouve malheureusement pas de solution.

Je vous poste ici mon code dans l'espoir qu'une personne aura la solution à mon problème :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<?php
session_start();
if ($_SESSION['login'] == '')
{
    header('Location: index.php');
}
//Recherche des valeurs pour les select de départ
include("includes/connexion.php");
$sql = "SELECT DISTINCT typeMateriel FROM wetp_materieles ORDER BY typeMateriel";
$req1 = mysql_query($sql) or die('Erreur SQL : <br />'.$sql);
?>
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<head>
    <title>/</title>
    <meta name="author" content="/" />
    <meta name="keywords" content="OPTIMISATION, MAGASIN, VEHICULE, STOCK, ENTRETIEN" />
    <meta name="description" content="Outil de gestion" />   
    <link href="template/template.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" media="all" type="text/css" href="jqueryui/jquery-ui.css">
    <LINK REL="SHORTCUT ICON" href="template/iconT.icon">
    <script type="text/javascript" src="jquery/jquery.js"></script>
    <script src="function/jquery_gestionStock.js"></script>
    <script src="function/pageloader.js"></script>
    <script type="text/javascript" src="jqueryui/jquery-ui.js"></script>
    <script type="text/javascript" src="jqueryui/jquery.ui.datepicker-fr.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
        $( "#datepicker" ).datepicker($.datepicker.regional["fr"]);
        $( "#datepickerRetour" ).datepicker($.datepicker.regional["fr"]);
        $( "#datepickerRecherche" ).datepicker($.datepicker.regional["fr"]);
        });
    </script>
</head>
<body>
    <div id="chargement">Chargement...<span id="chargement-infos"></span></div>
    <div id="container">
        <a href='index.php'>
            <div id="wetpLOGO">
            </div>
        </a>
        <!-- Lien appartenant au module ES Materiel -->
        <div id="linkES">
            <a href="tableauBord.php">               
                <div id="tableauBord">
                </div>   
            </a>
            <a href="#">
                <div id="material">
                </div>
            </a>
            <a href="#">
                <div id="inventaire">
                </div>   
            </a>
            <a href="#">
                <div id="transaction">
                </div>   
            </a>
        </div>
            <a id="openMenu" href="#">
                <div id="menu">
                </div>
            </a>
        <!-- Page de visualisation du module entrée sortie matériel avec la liste du matériel sortie -->
        <div id="rechercheMateriel1">
 
        </div>       
        <div id="rechercheMateriel2">
<form name="rechercheFicheMateriel" id="rechercheFicheMateriel"  accept-charset="ISO-8859-1" action="#" accept-charset="UTF-8">
    <table id="tableRechercheMateriel" border="0" width="60%" align="center" bgcolor="#E3E3E3" style="position:absolute;top:12%;left:20%;border:1px solid #DB9393;border-radius: 0px;">
        <tr>
            <td align='center'>
                <input type='text' name='identifiantMateriel' id='identifiantMateriel' value='Matériel :' style='width:300px;height:28px;border-radius:0px;'readonly/><button id='openRecherche' name='openRecherche'>?</button>
            </td>
        </tr>
    </table>
</form>
<div id='menuMateriel'>
    <a href='#' name='general' id='general' style="position:absolute;width:80px;top:20%;left:20%;background-color:#AFD8F3;border:1px solid #76C1F3;border-radius: 0px;text-align:center;border-top-left-radius:10px;border-top-right-radius:10px;text-decoration:none;">
        Général
    </a>
    <a href='#' name='documents' id='documents' style="position:absolute;width:80px;top:20%;left:26%;background-color:#E3E3E3;border:1px solid #E3E3E3;border-radius: 0px;text-align:center;border-top-left-radius:10px;border-top-right-radius:10px;text-decoration:none;">
        Documents
    </a>
    <a href='#' name='interventions' id='interventions' style="position:absolute;width:90px;top:20%;left:32%;background-color:#E3E3E3;border:1px solid #E3E3E3;border-radius: 0px;text-align:center;border-top-left-radius:10px;border-top-right-radius:10px;text-decoration:none;">
        Interventions
    </a>
    <a href='#' name='historique' id='historique' style="position:absolute;width:80px;top:20%;left:38.6%;background-color:#E3E3E3;border:1px solid #E3E3E3;border-radius: 0px;text-align:center;border-top-left-radius:10px;border-top-right-radius:10px;text-decoration:none;">
        Historique
    </a>
</div>
<div id='contenugeneral' style="position:absolute;width:60%;height:20%;top:22.7%;left:20%;border:1px solid #76C1F3;border-radius: 0px;text-align:center;text-decoration:none;">
</div>
<div id='contenudocuments' style="position:absolute;width:60%;height:20%;top:22.7%;left:20%;border:1px solid #76C1F3;border-radius: 0px;text-align:center;text-decoration:none;">
</div>
<div id='contenuinterventions' style="position:absolute;width:60%;height:20%;top:22.7%;left:20%;border:1px solid #76C1F3;border-radius: 0px;text-align:center;text-decoration:none;">
</div>
<div id='contenuhistorique' style="position:absolute;width:60%;height:20%;top:22.7%;left:20%;border:1px solid #76C1F3;border-radius: 0px;text-align:center;text-decoration:none;">
</div>
        </div>
        <div id="dialog-form" title="Recherche d'une fiche véhicule">
            <p class="validateTips">Sélectionner le véhicule en remplissant les champs.</p>
            <form  accept-charset="UTF-8">
                <fieldset>
                    <label for="typeVehicule">Type véhicule</label>
                    <select name="typeVehicule" id="typeVehicule" class="text ui-widget-content ui-corner-all">
                        <option value="value1">Type véhicule</option>
                        <?php
                            While ($donnee = mysql_fetch_assoc($req1))
                            {
                                echo "<option value='".$donnee['typeMateriel']."'>".$donnee['typeMateriel']."</option>";
                            }
                        ?>
                    </select>
                    <label for="marque">Marque</label>
                    <select name="marque" id="marque" class="text ui-widget-content ui-corner-all">
                        <option value="value1">Marque</option>
                    </select>
                    <label for="identifiant">Immatriculation</label>
                    <select name="identifiant" id="identifiant" class="text ui-widget-content ui-corner-all">
                        <option value="value1">Immatriculation</option>
                    </select>
                    <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
                </fieldset>
            </form>
        </div>
    </div>
</body>
</html>

Code JS :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// --------------------------------------------------------------------
// ----------- Le code JQUERY pour les animations de la page ----------
// --------------------------------------------------------------------
// Le DOM est pret
$(document).ready(function() {
    $.pageLoader();
    dialogFunction = $("#dialog-form").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            "Valider": function() {
                $.ajax({ // fonction permettant de faire de l'ajax
                    type: "POST", // methode de transmission des données au fichier php
                    url: "includes/mod_Gestion_rechercheDonnee.php?value=" + $("#identifiant").val() , // url du fichier php
                    success: function(msg)
                    { // si l'appel a bien fonctionné
                        $("#contenugeneral").html(msg);
                    }
                });
                $("#identifiantMateriel").val($("#typeVehicule").val() + " - " +$("#marque").val() + " - " +$("#identifiant").val());
                $(this).dialog("close");
            },
            "Quitter": function() {
            $(this).dialog("close");
            }
        }
    });
    $("#openRecherche").button().on("click", function() {
        $("#identifiantMateriel").val("...");
        dialogFunction.dialog("open");
    });
    $("#typeVehicule").change(function() {
        $.ajax({ // fonction permettant de faire de l'ajax
            type: "POST", // methode de transmission des données au fichier php
            url: "includes/mod_Gestion_MarqueVehicule.php?value=" + $("#typeVehicule").val() , // url du fichier php
            success: function(msg)
            { // si l'appel a bien fonctionné
                $("#marque").html(msg);
            }
        });
    return false; // permet de rester sur la même page à la soumission du formulaire
    });
    $("#marque").change(function() {
        $.ajax({ // fonction permettant de faire de l'ajax
            type: "POST", // methode de transmission des données au fichier php
            url: "includes/mod_Gestion_ImmatVehicule.php?value=" + $("#marque").val()+"&value1=" + $("#typeVehicule").val() , // url du fichier php
            success: function(msg)
            { // si l'appel a bien fonctionné
                $("#identifiant").html(msg);
            }
        });
    return false; // permet de rester sur la même page à la soumission du formulaire
    });
});<br><br>

Je pense que si il y a un probleme il devrait se situer dans ces lignes.

Merci par avance pour votre aide

**mathieu** · 24/05/2015, 15h38

quand tu utilises ".html" tu dois de nouveau accrocher les évènements aux nouvelles balises que tu viens de mettre en place

tu peux par exemple mettre les ".change" et ".on" dans une fonction et appeler cette fonction après l'appel à ".html". il n'y aura pas de boucle infinie puisque ce n'est pas exécuté au même moment

**Schamm** · 26/05/2015, 07h14

Du coup si je comprends bien il faudrait que je mette mes "fonction" .change et .on dans une fonction de type :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$.functionDialog = function() { "mes fonctions utilisées dans le dialog"};

et après faire appel à cette fonction dans le genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$.functionDialog ();

au même moment ou je crée mon dialog ?

Ai-je bien comppris la réponse ou suis je sur la mauvaise piste ?

Merci par avance

Dialog et fonctions jQuery

jQuery

Discussions similaires

Partager

Partager