Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to achieve similar facebook no refresh ajax update, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

The code is as follows:

(document) .ready (function ()

{

$('.edit _ link') .click (function ()

{

$('.text _ wrapper') .hide ()

Var data=$ ('.text _ wrapper') .html ()

$('.edit') .show ()

$('.editbox') .html (data)

$('.editbox') .focus ()

});

$(".editbox") .mouseup (function ()

{

Return false

});

$(".editbox") .change (function ()

{

$('.edit') .hide ()

Var boxval = $(".editbox") .val ()

Var dataString = 'data='+ boxval

$.ajax ({

Type: "POST"

Url: "update_profile_ajax.php"

Data: dataString

Cache: false

Success: function (html)

{

$('.text _ wrapper') .html (boxval)

$('.text _ wrapper') .show ()

}

});

});

$(document) .mouseup (function ()

{

$('.edit') .hide ()

$('.text _ wrapper') .show ()

});

});

Body

{

Font-family:Arial, Helvetica, sans-serif

Font-size:12px

}

.mainbox

{

Width:250px

Margin:50px

}

.text _ wrapper

{

Border:solid 1px # 0099CC

Padding:5px

Width:187px

}

.edit _ link

{

Float:right

}

.editbox

{

Overflow: hidden; height: 61pxbot solid 1px # 0099CC; width:190px; font-size:12px;font-family:Arial, Helvetica, sans-serif; padding:5px

}

Edit

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.