Si j'entre les détails et quand j'appuie sur le bouton 'ajouter cours' il ajoute à db et la table est chargée avec les nouvelles entrées sans redirigerne peut pas resoumettre un formulaire plusieurs fois dans jquery.ajax (soumission ne travaillant qu'une seule fois)
Si je presse rediriger l'icône, il se charge à nouveau la même forme. Mais quand je presse « ajouter cours » à nouveau pour la deuxième fois, la page est actualisée et il est pas mis à jour dans db
ci-dessous i mes codages ... inclus merci d'avance ..
index.jsp
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle();
$('#listpanel').load('load_course.jsp');
$("#listpanel").hide();
$("#listpanel").show("2000");
});
$("#listflip").click(function(){
$('#listpanel').load('load_course.jsp');
$("#listpanel").slideToggle();
});
});
</script>
<style>
table{
width: 100%;
}
#submit{
width: 100%;
}
#panel,#flip{
//padding:5px;
width: 25%;
text-align: left;
font-size: 17px;
background-color: linen;
//border: solid 1px #3498db;
}
#flip {
background-color: white;
cursor: default;
//display: none;
}
#listpanel,#listflip{
//align: center;
//padding:5px;
text-align: center;
//background-color: #f1f1f1;
//border: solid 1px #3498db;
}
#listflip {
//padding: 5px;
border: solid 2px darksalmon;
//display: none;
}
.reload{
font-size:35px;
cursor:pointer;
}
.reload:hover{
color:darkgoldenrod;
}
</style>
</head>
<body onload="loadpanel()">
<p id="flip" ><b>Click here to add course</b><hr></p>
<div id="panel" >
<div id="form">
<%@include file="formtab.html" %>
</div>
<div id="listpanel"></div>
<p id="listflip">list courses</p>
</div>
<script>
$(document).ready(function(){
$("form").submit(function (e) {
e.preventDefault();
var formId = this.id; // "this" is a reference to the submitted form
if(formId=="courseform")
{
var code = $("input#ccode").val();
var name = $("input#cname").val();
var dataString = 'ccode='+ code + '&cname=' + name;
$.ajax({
type: "POST",
url: "submit",
data: dataString,
success: function() {
$('#listpanel').load('load_course.jsp');
$("#listpanel").hide();
$("#listpanel").show("2000");
$('#form').html("<div id='message'></div>");
$('#message').html("<center><br><b class='reload' id='reload' onclick='load_again();'>↺</b></center>")
.hide()
$("#message").fadeIn("12000");
}
});
return false;
}
});
});
function load_again()
{
//$("#message").remove();
//$("#reload").remove();
$('#form').load('formtab.html');
}
function loadpanel()
{
$("#panel").hide();
}
</script>
</body>
</html>
formtab.html
<form method="post" action="index.jsp" id="courseform">
<table><tr>
<td><input type="text" name="ccode" id="ccode" placeholder="Code" maxlength="5" size="5" required></td>
<td><input type="text" name="cname" id="cname" placeholder="Course Name" required></td></tr>
<tr><td colspan="2"><input type="submit" value="Add course" id="submit"></td></tr></table>
</form>
load_course.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%
try{
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost/crm","root","");
Statement st=con.createStatement();
ResultSet resultset=st.executeQuery("select * from course where 1");
int count=0;
resultset.last();
count=resultset.getRow();
resultset.beforeFirst();
if(count>0){
%>
<table border="1">
<tr><th>Course Code</th><th>Course Name</th></tr>
<%
while(resultset.next())
{
%>
<tr><td><%=resultset.getString(1)%></td><td><%=resultset.getString(2)%></td></tr>
<%
}
%>
</table>
<%
}
else{
out.print("<br>No Course Added Yet <br>");
}
st.close();
con.close();
resultset.close();
}
catch(Exception e)
{
out.print(e);
}
%>
submit.java
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class submit extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out=response.getWriter();
String ccode=request.getParameter("ccode");
String cname=request.getParameter("cname");
try{
Class.forName("com.mysql.jdbc.Driver");
Connection con=DriverManager.getConnection("jdbc:mysql://localhost/crm","root","");
Statement st=con.createStatement();
int flag=0;
flag=st.executeUpdate("insert into course values('"+ccode+"','"+cname+"')");
if(flag>0)
{
out.print("course added");
}
st.close();
con.close();
}
catch(ClassNotFoundException | SQLException e)
{
out.print(e);
}
}
}
Essayez cette façon ajax: $ (document) .on ("cliquez sur", "#clickID", function() {// Votre code }); – Gopal
@Gopal merci ... Ça marche – Sahal