Update tabella con Jquery e Ajax

**ubbicom** · 24-11-2011, 18:55

Ciao a tutti, spero possiate aiutarmi.

Ho preso spunto da questo articolo:

Live Table Edit with Jquery and Ajax:
http://www.9lessons.info/2011/03/liv...-and-ajax.html

E l'ho adattato alle mie esigenze (MYSQL + ASP).

Ho però uno strano problema, in quanto al momento di aggiornare i campi della tabella nella frase inserita o aggiornata, lo script elimina gli spazi tra una parola e l'altra; cioè:

La frase iniziale: Hello world !
che aggiorno come: Hello world and people !

Viene registrata nel db MySQL come: Helloworldandpeople!

Non capisco perchè, anche se tendo ad eliminare un problema lato server, ma penso più ad un problema lato client.

Posto i codici interessati e grazie per l'aiuto:

codice:

   
   
<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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="jquery-1.7.min.js"></script>

<script type="text/javascript"> 
 
$(document).ready(function()
{
$(".edit_tr").click(function()
{
var ID=$(this).attr('id');
$("#UN_"+ID).hide();
$("#RE_"+ID).hide();
$("#VI_"+ID).hide();
$("#CP_"+ID).hide();
$("#CM_"+ID).hide();
$("#PR_"+ID).hide();
$("#RT_"+ID).hide();
$("#RF_"+ID).hide();
$("#RC_"+ID).hide();
 
$("#UN_input_"+ID).show();
$("#RE_input_"+ID).show();
$("#VI_input_"+ID).show();
$("#CP_input_"+ID).show();
$("#CM_input_"+ID).show();
$("#PR_input_"+ID).show();
$("#RT_input_"+ID).show();
$("#RF_input_"+ID).show();
$("#RC_input_"+ID).show();
 
}).change(function()
{
var ID=$(this).attr('id');
var UN=$("#UN_input_"+ID).val();
var RE=$("#RE_input_"+ID).val();
var VI=$("#VI_input_"+ID).val();
var CP=$("#CP_input_"+ID).val();
var CM=$("#CM_input_"+ID).val();
var PR=$("#PR_input_"+ID).val();
var RT=$("#RT_input_"+ID).val();
var RF=$("#RF_input_"+ID).val();
var RC=$("#RC_input_"+ID).val();
 
var dataString = 'id='+ID+'&UN='+UN+'&RE='+RE+'&VI='+VI+'&CP='+CP+'&CM='+CM+'&PR='+PR+'&RT='+RT+'&RF='+RF+'&RC='+RC;
 
$("#UN_"+ID).html('[img]ajax.gif[/img]');
$("#RE_"+ID).html('[img]ajax.gif[/img]');
$("#VI_"+ID).html('[img]ajax.gif[/img]');
$("#CP_"+ID).html('[img]ajax.gif[/img]');
$("#CM_"+ID).html('[img]ajax.gif[/img]');
$("#PR_"+ID).html('[img]ajax.gif[/img]');
$("#RT_"+ID).html('[img]ajax.gif[/img]');
$("#RF_"+ID).html('[img]ajax.gif[/img]');
$("#RC_"+ID).html('[img]ajax.gif[/img]');
 
if(UN.length>0 && RE.length>0 && VI.length>0 && CP.length>0 && CM.length>0 && PR.length>0 && RT.length>0 && RF.length>0 && RC.length>0) 
{
$.ajax({
type: "POST",
url: "UPDATE.asp",
data: dataString,
cache: false,
success: function(html)
{
$("#UN_"+ID).html(UN);
$("#RE_"+ID).html(RE);
$("#VI_"+ID).html(VI);
$("#CP_"+ID).html(CP);
$("#CM_"+ID).html(CM);
$("#PR_"+ID).html(PR);
$("#RT_"+ID).html(RT);
$("#RF_"+ID).html(RF);
$("#RC_"+ID).html(RC);
}
});
}
else
{
alert('ko');
}
 
});
$(".editbox").mouseup(function() 
{
return false
});
 
 
$(document).mouseup(function()
{
$(".editbox").hide();
$(".text").show();
});
});
</script>
</head>
 
<body>
 
<div>
 
<thead>
<th scope="col">UN</th>
<th scope="col">RE</th>
<th scope="col">VI</th>
<th scope="col">CP</th>
<th scope="col">CM</th>
<th scope="col">PR</th>
<th scope="col">RT</th>
<th scope="col">RF</th>
<th scope="col">RC</th>
</thead>
   
<tr id="688" class="edit_tr">
<th scope="col" class="edit_td">
<span id="UN_688" class="text">HELLOWORLD!</span>
<input type="text" value="HELLOWORLD!" class="editbox" id="UN_input_688" />
</th>

<th scope="col" class="edit_td">
<span id="RE_688" class="text">RobertREDFORD</span>
<input type="text" value="RobertREDFORD" class="editbox" id="RE_input_688" />
</th>
 
