我正在使用我找到的一个脚本来在旅途中更改一行文本(单击它,就会显示一个输入)。它在不对数据库做任何操作的情况下运行良好,但当我添加代码进行更新时,它会更新数据库,但在提交后不会刷新文本。我现在完全迷失了,因为我已经做了几个小时了,也许我错过了一些非常基本的东西。
我的JS:
$.ajaxSetup({
url: '/ajax/nombreruta.php',
type: 'POST',
async: false,
timeout: 500
});
$('.editable').inlineEdit({
value: $.ajax({ data: { 'action': 'get' } }).responseText,
buttons: '',
cancelOnBlur: true,
save: function(event, data) {
var html = $.ajax({
data: { 'action': 'save', 'value': data.value }
}).responseText;
//alert("id: " + this.id );
return html === 'OK' ? true : false;
}
});
nombreruta.php:
<?php session_start();
$action = isset($_POST) && $_POST['action'] ? $_POST['action'] : 'get';
$value = isset($_POST) && $_POST['value'] ? $_POST['value'] : '';
include $_SERVER['DOCUMENT_ROOT'] ."/util-funciones.php";//for my db functions
$cnx=conectar();
$sel="select * from ruta where id_ruta='".$_SESSION['ruta']."'";
$field=mysql_query($sel, $cnx);
if($row=mysql_fetch_object($field)){
$data = $row->nombre;
}
switch ($action) {
// retrieve data
case 'get':
echo $data;
break;
// save data
case 'save':
if ($value != '') {
$sel="update ruta set nombre='".$value."' where id_ruta=".$_SESSION['ruta'];
mysql_query($sel,$cnx) or die(mysql_error());
$_SESSION['data'] = $value;
echo "OK";
} else {
echo "ERROR: no se han recibido valores.";
}
break;
// no action
default:
echo "ERROR: no se ha especificado accion.";
break;
}
Firebug向我显示,在我更新文本后,它会返回OK,在我刷新网站后,它将显示更新后的文本,但之前不会。我开始觉得这种方法太麻烦了,但经过这么多小时,我觉得我离解决方案只有一步之遥。。。
编辑:
我正在使用这个插件:http://yelotofu.com/2009/08/jquery-inline-edit-tutorial/
我的html只是
<span class="editable">Text</span>
您的代码对我来说很好…
这是我组装的演示应用程序(asp.net,但基本相同,减去数据库)。
需要明确的是:按Enter键保存。单击"关闭"可取消(因为您删除了按钮)。
HTML
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script>
<script type="text/javascript" src="https://raw.github.com/caphun/jquery.inlineedit/master/jquery.inlineedit.js"></script>
<script type="text/javascript">
$(function(){
$.ajaxSetup({
url: 'Test.ashx?' + window.location.search.substring(1),
type: 'POST',
async: false,
timeout: 500
});
$('.editable').inlineEdit({
value: $.ajax({ data: { 'action': 'get'} }).responseText,
buttons: '',
cancelOnBlur: true,
save: function (event, data) {
var html = $.ajax({
data: { 'action': 'save', 'value': data.value }
}).responseText;
return html === 'OK' ? true : false;
}
});
});
</script>
</head>
<body>
<span class="editable">Test 1</span>
</body>
</html>
C#
public void ProcessRequest(HttpContext context)
{
//Custom Object to Get and Format my Connection String from the URL
QueryStringObjects QSO = new QueryStringObjects(context.Request, "InlineAjaxTest");
//Look for any GET or POST params named 'action'
switch (context.Request.Params["action"])
{
//If 'action' = 'save' then....
case "save":
//Open a connection to my database (This is a custom Database object)
using (DataBrokerSql SQL = GetDataBroker(QSO.Connstring))
{
//Create a SQL parameter for the value of the text box
DbParameter[] Params = {
new SqlParameter("@val", context.Request.Params["value"])
};
//Execute an Insert or Update
SQL.ExecSQL(@"UPDATE
Test_InlineAJAX
SET
Value = @val
IF @@ROWCOUNT=0
INSERT INTO
Test_InlineAJAX
VALUES
(@val)", Params);
}
//Return OK to the browser
context.Response.Write("OK");
break;
default:
//Open a connection to my database
using (DataBrokerSql SQL = GetDataBroker(QSO.Connstring))
{
//Get Value from my table (there's only one row so no need to filter)
object obj = SQL.GetScalar("Select Value From Test_InlineAJAX");
//If my value is null return "" if not return the value of the object
context.Response.Write(obj != null ? obj.ToString() : "");
}
break;
}
}
SQL
CREATE TABLE [dbo].[Test_InlineAJAX](
[Value] [varchar](255) NULL
) ON [PRIMARY]
不知道还能告诉你什么,但也许这里的一些东西会给你一个想法。。。