Can't get split button to reference list item unless I click on the list item

[Ryan Keith]

I'm using several list in my app. For one list, I'm trying to use the split button functionality to delete an item in the list with just a popup.

This list allow a user to add employees from a popup and delete employees from the split button.

My list is populated dynamically from a REST Service when the page loads. Each list item is a grid with a couple labels and data. One piece of data is the ability to change the hours.

My problem is on the deletion. Everything works, except that you must click on the list item to get the correct objectID to delete which is confusing and will cause deletion of the wrong user.

Testing steps:

1. Page loads, try to delete any item with the split button and localStorage is undefined for all split buttons.

2. Click an item, sets the localStorage and now that is the id uses regardless of which split button you check. Select a different list item and now that is the new id regardless of which split button you check.

   What I want is the split buttons to get the id automatically for their corresponding list item without having to click on the list item. In code is seems the split button is nested in the list item so I figured it would be possible but I can't figure it out.

   

[Serhii Kulibaba]

Hello Ryan,

Please clarify, how do you set ID to each item? Is it like in our tutorial https://devcenter.appery.io/documenta... ? (set ID as an attribute) or any other variant?
Also, please clarify, how do you read these IDs? Please inspect these elements to be sure they have correct IDs: https://devcenter.appery.io/documenta...

[Ryan Keith]

Yes, I'm doing it like option 1 in your first link.

Here's my screen shot, my split button is inside the list but I'm having trouble accessing it. Trying to access via multiple javascript/jquery calls like:

--------------------------------------

btnDeleteEmployee javascript: (not working)

--------------------------------------

//alert('employee code list item: ' + document.getElementsByName("employee_code"));

alert('help, employee code: ' + $( ".WorkOrdersDetail_employee_code" ));

but getting undefined

-----------------------------------------

listItemEmployeeTime javascript: (works)

------------------------------------------

However, if I click on the list item first and do a set, then change btnDeleteEmployee javascript to below, it works:

Apperyio.storage.WorkOrderEmployee.set(Apperyio.storage.WorkOrderEmployees.get()[$(this).index()]);
alert('employee code: ' + Apperyio.storage.WorkOrderEmployee.get("$['EMPLOYEE_CODE']"));

--------------------------------------------------

btnDeleteEmployee javascript change but have to click listitem first (works)

---------------------------------------------------

alert('list clicked first, employee code: ' + Apperyio.storage.WorkOrderEmployee.get("$['EMPLOYEE_CODE']"));

------------------------------------------------------------

I just want to click the delete button and invoke a service with the employee code that's in the list item.

thanks for your help,
Ryan

[Serhii Kulibaba]

Sorry, but I can't find any attribute with item's ID in your page. Could you show us, where did you set it?

[Ryan Keith]

On the page load, the service is invoked:

[Serhii Kulibaba]

You can read employee code on the click event of the grid.
Please use JS code below:
prevar employeeCode = $(this).find("[name=employee_code]").text();/pre

[Ryan Keith]

That works, but is not intuitive.

It requires the user to click the list item first, then the delete button.

I just want to show a list of items, each with a delete split-button, and when the user clicks the split-button, it automatically either reads or is already set to to the employee_code.

[Ryan Keith]

Ok, looks like I figured it out. I had to use the parent() function:

var employeeCode = $(this).parent("li").find("[name=employee_code]").text();