Update for from_dropdown to add data-attributes. Non-breaking feature…

[cisnez]

``I needed data attributes on my select options in order to update selection based display elements using javascript.

GPT-4 helped me by adding the needed functionality to the form dropdown helper. Would love it if this made it into the official engine so I don't have to track my customization.``

See reply by [DaFa](https://trongate.io/members/profile/Gy866n4Ar32mnLKh) to my Help Bar post data attributes for form_dropdown https://trongate.io/help_bar_threads/display/wZ3KPWtbaq6tkrS7

[cisnez]

Without the code I can't use data- options on form_dropdown. There's no other way to do it. 🤷‍♂️

[trongate]

Can you show me an example of kind of HTML that you're trying to produce?

On Sun, 16 Apr 2023, 16:05 Steven Swanson, @.***> wrote:

Without the code I can't use data- options on form_dropdown. There's no other way to do it. 🤷‍♂️

— Reply to this email directly, view it on GitHub https://github.com/trongate/trongate-framework/pull/141#issuecomment-1510408098, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABAUDVJKCHJN6J6H6IXY633XBQDCTANCNFSM6AAAAAAW5N24VE . You are receiving this because you commented.Message ID: @.***>

[DaFa66]

I can see your point DC - the params to this method are excessive - 6 in total, 4 optional and 2 manditory. I thought it was cool and easy to use - here is an example of using it https://trongate.io/help_bar_threads/display/wZ3KPWtbaq6tkrS7

with the resuilting HTML dropdown like this: and a screen shot of it in action:

Incorpataring data atributes elsewhere in Trongate has it's merits.

Employeee of the month > Q. what is the benefits of using data attributes in html?

A. Data attributes in HTML allow you to add custom data to HTML elements, which can be very useful in a number of ways. Some of the benefits of using data attributes in HTML are:

1. Improved accessibility: Data attributes can be used to add extra information to HTML elements that can be used to improve accessibility for users with disabilities. For example, you can use a data attribute to describe the purpose of a button, which can be read out by screen readers for visually impaired users.

2. Enhanced styling: Data attributes can be used to add custom styling information to HTML elements. This can be particularly useful when working with CSS, as it allows you to target specific elements with styles that are not part of the standard HTML attributes.

3. Better data organization: Data attributes can help you organize your HTML code by allowing you to associate custom data with specific elements. This can be particularly useful when working with complex data sets or when building web applications.

4. Improved JavaScript functionality: Data attributes can be used to store custom data that can be accessed and manipulated using JavaScript. This can be very useful when building interactive web applications, as it allows you to store and retrieve data on the client side without having to make server requests.

Overall, using data attributes in HTML can provide a lot of benefits for web developers and users alike, by improving accessibility, enhancing styling, improving data organization, and enabling better JavaScript functionality.

Just a thought...

[trongate]

That was a really excellent explanation. Thank you!

So, here's the vibe. The current form_dropdown() function is over-engineered. It currently accepts five arguments. It should have only been four. There's no way on God's Earth that I'm adding a sixth argument. That's just Crazytown. Instead of adding more stuff on and making it even more complicated, I'm more interested in taking away things that are not essential.

Here's what I'm thinking:

• The current form dropdown function should be simplified. Instead of having;

$name (string) - Form field name $options (array) optional - A (key/value pair) array of selectable options $selected_key (string) optional - Option key to be marked with 'selected' attribute $attributes (array) optional - A (key/value pair) array of attributes $additional_code (string) optional - A string to be concatinated onto the opening tag

...it should only have:

$name (string) - Form field name $options (array) optional - A (key/value pair) array of selectable options $selected_key (string) optional - Option key to be marked with 'selected' attribute $attributes (array) optional - A (key/value pair) array of attributes

We don't need the 'additional_code' argument. So, let's lose it.

Having looked at your super fancy HTML, it seems to me that the awkward factor is coming from your dropdown options. Instead of just using normal key/value pairs, you have added additional attributes to the options, namely - data-color.

In instances when you want additional attributes to be added to the options, it should be a case of just modifying the array of options that gets passed into the form_dropdown() function. If the $options contains normal key value pairs then we treat as normal. However, if the $options array contains values with a type of 'array', we should assume that it's the fancy shmancey vibe that you have so brilliantly described.

In conclusion: Your idea can be done but instead of making the framework more complicated - to accommodate your needs - we can make it more simple and still achieve the desired end result.

Behold my genius. Behold. Hey, you're not beholding! I can tell! Now... hurry up and behold!

Any thoughts?

DC

[DaFa66]

hahaha I am beholding! 🤩

[cisnez]

Yes simple is better. I like the idea of a multidimensional array for options. Thought about it a lot before extending the trongate helper.

Curious what the array would look like. Something like a YAML dictionary would be powerful. I just looked up PHP dictionary and found this. "Arrays in PHP are stored as value pairs that in other languages would be called a dictionary or a hashtable."

In my current use case I have a dropdown with a part number. Once selected there is a cost and description that are displayed as well as hidden form inputs that get set.

[cisnez]

example code that I need to create

<option value="XX-202301-001" data-item_area="Area 1" data-item_cost="75" data-item_description="Item 1 Description">XX-202301-001 \| Item 1 Description</option>
<option value="XX-202301-002" data-item_area="Area 2" data-item_cost="100" data-item_description="Item 2 Description">XX-202301-002 \| Item 2 Description</option>
<option value="XX-202301-003" data-item_area="Area 3" data-item_cost="150" data-item_description="Item 3 Description">XX-202301-003 \| Item 3 Description</option>

The data- arguments are needed for the javascript listener...

// Add event listener for area item dropdown
document.getElementById('item_name').addEventListener('change', function() {
    // Use this.options[this.selectedIndex] to get the selected option element
    const selectedOption = this.options[this.selectedIndex];
    //     and then access its dataset properties.
    const selectedItemCost = parseFloat(selectedOption.dataset.item_cost) \|\| 0;
    const selectedItemDescription = selectedOption.dataset.item_description \|\| '';
    ItemSelected(this.value, selectedItemCost, selectedItemDescription);
    // Call CalcCost explicitly after ItemSelected    
    CalcCost(); 

...and functions.

function ItemSelected(value, itemCost, itemDescription) {
    // Update the DOM elements for display and hidden submit data
    item_cost = parseFloat(itemCost) \|\| 0;
    document.getElementById('item_cost_display').innerText = '$' + item_cost.toFixed(2);
    document.getElementById('item_cost_hidden').value = item_cost.toFixed(2);
    document.getElementById('item_description_hidden').value = itemDescription;
}

function CalcCost() {
    // Calculate the Total Cost from Quantity and Item Cost
    total_cost = item_cost * quantity;
    document.getElementById('total_cost').innerText = '$' + total_cost.toFixed(2);
  | }

[trongate]

I'd like to have a go at writing something that can handle this. When I'm done I'll run it past you. I'm eager to avoid using YAML because it's something else that people have to learn. This framework has to be easy.

Please do leave this with me and let me have a go at this.

Once I have something, I'll come back to you and see what you think. If you're happy (with or without tweaks), I'll be happy for you to do the pull request with that, so that you get the credit.

The key vibe here is just keeping simple.

I'm about to live stream on YouTube. I'll do it during the livestream - hopefully.

[trongate]

I'm closing this one simply because I haven't looked at it in ages and I'm a confused idiot. Please resubmit if there's something that you think we ought to be adding. I promise to view with more intelligent eyes.