sourcebitsllc / chocolatechip-ui

Mobile Web App Framework
www.chocolatechip-ui.com
MIT License
616 stars 88 forks source link

$.UIEditList callback function when an item is deleted #114

Open andresviviani1 opened 9 years ago

andresviviani1 commented 9 years ago

Hi, I started to use Chui a few days ago... I noticed that you removed $.UIDeletable for newest versions... So, how can I trigger a callback when a item is deleted? I tried to follow the example, but it is using the previous code... Thanks in advance...

Greetings...

sourcebits-robertbiggs commented 9 years ago

Andres,

Thanks for using ChUI. $.UIEditList works just like $.UIDeletable with callbacks. Just pass in a function as the callback with a default parameter for the item that the user will delete. That parameter will refer to the item. This will be the bare node element. If you want to use jQuery functions on it, you'll need to wrap it in $() first. Please look at the example: editable-list.html

Also, you can find more details about how to pass options to $.UIEditList at: http://chocolatechip-ui.com/documentation#/chuijs Tap on the $.UIEditList in the menu on the left.

andresviviani1 commented 9 years ago

Thanks for your response! I tried a lot of times in different ways I and I missed. I modified the example to show a simple alert and it only works after I click on the done button (as they say in the documentation). I would like to know how can I trigger a callback immediately after I delete an item (not when I click on the done button) such as the previous version(3.6.3). I did this:

var editableListOptions = { movable: false, callback: function(item) { alert("hello world"); } }; $('#editList').UIEditList(editableListOptions);

And it only shows the alert when I click on the done button (and not when I delete an item)...

Thanks again for your help...

sourcebits-robertbiggs commented 9 years ago

In that case, you could do something like this:

$('#editList').on('singletap', 'button.delete', function(e) {
  alert($(this).closest('li').find('h3').text());
});

I assume you want to get something, such as an item ID. But this is the same principle.

Please note that this is not a callback. After initializing the Editable list, add this delegated event listener to execute when the delete buttons are tapped.

andresviviani1 commented 9 years ago

Thank you so much... I think the previous behavior was better and this solution is a bit weird... But it works very well!!! Thanks again!!!

sourcebits-robertbiggs commented 9 years ago

well, technically this gives you the ability to provide the user a way of canceling a deletion or move. And because the widget allows deletion and moving, you handle the final state with the done button, that's how native OS handle this type of list.

andresviviani1 commented 9 years ago

Cool! That's true... You are right... For the other hand, I don't know if you help with official documentation (I watched your videos) but it has a few things out of date and also a few spelling errors... I think this is a powerful and helpful framework and it could be better if the documentation was updated as possible. I can let you know some parts where it would be great to fix, to help learning people like me.