ajax改变div内容,jquery ajax双击div可直接修改div中的内容

最近在做后台功能开发的时候，用到对排序字段的修改，感觉只为了修改一个排序值，而要重新进入编辑页比较麻烦，于是网上找点资料自己动手写了一个jquery双击实现直接修改排序值的效果：

html代码：

{$sort}

JS代码：

//双击修改排序

$('.changeSort').dblclick(function(){

var url = "{:U('setSort')}";

var td = $(this);

var id = td.attr('id');

var text = td.text();

var txt = $("").val(text);

txt.blur(function(){

// 失去焦点，保存值。于服务器交互自己再写,最好ajax

var newText = $(this).val();

$.ajax({

url:url,

type:'POST',

data:{'tid':id,'sort':newText},

dataType:'json',

success:function(res){

if(res.flag==1){

layer.msg(res.msg);

// 移除文本框,显示新值

$(this).remove();

td.text(newText);

}else if(res.flag==3){

layer.msg(res.msg);

txt.val(newText);

}

});

td.text("");

td.append(txt);

});

PHP代码：

/**

* ajax 设置排序值

public function setSort(){

if(IS_POST){

$tid = I('post.tid');

$sort = I('post.sort');

if(!is_numeric($sort)){

$arr = array(

'flag'=>3,

'msg'=>'请输入数字',

'link'=>'',

'content'=>''

);

$this->ajaxReturn($arr);

}

$data = array(

'id'=>$tid,

'sort'=>$sort

);

$this->mod_sort = M('Sort');

$res = $this->mod_sort->save($data);

if($res){

$arr = array(

'flag'=>1,

'msg'=>'排序值设置成功',

'link'=>'',

'content'=>''

);

}else{

$arr = array(

'flag'=>2,

'msg'=>'排序值设置失败',

'link'=>'',

'content'=>''

);

}

}else{

$arr = array(

'flag'=>0,

'msg'=>'请求非法！',

'link'=>'',

'content'=>''

);

}

$this->ajaxReturn($arr);

}

效果如下图：

以上就是本文的全部内容，希望对大家的学习有所帮助。

ajax改变div内容,jquery ajax双击div可直接修改div中的内容相关推荐

JQuery实例（三）- 动态修改Table中的内容
在第一个例子中,二级联动,改变省份的时候,会动态修改另一个下拉框的内容. 这里修改为,改变一个Table中的内容. <%@ page language="java" cont ...
Ajax如何设置contenttype,jquery ajax contentType设置
默认get方法没有contentType,post方法的contentType为:application/x-www-form-urlencoded; charset=UTF-8 (1) 设置成app ...
ajax send报错,jquery ajax beforeSend 提交等待问题
需要使用异步加载async : true 否则不会出现等待效果 $.ajax({ url : $('#form').attr("action"), data: $('#form') ...
html表格td的内容修改,点击table中的td，修改td中的内容功能实现
点击table中的td,修改td中的内容前段时间,需要搭建演示页面,有个功能是实现点击表格中的某一格,能够修改对应格子中的内容,一开始不知道怎么写,在网上找了一下,自己再整合了一下,功能实现的代码如 ...
一分钟修改网页中的内容
欢迎访问新博客~ 有时候需要修改网页中的内容,一般采取的做法是截图网页然后使用PS或特殊工具修改,这种方法麻烦又费力,而且修改后的效果往往不是很好. 现在介绍一种小技巧,可以直接在网页上修改内容,简单 ...
ajax省市联动案例,JQuery+Ajax制作省市联动
$(document).ready(function () { $("#Province").append("" + "--请选择--" + ...
jquery ajax php获取,使用jquery ajax获取php结果
我不知道为什么我会遇到这个困难,但现在是时候我出现了问题 . 使用jquery ajax调用php文件的最佳方法是什么,让它通过$ _GET处理一些输入,返回那些结果并再次使用ajax替换div的内容 ...
jquery ajax 点击按钮,Jquery ajax调用点击事件提交按钮
当用户点击一个提交按钮时,我必须构建一个ajax调用,所以我包含了jquery,并且我写了下面的代码(取自jquery文档):Jquery ajax调用点击事件提交按钮 $(document).rea ...
ajax json 渲染 html,jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
本文实例讲述了jquery+ajax+js实现请求json格式数据并渲染到html页面操作.分享给大家供大家参考,具体如下: 1.先给json格式的数据: [ {"id":1,&q ...

ajax改变div内容,jquery ajax双击div可直接修改div中的内容

ajax改变div内容,jquery ajax双击div可直接修改div中的内容相关推荐

最新文章

热门文章