<th scope="col" class="edit_td">
<span id="VI_688" class="text">FOLLOWME,54</span>
<input type="text" value="FOLLOWME,54" class="editbox" id="VI_input_688" />
</th>
 
<th scope="col" class="edit_td">
<span id="CP_688" class="text">0136</span>
<input type="text" value="0136" class="editbox" id="CP_input_688" />
</th>
 
<th scope="col" class="edit_td">
<span id="CM_688" class="text">TOKYO</span>
<input type="text" value="TOKYO" class="editbox" id="CM_input_688" />
</th>
 
<th scope="col" class="edit_td">
<span id="PR_688" class="text">FI</span>
<input type="text" value="FI" class="editbox" id="PR_input_688" />
</th>
 
<th scope="col" class="edit_td">
<span id="RT_688" class="text">232210</span>
<input type="text" value="232210" class="editbox" id="RT_input_688" />
</th>
 
<th scope="col" class="edit_td">
<span id="RF_688" class="text">000</span>
<input type="text" value="000" class="editbox" id="RF_input_688" />
</th>
 
<th scope="col" class="edit_td">
<span id="RC_688" class="text">329</span>
<input type="text" value="329" class="editbox" id="RC_input_688" />
</th>

</tr>
 
</body>
</table>
</html>

Style.css

codice:

table {
	font: normal 65%/130% Verdana, Arial, Helvetica, sans-serif;
	border-collapse: collapse;
	border: 3px solid #f0f8ff;
	border-top: 5px double #87CEFA;
	border-bottom: 5px double #87CEFA;
	text-align:center; 
    margin-left:10px; 
    margin-right:auto; 
    width:100%;

}
th {
	font: bold 1.1em/120% Verdana, Arial, Helvetica, sans-serif;
	padding: 5px 10px;
	font-variant: small-caps;
	color: #047;
	font-weight: bold;
	text-align: left;
	letter-spacing: -1px;
}
thead th {
	border: 1px solid #87CEFA;
	white-space: nowrap;
	background: #F0F8FF;
	
}
tbody td ,tbody th {
	padding: 5px 10px;
	/*background: #fff;*/
	color: #000;
}
tbody th {
	color: #047;
	font-weight: normal;
	font-variant: normal;
	font-size: 1em;
}
tbody tr.odd {
	border: 1px solid #87CEFA;
}
tbody tr.odd td, tbody tr.odd th {
	background: #F0F8FF;
}
tfoot td, tfoot th {
	border: none;
	padding-top: 10px;
}
caption {
	font-family: "Georgia", serif;
	letter-spacing: 2px;
	font-style: italic;
	text-align: center;
	text-indent: 2em;
	text-transform: uppercase;
	font-size: 100%;
	padding: 10px 0;
	color: #047;
}

table a:link {
	color: #DC143C;
}
table th a:link {
	color: #047;
	text-decoration: none;
}
table a:visited{
	color: #036;
	text-decoration: line-through;
}
table a:hover{
	color: #000;
	text-decoration:none;
}
table a:active{
	color: #000;
}


/*****************************************/

.editbox
{
display:none
}
.editbox
{
font: normal 90%/180% Verdana, Arial, Helvetica, sans-serif;
width:120px;
background-color:#ffffcc;
border:solid 1px #000;
padding:0px;
}
.edit_tr:hover
{
background:url(icon.gif) right no-repeat #80C8E5;
cursor:pointer;
}
.head
{
background-color:#333;
color:#FFFFFF
}

Update.asp

codice:

<% Set cn = Server.CreateObject("ADODB.Connection")
      cn.Open "DRIVER={MySQL ODBC 5.1 Driver};...;OPTION=3;" %>

<% If Request.Form("ID") > 0 then      
      SQL = "UPDATE table "
      SQL = SQL & "  SET "
      SQL = SQL & "  UN = '" & Replace(request.form("UN"),"'", "\'") & "' "
      SQL = SQL & ", RE = '" & Replace(request.form("RE"),"'", "\'") & "' "
      SQL = SQL & ", VI = '" & Replace(request.form("VI"),"'", "\'") & "' "
      SQL = SQL & ", CP = '" & Replace(request.form("CP"),"'", "\'") & "' "
      SQL = SQL & ", CM = '" & Replace(request.form("CM"),"'", "\'") & "' "
      SQL = SQL & ", PR = '" & Replace(request.form("PR"),"'", "\'") & "' "
      SQL = SQL & ", RT = '" & Replace(request.form("RT"),"'", "\'") & "' "
      SQL = SQL & ", RF = '" & Replace(request.form("RF"),"'", "\'") & "' "
      SQL = SQL & ", RC = '" & Replace(request.form("RC"),"'", "\'") & "' "      
      SQL = SQL & "  WHERE 1 AND ID = " & Request.Form("ID")
      cn.execute(SQL)  
%>

<% cn.Close()
   set cn  = nothing %>

Discussione: Update tabella con Jquery e Ajax

Strumenti discussione

Ricerca discussione

Visualizza

Update tabella con Jquery e Ajax

Permessi di invio