Requirements:
JQuery1.4 and above.
Purpose:
You can modify the content of any input or textarea without refresh. After the modification, ajax is submitted to the server and saved. The submission method can be set to post or get.
// If you want to publish this article, please indicate the exit, no outgoing copyright notice, I do not like to see this kind of website. My work website does not indicate the person who is serving Seven {See7di # Gmail.com}
Demo:
Usage:
1.Use the following code to generate html tokens:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> new document </title>
<Script type = 'text/javascript 'src = "img/jquery-1.5.2.min.js"> </script>
<Script type = 'text/javascript 'src = "img/plugin. js"> </script>
<Script type = 'text/javascript '>
$ (Function (){
$. JsEdit ('# A', "work = test & Consumer id = 1", "sys. php", "POST ");
$. JsEdit ('# bb', "work = test & Consumer id = 2 ");
$. JsEdit ('# CC', "work = test & Consumer id = 3", "sys. php", "GET ");
});
// If you want to publish this article, please indicate the exit, no outgoing copyright notice, I don't like this kind of attention. My work isn't marked with the person See7di # Gmail.com.
</Script>
<Style type = 'text/css '>
Input {border: 1px solid white ;}
</Style>
</Head>
<Body>
<Input id = 'A' value = 'This is input1'> <br>
<Input id = 'bb' value = 'This is input2 'style = 'border-color: green;'> <br>
<Textarea id = 'cc' rows = '3' style = 'width: 50% '> This is textarea </textarea> <br>
</Body>
</Html>
2.The content of plugin. js is:
(Function ($ ){
// General ajax plugin internal content
// Object, ajax post-Upload File, ajax submission method
// Usage:
// $. JsEdit ('# id', "work = test & id = 1", "sys. php", "get ");
// $. JsEdit ('# id', "work = test & id = 2", "tst. php ");
// $. JsEdit ('# id', "work = test & id = 3 ");
$. Extend ({JsEdit: function (_ this, _ action, _ file, _ method ){
// The initial response box of the sensor mouse or the original component
Var _ Isedit = false, _ val = "", _ css = "";
$ (_ This). hover (function (){
If (! _ Css) {_ css =$ (_ this). attr ("style ");}
If (! _Isedit){((_this).css ("border", "1px solid # DDD ");}
}, Function (){
If (! _ Isedit) {if (_ css) {$ (_ this ). attr ("style", _ css); _ css = "";} else {$ (_ this ). attr ("style ","");}}
});
// Obtain the initial value by modifying the dot component format
$ (_ This). click (function (){
_ Val = $ (_ this). val ();
Examples (_this).css ("border-width", "1px" Examples .css ("border-style", "solid" Examples .css ("border-color ", "#666 # DDD #666 ");
$ (_ This). focus ();
_ Isedit = true;
});
// If the focus is lost, return the original formula and determine whether the cursor has modified the value.
$ (_ This). blur (function (){
If (_ css) {$ (_ this ). attr ("style", _ css); _ css = "";} else {$ (_ this ). attr ("style ","");}
_ Isedit = false;
Var _ value = $ (this). val ();
If (_ val = _ value) {return false ;}
If (! _ File) {_ file = "sys. php ";}
If (! _ Method) {_ method = "POST";} _ method = _ method. toUpperCase ();
$. Ajax ({
Type: _ method, url: _ file, data: "value =" + encodeURI (_ value) + "&" + _ action,
Success: function (msg ){
If (msg. indexOf ("Error :")! =-1) {alert (msg );}
}
});
});
}});
}) (JQuery)
3.Sys. php content
<? PHP
$ Work = StrToLower ($ _ GET ["work"]);
Switch ($ work ){
Case "test ":
_ Test ();
Break;
}
//------------------------------------------------*
Function _ test (){
OB_start ();
OB_clean ();
$ Region ID = $ _ GET ["Region ID"];
$ Value = $ _ GET ["value"]);
Echo 'upload ID: '. $ upload ID. 'value:'. $ value;
// If a response is prompted, you only need to include Error: In the echo. For example, Echo 'error: There is a response! ';
Exit ();
}
Examples of high-performance plug-ins:
Ajax reads the content of the database and displays it in the column of each day, and uses {jQuery plug-in-General input or textarea regular ajax modification function plug-in} to modify the daily house price statically without refreshing, after the modification is complete, use {use jquyer to display your own bubble prompt} to open the bubble prompt for successful operation, and disable the bubble automatically at a time delay.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
