jQuery jeditable example
The jeditable is useful parts to make dynamic input form. This example shows you how to use it and co-work with the server side program and database.
- Access and work the example
- Included jQuery files
- Set up Html
- Set up normal text input
- Report change to the server script
- Set up ajax select area
- Get candidate items via Ajax
- Get label string from the id in server side
- Install script
- Testing automation
In order to access this example, please access the url below or "jQuery jeditable" link from the top page.
Then the page below will appear.
By clicking the normal text area, the text input appears and you can input text.
By licking the text, select form appear and youcan select the item.
By licking the text, also select form appear and youcan select the item. But in this case, the items are dynamically gotten from ajax.
This example is the first step of using jQuery jeditable. I'll explain about the normal text area and the ajax select area.
The source code is in the "ALINOUS_HOME/samples/jeditable/" folder.
In order to change the theme of jQuery, please take a look at jQuery Dialog. The way to do that is same.
The html to set jeditable plugin is below.
The p tab can be the jeditable part, and set the css class, "editable_textarea", "editable_select" and "editable_select_json". These classes are used when enable jeditable plugin.
At first, set up the editable text.
The script, whose url is "/samples/jeditable/save.alns", is accessed when the value changed.
This is the source code of " /samples/jeditable/save.alns".
In this case, this source code is dummy. But by setting breakpoint og the debugger, you can watch the parameters when it accessed.
The parameter "$IN.id" indicates the id of p tag. And the "$IN,value" does the updated value.
On actual case, you can update database record by refering these parameters. This url has to return value, the value should be one to show in the p tag after editing it.
Next, set up the select input area using candidates come form server side program via ajax.
On this case, it has callback funtion called when the input changed, instead of url called then like previous text input.
This function access the url to save the result and returns the label of record for the id. The url is "/samples/jeditable/returnlabel.alns", and I'll mention later.
This function also change the value of select input in the html. if you have to change the value of other form input, you should use manual callback function like this.
This is the source code to make json string to be the candidate items of select box.
In this code, the sample_items has the records of items, and making json string manually.
This is the source code of url, which the callback function on changing value.
This example uses database table, so you have to setup it, if you manually do. The install script is at "/install/install.alns".
The part you need to work this example is below.
This example is testable code, there is more example to do testing automation. Please take a look at Testing jQuery jeditable example.