We help IT Professionals succeed at work.

How to create simple animation fade in out when adding/removing new row in table using Jquery, Codeigniter?

jimmycdinata
jimmycdinata asked
on
Experts,

How to create simple animation fade in out when adding a new row or removing row in table using Jquery?

When user type something, push save button, update the value to database, add a new row using animation fade in.

When user click delete button, update the value to database, removing the selected row with animation fade out.

Thanks.



 preview form
Comment
Watch Question

Commented:
In this example do you mean the table is pre-existing in the base page, they click the link to open the search box, search and select one of the radio boxes and then click "save" to update the table on the base page fading in the option they selected from the radio boxes? Then beside each table row there is a button to delete that row?

Author

Commented:
This form has different story, I only borrow the picture :).

They type a word, then app search the appropriate record in a table in the database. When a record found, do some update (whatever column or table, maybe timestamp column).

The found record will be added to the table using animation fade-in. Like facebook's update status, or twiter add tweet.

They able to remove the selected row as well using animation fade-out.

Thanks for coming back ghodder.

Commented:
So initially the dialog will open with 1 table showing existing records and will allow them to delete existing rows, but they can also perform a search which will show a second table and allow them to select a new row to add to the pre-existing table?

They can add or remove records to their heart's delight and then click "save" to update the database?

Author

Commented:
You can imagine as a point of sales application not a search form anyway.

Simple example: Scan barcode then add a new row with animation.

Thanks ghodder.

Commented:
Oh right so there's no real search of a database when a barcode is scanned, they just need to scan a bunch of barcodes and they will be added to the list displayed in the table. Each new record will be faded in. If they scan an incorrect barcode they will also be able to click something to remove it from the list and when that occurs, it will be faded out and removed from the table.

Once they've scanned all the barcodes they will click "save".

Author

Commented:
Yes that's right. We can search appropriate barcode in database to know the price and the product's name.
Commented:
Just so you know I am working on this, you can view a live example.

Currently it (re)loads orders from the database and you can enter random values into a new order but it doesn't save them to the database. I'm expecting to have a proper fully database-driven example by the end of the weekend.

Author

Commented:
Thanks ghodder.

*New Order* button is good but I'm expecting a textbox as well right to the button to simplify user enter the value.

The table is awesome. It is meet my expectation.

Thank you so much ghodder, I will wait the full code sample.

Author

Commented:
Hi ghodder,

Is there any good news? I still wait your code.

Thank you so much :)