Inline text change not updating on ajax request (but changes on DB)
I'm using a script I found for changing a line of text on the go (you click on it and an input shows). It works fine without doing anything to the database but when I add my code for an update, it will update the DB but won't refresh the text after it submits. I'm totally lost now since I've been at it for hours, maybe I'm missing something very basic.
My JS:
$.ajaxSetup({
url: '/ajax/nombreruta.php',
type: 'POST',
async: false,
timeout: 500
});
$('.editable').inlineEdit({
value: $.ajax({ data: { 'action': 'get' } }).r开发者_JAVA百科esponseText,
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 shows me that after I update my text it returns OK and after I refresh the site it will show the updated text but not before. I started thinking this approach is too much hassle but after so much hours I feel like I'm one step from my solution...
EDIT:
I'm using this plugin: http://yelotofu.com/2009/08/jquery-inline-edit-tutorial/
And my html is just
<span class="editable">Text</span>
Your code works fine for me....
Here's the demo app I put together (asp.net, but basically the same minus the database).
Just to be clear: Press Enter to save. Click off to cancel (since you removed the buttons).
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]
Not sure what else to tell you, but maybe something here will give you an idea...
加载中,请稍侯......
精彩评论