Bonsoir,
J'ai un tableau avec, on va dire, 5 colonnes contenant de chiffres ou des phrases. En dernière ligne de ce tableau, j'ai un formulaire pour pouvoir saisir une nouvelle ligne.
Lorsque l'on clique sur le bouton, j'insert les données sans recharger la page.
Se que j'aimerais, c'est "rechargé" aussi l'affichage de mon tableau dans son entier pour ajouter la dernière ligne saisie à mon tableau.
J'ai essayé de mettre un ID à mon tableau mais ca complique pas mal la chose...
Une idée?
Portekoi
Version complète: sur le forum Webmaster Hub : Modification de l'affichage
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > AjaX et JavaScript
Ce que je fais dans ce cas là, c'est mettre tout le tableau dans une page (qui ne contient donc que lui).
Quand j'ajoute une ligne, je l'ajoute en base, je supprime le tableau, et je le recharge en entier depuis la page en question.
Tu utilises quelle librairie pour gérer les appels AJAX ?
Quand j'ajoute une ligne, je l'ajoute en base, je supprime le tableau, et je le recharge en entier depuis la page en question.
Tu utilises quelle librairie pour gérer les appels AJAX ?
Hum j'ai le code au boulot.
En gros, il lance une requete sur une page de script ASP qui ne contient que des fonctions, récupère les valeurs de mon formulaire. Cette dernière me renvoie un tableau en résultat et je découpe le tout en javascript pour garnir mes champs à l'affichage.
Le souci, c'est que je vais avoir au moins 25 tableaux dans le même genre sur une seule page
En gros, il lance une requete sur une page de script ASP qui ne contient que des fonctions, récupère les valeurs de mon formulaire. Cette dernière me renvoie un tableau en résultat et je découpe le tout en javascript pour garnir mes champs à l'affichage.
Le souci, c'est que je vais avoir au moins 25 tableaux dans le même genre sur une seule page
Re,
J'ai trouvé. En faites, je dois gérer 2 états : l'un pour charger le tableau dès le début, le second pour faire l'insertion de la saisie.
Voici mon code :
Le fichier index.asp
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!--#INCLUDE virtual="/includes/connexion.asp"-->
<!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>
<script type="text/javascript" language="javascript">
function makeRequest(url, type_action, zone_info, msgdeb, msgfin) {
if (zone_info != ''){document.getElementById(zone_info).innerHTML = msgdeb;}
var httpRequest = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
httpRequest = new XMLHttpRequest();
if (httpRequest.overrideMimeType) {
httpRequest.overrideMimeType('text/xml');
// Voir la note ci-dessous à propos de cette ligne
}
}
else if (window.ActiveXObject) { // IE
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
if (!httpRequest) {
alert('Abandon Impossible de créer une instance XMLHTTP');
return false;
}
httpRequest.onreadystatechange = function() { alertContents(httpRequest, type_action, zone_info, msgfin); };
httpRequest.open('GET', url, true);
httpRequest.send(null);
}
function alertContents(httpRequest, type_action, zone_info, msgfin) {
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
//alert(httpRequest.responseText); alert(type_action);
if(type_action=='GetData'){ GetData(httpRequest.responseText) }
if (zone_info != ''){document.getElementById(zone_info).innerHTML = msgfin;}
} else {
alert('Un problème est survenu avec la requête.');
}
}
}
function trim(s) {return s.replace(/^\s+/, '').replace(/\s+$/, '');}
function GetData(donnee){
//var tableau=donnee.split('|||||');
//document.getElementById('resultat').innerHTML = tableau[0];
document.getElementById('tab1').innerHTML = donnee;
}
</script>
<body>
<div id="tab1"></div>
<div id="resultat">
Recherche...
</div>
</form>
<script language="javascript">
makeRequest('GetInfo.asp?saction=TestCol&ssaction=view', 'GetData', 'resultat', 'Recherche en cours')
</script>
</body>
</html>
Voici le fichier contenant toutes les fonctions :
GetInfo.asp
<!-- #include virtual="/includes/_Declaration.asp" -->
<!-- #include virtual="/includes/_FncAndSubHTML.asp" -->
<!-- #include virtual="/includes/connexion.asp" -->
<!-- #include virtual="/includes/function.asp" -->
<%
Dim col1, col2, col3, col4, col5, variable_retour, ssaction
col1 = request("col1")
col2 = request("col2")
col3 = request("col3")
col4 = request("col4")
col5 = request("col5")
'saction = request("saction")
ssaction = request("ssaction")
session.CodePage = 65001
select case request("saction")
case "TestCol"
if ssaction <> "view" then
sql = "Insert into intranet.dbo.temp_table VALUES ('"&col1&"', '"&col2&"', '"&col3&"', '"&col4&"', '"&col5&"')"
set rs = conn.execute(sql)
end if
'if not rs.eof then
'variable_retour = "Enregistrement Ok|||||"
%>
<table cellpadding="3" cellspacing="0">
<tr>
<td>
Colonne 1
</td>
<td>
Colonne 2
</td>
<td>
Colonne 3
</td>
<td>
Colonne 4
</td>
<td>
Colonne 5
</td>
<td></td>
</tr>
<%
sql = "select * from intranet.dbo.temp_table"
set rs = conn.execute(sql)
do while not rs.eof
%>
<tr >
<td>
<%=rs("col1")%>
</td>
<td>
<%=rs("col2")%>
</td>
<td>
<%=rs("col3")%>
</td>
<td>
<%=rs("col4")%>
</td>
<td>
<%=rs("col5")%>
</td>
<td> </td>
</tr>
<%
rs.movenext
loop
set rs = nothing
%>
<form action="" name="Formulaire">
<tr>
<td>
<input type="text" value="" name="col1" />
</td>
<td>
<input type="text" value="" name="col2" />
</td>
<td>
<input type="text" value="" name="col3" />
</td>
<td>
<input type="text" value="" name="col4" />
</td>
<td>
<input type="text" value="" name="col5" />
</td>
<td>
<input type="button" name="action" value="Enregistrer" onclick="makeRequest('GetInfo.asp?saction=TestCol&col1=' + Formulaire.col1.value + '&col2=' + Formulaire.col2.value + '&col3=' + Formulaire.col3.value + '&col4=' + Formulaire.col4.value + '&col5=' + Formulaire.col5.value, 'GetData', 'resultat', 'Recherche en cours')" />
</td>
</tr>
</table>
<%
'else
'variable_retour = "0|||||"
'end if
end select
response.Write variable_retour
response.Flush()
Session.CodePage = 1252
%>
Bien évidemment, faut nettoyer mais ca peut servir de piste de réflexion pour certains
A toute
Portekoi
J'ai trouvé. En faites, je dois gérer 2 états : l'un pour charger le tableau dès le début, le second pour faire l'insertion de la saisie.
Voici mon code :
Le fichier index.asp
CODE
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!--#INCLUDE virtual="/includes/connexion.asp"-->
<!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>
<script type="text/javascript" language="javascript">
function makeRequest(url, type_action, zone_info, msgdeb, msgfin) {
if (zone_info != ''){document.getElementById(zone_info).innerHTML = msgdeb;}
var httpRequest = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
httpRequest = new XMLHttpRequest();
if (httpRequest.overrideMimeType) {
httpRequest.overrideMimeType('text/xml');
// Voir la note ci-dessous à propos de cette ligne
}
}
else if (window.ActiveXObject) { // IE
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
if (!httpRequest) {
alert('Abandon
Impossible de créer une instance XMLHTTP');return false;
}
httpRequest.onreadystatechange = function() { alertContents(httpRequest, type_action, zone_info, msgfin); };
httpRequest.open('GET', url, true);
httpRequest.send(null);
}
function alertContents(httpRequest, type_action, zone_info, msgfin) {
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
//alert(httpRequest.responseText); alert(type_action);
if(type_action=='GetData'){ GetData(httpRequest.responseText) }
if (zone_info != ''){document.getElementById(zone_info).innerHTML = msgfin;}
} else {
alert('Un problème est survenu avec la requête.');
}
}
}
function trim(s) {return s.replace(/^\s+/, '').replace(/\s+$/, '');}
function GetData(donnee){
//var tableau=donnee.split('|||||');
//document.getElementById('resultat').innerHTML = tableau[0];
document.getElementById('tab1').innerHTML = donnee;
}
</script>
<body>
<div id="tab1"></div>
<div id="resultat">
Recherche...
</div>
</form>
<script language="javascript">
makeRequest('GetInfo.asp?saction=TestCol&ssaction=view', 'GetData', 'resultat', 'Recherche en cours')
</script>
</body>
</html>
Voici le fichier contenant toutes les fonctions :
GetInfo.asp
CODE
<!-- #include virtual="/includes/_Declaration.asp" -->
<!-- #include virtual="/includes/_FncAndSubHTML.asp" -->
<!-- #include virtual="/includes/connexion.asp" -->
<!-- #include virtual="/includes/function.asp" -->
<%
Dim col1, col2, col3, col4, col5, variable_retour, ssaction
col1 = request("col1")
col2 = request("col2")
col3 = request("col3")
col4 = request("col4")
col5 = request("col5")
'saction = request("saction")
ssaction = request("ssaction")
session.CodePage = 65001
select case request("saction")
case "TestCol"
if ssaction <> "view" then
sql = "Insert into intranet.dbo.temp_table VALUES ('"&col1&"', '"&col2&"', '"&col3&"', '"&col4&"', '"&col5&"')"
set rs = conn.execute(sql)
end if
'if not rs.eof then
'variable_retour = "Enregistrement Ok|||||"
%>
<table cellpadding="3" cellspacing="0">
<tr>
<td>
Colonne 1
</td>
<td>
Colonne 2
</td>
<td>
Colonne 3
</td>
<td>
Colonne 4
</td>
<td>
Colonne 5
</td>
<td></td>
</tr>
<%
sql = "select * from intranet.dbo.temp_table"
set rs = conn.execute(sql)
do while not rs.eof
%>
<tr >
<td>
<%=rs("col1")%>
</td>
<td>
<%=rs("col2")%>
</td>
<td>
<%=rs("col3")%>
</td>
<td>
<%=rs("col4")%>
</td>
<td>
<%=rs("col5")%>
</td>
<td> </td>
</tr>
<%
rs.movenext
loop
set rs = nothing
%>
<form action="" name="Formulaire">
<tr>
<td>
<input type="text" value="" name="col1" />
</td>
<td>
<input type="text" value="" name="col2" />
</td>
<td>
<input type="text" value="" name="col3" />
</td>
<td>
<input type="text" value="" name="col4" />
</td>
<td>
<input type="text" value="" name="col5" />
</td>
<td>
<input type="button" name="action" value="Enregistrer" onclick="makeRequest('GetInfo.asp?saction=TestCol&col1=' + Formulaire.col1.value + '&col2=' + Formulaire.col2.value + '&col3=' + Formulaire.col3.value + '&col4=' + Formulaire.col4.value + '&col5=' + Formulaire.col5.value, 'GetData', 'resultat', 'Recherche en cours')" />
</td>
</tr>
</table>
<%
'else
'variable_retour = "0|||||"
'end if
end select
response.Write variable_retour
response.Flush()
Session.CodePage = 1252
%>
Bien évidemment, faut nettoyer mais ca peut servir de piste de réflexion pour certains
A toute
Portekoi
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.