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

In order to access this example, please access the url below or "jQuery jeditable" link from the top page.

http://localhost:8080/samples/jeditable/

Then the page below will appear.

jQuery jeditable example

top of this page

Normal text area

By clicking the normal text area, the text input appears and you can input text.

jeditable text area

top of this page

Select input area

By licking the text, select form appear and youcan select the item.

top of this page

Ajax Select area

By licking the text, also select form appear and youcan select the item. But in this case, the items are dynamically gotten from ajax.

jwditable with ajax

top of this page

Implementation

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.

jQuery jeditable example folder

top of this page

Included jQuery files

This example uses css and JavaScript files of jQuery, listed below.

In order to change the theme of jQuery, please take a look at jQuery Dialog. The way to do that is same.

top of this page

Set up Html

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.

top of this page

Set up normal text input

At first, set up the editable text.

The script, whose url is "/samples/jeditable/save.alns", is accessed when the value changed.

top of this page

Report change to the server script

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.

parameters sent from jeditable

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.

top of this page

Set up ajax select area

Next, set up the select input area using candidates come form server side program via ajax.

The JavaScript to enable the jeditable for the p tag is below.

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.

top of this page

Get candidate items via Ajax

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.

top of this page

Get label string from the id in server side

This is the source code of url, which the callback function on changing value.

top of this page

Install script

This example uses database table, so you have to setup it, if you manually do. The install script is at "/install/install.alns".

location of install script

The part you need to work this example is below.

Testing automation

This example is testable code, there is more example to do testing automation. Please take a look at Testing jQuery jeditable example.



Go to Top