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


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.


 preview form
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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?
jimmycdinataAuthor 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.
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?
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

jimmycdinataAuthor 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.
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".
jimmycdinataAuthor Commented:
Yes that's right. We can search appropriate barcode in database to know the price and the product's name.
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.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jimmycdinataAuthor 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.
jimmycdinataAuthor Commented:
Hi ghodder,

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

Thank you so much :)
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.