Javascript avec la page JSP

**ouilibona** · 09/09/2014, 00h47

Bonsoir les ami(es), je fais un javascript sur ma page jsp , sa march mais j'ai trouver le code trop basique , j'aimerais contrôler les espaces le numero de telephone et l'adresse email ,je sais pas si quelqu'un peut m'aider ou en m'envoyon sur un site de javascript ou un tuto.
Mon deuxieme problemes j ai un javascript AJAX sa marche seulment sur le tableau que j'ai créer j'aimerais a ce que si l' utilisateur click sur le lien UPDATE l AJAX charge le formulaire de modification sur la meme page pas besoin de rediriger la page , si quequ'un peut m'aide pour mes deux problemes MERCI d'avance et voici le code

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
132
133
134
135
136
137
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href = "css/style.css">
<link href="css/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.20.min.js" type="text/javascript"></script>
<title>Insert title here</title>
<script type="text/javascript">
    $(document).ready(function () {
        //$('tr:even').addClass('fondalternatif');
        $('tr:even').css('background-color', '#EFF3FB');
        $('tr:odd').css('background-color', '#FFFFFF');
        $('tr').hover(function () {
            $(this).css('background-color', 'silver');
        },
            function () {
                $('tr:even').css('background-color', '#EFF3FB');
                $('tr:odd').css('background-color', '#999999');
            });
        $.ajaxSetup({ cache: false });
        $(".editDialog").click(function (e) {
            e.preventDefault();
            var url = $(this).attr('href');
            $("#details").dialog({
                title: '',
                autoOpen: false,
                resizable: false,
                height: 500,
                width: 500,
                show: { effect: 'drop', direction: "up" },
                modal: true,
                draggable: true,
                open: function (event, ui) {
                    $(this).load(url);
                },
                close: function (event, ui) {
                    $(this).dialog('close');
                }
            });
            $("#details").dialog('open');
            return false;
        });
    });
</script>
<script type="text/javascript">
function verif_champ()
{
	if(document.frmAddUser.nom.value=="")
	{
		alert("Le Champ Est Obligatoire Merci !!!");
		document.frmAddUser.nom.focus();
		return false;
	}
	if(document.frmAddUser.prenom.value=="")
	{
		alert("Le Champ Est Obligatoire Merci !!!");
		document.frmAddUser.prenom.focus();
		return false;
	}
	if(document.frmAddUser.adresse.value=="")
	{
		alert("Le Champ Est Obligatoire Merci !!!");
		document.frmAddUser.adresse.focus();
		return false;
	}
	if(document.frmAddUser.telephone.value=="")
	{
		alert("Le Champ Est Obligatoire Merci !!!");
		document.frmAddUser.telephone.focus();
		return false;
	}
 
	if(document.frmAddUser.email.value=="")
	{
		alert("Le Champ Est Obligatoire Merci !!!")
		document.frmAddUser.email.focus();
		return false;
	}
 
}
</script>
</head>
<body>
		<form   method="POST" action='FournisseurController' name="frmAddUser" onSubmit="return verif_champ()">
        <label>Numero fournisseur :</label> <input type="text" readonly="readonly" name="idfournisseur"
            value="<c:out value="${fournisseur.idfournisseur}" />" /> <br /> 
        <label>Nom :</label> <input type="text" name="nom"
            value="<c:out value="${fournisseur.nom}" />" /> <br /> 
        <label>Prenom :</label> <input
            type="text" name="prenom"
            value="<c:out value="${fournisseur.prenom}" />" /> <br /> 
        <label>Adresse :</label> <input
            type="text" name="adresse"
            value="<c:out value="${fournisseur.adresse}" />" /> <br />
        <label>Telephone :</label> <input
            type="text" name="telephone"
            value="<c:out value="${fournisseur.telephone}" />" /> <br />
        <label>Email :</label> <input
            type="text" name="email"
            value="<c:out value="${fournisseur.email}" />" /> <br />
            <input type="submit"  value="Submit"  />
    </form>
	<table border=1>
        <thead>
            <tr>
                <th>Numero fournisseur</th>
                <th>Nom</th>
                <th>Prenom</th>
                <th>Adresse</th>
                <th>Telephone</th>
                <th>Email</th>
                <th colspan=2>Action</th>
            </tr>
        </thead>
        <tbody>
            <c:forEach items="${fournisseurs}" var="fournisseur">
                <tr>
                    <td><c:out value="${fournisseur.idfournisseur}" /></td>
                    <td><c:out value="${fournisseur.nom}" /></td>
                    <td><c:out value="${fournisseur.prenom}" /></td>
                    <td><c:out value="${fournisseur.adresse}" /></td>
                    <td><c:out value="${fournisseur.telephone}" /></td>
                    <td><c:out value="${fournisseur.email}" /></td>
                    <td><a href="FournisseurController?action=edit&Idfournisseur=<c:out value="${fournisseur.idfournisseur}"/>" onclick="editDialog()">Update</a></td>
                    <td><a href="FournisseurController?action=delete&Idfournisseur=<c:out value="${fournisseur.idfournisseur}"/>">Delete</a></td>
                </tr>
            </c:forEach>
        </tbody>
    </table>
</body>
</html>

**sekaijin** · 09/09/2014, 15h18

Après de très longues années de pratique (depuis la fin des années 80) j'en suis arrivé à la conclusion suivante :
il est inutile de mettre le js dans jsp

place ton javascript dans des fichier js et ton html dans la jsp
ça simplifie le travail ça permet au compilateur js de travailler proprement
et ça évite les em@rdes

pour ton problème
merci de lire la charte du forum et de ne poster que le HTML produit et non le code de ta JSP
pour info un afficher la souce dans ton navigateur te montre le HTML

pour tes vérifs utilise les regex tu peux les tester sur http://regex101.com/

pour ton histoire de formulaire tu cherche à faire trop compliqué

fais une page HTML avec la table
et place dans la même page un DIV contenant le formulaire.
tu mets au départ le display du DiV à hidden

lorsque l'utilisateur clique tu copie les données de la ligne de tableau à éditer dans le formulaire
et tu affiche le DIV

lorsque l'utilisateur valide le formulaire tu recopie les valeur dans la table et tu les envoie par ajax au serveur.
enfin du cache le DIV.

A+JYT

**ouilibona** · 10/09/2014, 19h04

Bonjour Merci pour la reponse le problem de javascript est deja resolut, on fait peut etre j'ai mal expliqué mon probleme, j'un formulaire de modifiacation ,mais si je veux modifier un enregistement pas besoin d'aller sur une page , j'aimerai a ce que si je click sur le lien UPDATE sur mon tableau il me charge sa dans ajax ,c'est sa Merci d'avance

**sekaijin** · 11/09/2014, 06h57

je t'ai à répondu à la fin de mon post précédent

A+JYT

**ouilibona** · 19/09/2014, 20h51

merci c'est gentil

Javascript avec la page JSP

JavaScript

Discussions similaires

Partager

Partager