内联文本更改不在ajax请求上更新(但在DB上更改)


Inline text change not updating on ajax request (but changes on DB)

我正在使用我找到的一个脚本来在旅途中更改一行文本(单击它,就会显示一个输入)。它在不对数据库做任何操作的情况下运行良好,但当我添加代码进行更新时,它会更新数据库,但在提交后不会刷新文本。我现在完全迷失了,因为我已经做了几个小时了,也许我错过了一些非常基本的东西。

我的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]

不知道还能告诉你什么,但也许这里的一些东西会给你一个想法。。。

相关文章: