I am trying to modify the list view of my Joomla component to display my table's data in a more user-friendly fashion. It currently simply displays all data in a regular table with columns and rows, like such:

But I want the data to display partly in the title, partly in a drop-down menu. I have made an example of the format I am shooting for on jsfiddle.

The thing is, I am new to PHP and I am not sure how to turn my static HTML code into dynamic PHP code. I want each row to display its data with an independently-functioning dropdown menu (the click events are currently linked together). What's more, I want each row to have its own "indicator light" which shows how full each classroom is based on that row's own cap and att values.

If I could see some example code, it would be very helpful. I need to dynamically fill each session menu and dynamically change the status indicator using javascript. It's just too big of a next step to wrap my mind around all at once.

I assume I need to put my rows in a list format, fill the list out dynamically using PHP, and then somehow iterate through a loop in my javascript, calling the att/ cap values for each row and modifying the respective css values for ul .sessions li:nth-child(x).css('background','red');

For individual operation of the dropdowns you can assign a single class to the dropdown to act as the element trigger, then assign an ID to each dropdown and use $(this) as the event target.
– Terry CarterMay 8 '17 at 21:28

1

Take a look at this quick adjustment to your fiddle. It will show you what I am referring to about the dropdowns opening individually. You can use the value of $i in your foreach as the unique ID for each generated set of data. jsfiddle.net/wn71Lh5v/14
– Terry CarterMay 8 '17 at 21:37

I modified your code here jsfiddle.net/wn71Lh5v/15 as I want the dropdown to trigger on the dropbtn click and not text click. Can you help me with implementing the $i variable in my foreach loop? Here is the foreach loop I wrote, but when rendered, the id simply remains '$i' and doesn't generate a unique value: jsfiddle.net/m74n77ot/1 What am I doing wrong? Thanks!
– NathanaelMay 9 '17 at 15:00

Oh and just as an FYI, if you are using the dropbtn class on a div, you can get rid of the <A> tag around your open / close text. It is pointless to have if the div is the trigger and not an href.
– Terry CarterMay 10 '17 at 19:03

1 Answer
1

The jQuery function was operating against all elements with the assigned target class. The result of that was all dropdowns opening simultaneously. The resolution was to assign a unique ID to each of the dropdown elements and use the jQuery function to open the targets assigned ID using $(this). Example of the jQuery code for the dropdown below.