2

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: Current database list view

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');

Here is the code for my current table display, in case it is helpful:

    <table class="table table-striped" id="sessionList">
        <thead>
        <tr>
            <?php if (isset($this->items[0]->state)): ?>
                <th width="5%">
    <?php echo JHtml::_('grid.sort', 'JPUBLISHED', 'a.state', $listDirn, $listOrder); ?>
</th>
            <?php endif; ?>

                            <th class=''>
                <?php echo JHtml::_('grid.sort',  'COM_MERAKIAC_SESSIONS_ID', 'a.id', $listDirn, $listOrder); ?>
                </th>
                <th class=''>
                <?php echo JHtml::_('grid.sort',  'COM_MERAKIAC_SESSIONS_DATE', 'a.date', $listDirn, $listOrder); ?>
                </th>
                <th class=''>
                <?php echo JHtml::_('grid.sort',  'COM_MERAKIAC_SESSIONS_TIME', 'a.time', $listDirn, $listOrder); ?>
                </th>
                <th class=''>
                <?php echo JHtml::_('grid.sort',  'COM_MERAKIAC_SESSIONS_TITLE', 'a.title', $listDirn, $listOrder); ?>
                </th>
                <th class=''>
                <?php echo JHtml::_('grid.sort',  'COM_MERAKIAC_SESSIONS_TEACHER', 'a.teacher', $listDirn, $listOrder); ?>
                </th>
                <th class=''>
                <?php echo JHtml::_('grid.sort',  'COM_MERAKIAC_SESSIONS_LVL', 'a.lvl', $listDirn, $listOrder); ?>
                </th>
                <th class=''>
                <?php echo JHtml::_('grid.sort',  'COM_MERAKIAC_SESSIONS_NOTES', 'a.notes', $listDirn, $listOrder); ?>
                </th>
                <th class=''>
                <?php echo JHtml::_('grid.sort',  'COM_MERAKIAC_SESSIONS_JR', 'a.jr', $listDirn, $listOrder); ?>
                </th>
                <th class=''>
                <?php echo JHtml::_('grid.sort',  'COM_MERAKIAC_SESSIONS_CAP', 'a.cap', $listDirn, $listOrder); ?>
                </th>
                <th class=''>
                <?php echo JHtml::_('grid.sort',  'COM_MERAKIAC_SESSIONS_ATT', 'a.att', $listDirn, $listOrder); ?>
                </th>
                <th class=''>
                <?php echo JHtml::_('grid.sort',  'COM_MERAKIAC_SESSIONS_SID', 'a.sid', $listDirn, $listOrder); ?>
                </th>


                            <?php if ($canEdit || $canDelete): ?>
                    <th class="center">
                <?php echo JText::_('COM_MERAKIAC_SESSIONS_ACTIONS'); ?>
                </th>
                <?php endif; ?>

        </tr>
        </thead>
        <tfoot>
        <tr>
            <td colspan="<?php echo isset($this->items[0]) ? count(get_object_vars($this->items[0])) : 10; ?>">
                <?php echo $this->pagination->getListFooter(); ?>
            </td>
        </tr>
        </tfoot>
        <tbody>
        <?php foreach ($this->items as $i => $item) : ?>
            <?php $canEdit = $user->authorise('core.edit', 'com_merakiac'); ?>

                            <?php if (!$canEdit && $user->authorise('core.edit.own', 'com_merakiac')): ?>
                    <?php $canEdit = JFactory::getUser()->id == $item->created_by; ?>
                <?php endif; ?>

            <tr class="row<?php echo $i % 2; ?>">

                <?php if (isset($this->items[0]->state)) : ?>
                    <?php $class = ($canChange) ? 'active' : 'disabled'; ?>
                    <td class="center">
    <a class="btn btn-micro <?php echo $class; ?>" href="<?php echo ($canChange) ? JRoute::_('index.php?option=com_merakiac&task=session.publish&id=' . $item->id . '&state=' . (($item->state + 1) % 2), false, 2) : '#'; ?>">
    <?php if ($item->state == 1): ?>
        <i class="icon-publish"></i>
    <?php else: ?>
        <i class="icon-unpublish"></i>
    <?php endif; ?>
    </a>
