How to implement ajax updates similar to facebook without refresh
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
