Search code examples
javascriptphpcsscakephphighlighting

(CAKEPHP) Highlight a row in a Product table for a comparison condition (no hovering needed)

How do you find the right approach to getting this comparison to work? I've tried all kinds of approaches. I even used ids, but they don't respond. If I do this "gumboots" string check though, it does work. "gumboots" was just a string value for a product name that existed somewhere on the table. This is how I know I do not need PHP at all for this, despite the tables displayed in PHP in the Index view below. Any idea? I would appreciate it.

Here's the javascript

$('#example tbody tr td').each(function() 
{

                 var p_no_in_stock = parseInt(document.getElementById('p_no_in_stock')).value;
                 var p_reorder_quantity = parseInt(document.getElementById('p_reorder_quantity')).value;


//if ($product['Product']['p_no_in_stock'].val() < $product['Product']['p_reorder_quantity'].val())
if ($(this).text() == "gumboots") 
//if ($(this).p_no_in_stock < $(this).p_reorder_quantity)
{
//$("#row_" +" td").effect("highlight", {}, 1500);
$(this).parent().attr('style','background:red');
$(this).parent().css('font-weight','bold');

} 

});

And this is the application in a View called Products.index

<div class="active">

        <h2><?php echo __('Products'); ?></h2>

        <table cellpadding="0" cellspacing="0" class="table table-striped table-bordered" id ="example">

            <tr>

                <th><?php echo $this->Paginator->sort('p_name', 'Name'); ?></th>
                <th><?php echo $this->Paginator->sort('category_name', 'Category'); ?></th>
                <th><?php echo $this->Paginator->sort('p_no_in_stock','No. in Stock'); ?></th>
                <th><?php echo $this->Paginator->sort('p_reorder_quantity', 'Re-order Quantity'); ?></th>
                <th class="actions"><?php echo __('Actions'); ?></th>
            </tr>
            <tbody>
            <?php foreach ($products as $product): ?>
                <tr>

                    <td><?php echo h($product['Product']['p_name']); ?></td>
                    <td> <?php echo $this->Html->link($product['Category']['category_name'], 
                    array('controller' => 'categories', 'action' => 'view', $product['Category']['id'])); ?>
                    </td>      
                    <td id = "p_no_in_stock" type ="number" ><?php echo h($product['Product']['p_no_in_stock']); ?>&nbsp;</td>
                    <td id ="p_reorder_quantity" type ="number" ><?php echo h($product['Product']['p_reorder_quantity']); ?>&nbsp;</td>
                    <td class="actions">
                        <?php echo $this->Html->link(__('View'), array('action' => 'view', $product['Product']['id']), array('class' => 'btn btn-mini')); ?>
                        <?php echo $this->Html->link(__('Edit'), array('action' => 'edit', $product['Product']['id']), array('class' => 'btn btn-mini')); ?>
                        <?php echo $this->Form->postLink(__('Delete'), array('action' => 'delete', $product['Product']['id']), array('class' => 'btn btn-mini'), __('Are you sure you want to delete # %s?', $product['Product']['id'])); ?>
                    </td>
                </tr>
            <?php endforeach; ?>
                </tbody>
        </table>

Thanks in advance.

SOLVED Problem

Remove type number

Edit the tr tag to 

<tr class ="item-row"> after foreach part.
Solution

  • First, a few things you need to change:

    1. Remove that type="number" attribute from your td-tag. The type-attribute only applies to input-tags
    2. User classes in place of ids (for p_no_in_stock and p_reorder_quantity). IDs are intended for unique items (aka: appear on the screen only once), while classes do not have this limitation. And since you are generating td's in a loop... chances are pretty high that you will have more than 1 of these.

    Take a look at this this fiddle: http://jsfiddle.net/FTh4m/ to see a working some working code (it assumes you have jQuery on the page).

    If you're not too familiar with jQuery, I can explain what each line is doing.

    As for why what you currently have doesn't work... the explanation in rather long, but I'll do my best to explain:

    The select you have ($('#example tbody tr td')) is going to return an array of ALL td's on the screen. And when you do document.getElementById(), it will only grab the first instance of that ID that it finds in the DOM (I think IE actually search bottom-up, but that's a story for another day). So in that each-loop, you are actually going through every single td on the page, not just the td's you care about.

    A pro-tip for the future, when trying to debug this type of client-side JS, open the Chrome Dev Tools (or FireBug, if you're a FireFox kind of person) and start testing your jQuery selectors in the console.