</td>
                <?php endif; ?>

                                <td>

                    <?php echo $item->id; ?>
                </td>
                <td>

                    <?php echo $item->date; ?>
                </td>
                <td>
                <?php if (isset($item->checked_out) && $item->checked_out) : ?>
                    <?php echo JHtml::_('jgrid.checkedout', $i, $item->uEditor, $item->checked_out_time, 'sessions.', $canCheckin); ?>
                <?php endif; ?>
                <a href="<?php echo JRoute::_('index.php?option=com_merakiac&view=session&id='.(int) $item->id); ?>">
                <?php echo $this->escape($item->time); ?></a>
                </td>
                <td>

                    <?php echo $item->title; ?>
                </td>
                <td>

                    <?php echo $item->teacher; ?>
                </td>
                <td>

                    <?php echo $item->lvl; ?>
                </td>
                <td>

                    <?php echo $item->notes; ?>
                </td>
                <td>

                    <?php echo $item->jr; ?>
                </td>
                <td>

                    <?php echo $item->cap; ?>
                </td>
                <td>

                    <?php echo $item->att; ?>
                </td>
                <td>

                    <?php echo $item->sid; ?>
                </td>


                                <?php if ($canEdit || $canDelete): ?>
                    <td class="center">
                        <?php if ($canEdit): ?>
                            <a href="<?php echo JRoute::_('index.php?option=com_merakiac&task=sessionform.edit&id=' . $item->id, false, 2); ?>" class="btn btn-mini" type="button"><i class="icon-edit" ></i></a>
                        <?php endif; ?>
                        <?php if ($canDelete): ?>
                            <a href="<?php echo JRoute::_('index.php?option=com_merakiac&task=sessionform.remove&id=' . $item->id, false, 2); ?>" class="btn btn-mini delete-button" type="button"><i class="icon-trash" ></i></a>
                        <?php endif; ?>
                    </td>
                <?php endif; ?>

            </tr>
        <?php endforeach; ?>
        </tbody>
    </table>

Any insight is appreciated. Thank you!

Improve this question
8
  • 1
    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 Carter ♦
    Commented May 8, 2017 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 Carter ♦
    Commented May 8, 2017 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!
    – Nathanael
    Commented May 9, 2017 at 15:00
  • 1
    You weren't echoing the value of $i in your new fiddle example. Try this one jsfiddle.net/m74n77ot/2
    – Terry Carter ♦
    Commented May 10, 2017 at 18:59
  • 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 Carter ♦
    Commented May 10, 2017 at 19:03

1 Answer 1

Reset to default
2

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.

//PHP LOOP FOR EACH ITEM
<?php foreach ($this->items as $i => $item) : ?>
<div class="topb">
   <div class="sessind"></div>
   <div class="fll"><?php echo $item->time; ?></div>
   <div class="fll"><?php echo $item->title; ?></div>
   <div class="dropbtn" data-id="<?php echo $i; ?>"><a>open</a></div>
</div>
<div class="moredta" id="data_<?php echo $i; ?>">
   <div class="leftc">
      <p><b>teacher:</b> <?php echo $item->teacher; ?></p></div>
   <div class="rightc">
      <p><b>level:</b> <?php echo $item->lvl; ?></p></div>
   <div class="notes">
      <p><b>notes:</b> <?php echo $item->notes; ?></p></div>
</div>
<?php endforeach; ?>

Here is the jQuery function for manipulating the element via a class declaration and unique ID

$(document).ready(function(){
    $(".dropbtn").on("click",function(e){
            var dataid = $(this).data("id");
        $(this).text(function(i, text){
          return text === "open" ? "close" : "open";
        })
        $(this).toggleClass('active');
        $("#data_"+dataid).slideToggle('fast');
        e.preventDefault();
    });

    var att = 4,
        cap = 5;
    if(att === cap){
        $(".sessind").css('background','red'),
        $(".dropbtn").off("click"),
        $(".dropbtn a").text("full");
    }else if(att >= cap - 2 && att != cap){
        $(".sessind").css('background','yellow');
    }else if(att < cap - 2){
        $(".sessind").css('background','lime');
    }
});

The tag can also be replaced with a span tag in the dropbtn so it can be styled with CSS. If the href gets replaces with a span you can remove the e.preventDefault() line from the click function.

Glad my answer helped you figure everything out.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.