I rattled on so long I forgot clarify another thing (and it relates to
Cake). The jquery part is that there is no "data[chkSel]" array to
access. And $('#data') is looking for an element with id="data" which
also doesn't exist. The name of the element, data[chkSel][whatever],
is what will be used for the parameter name when the form is posted.
To get the value you should access the element by id and read its
value.

Have a look at Cake's form naming convention to see the relationship
between id & name, and how name relates to the controller's $data
array.
http://book.cakephp.org/view/1390/Automagic-Form-Elements#Field-naming-convention-1391

In this case, your javascript function only needs to iterate over any
checked input in the button's form, so ids aren't necessary to get at
the values. If you're posting the values to the server for update, you
can either send a bunch of bare values if your controller knows what
to do with them, or you can follow Cake's convention to receive a
Cake-ready $this->data in your action. To do so you should use the
element's name as the parameter.

data[Widget][id]: '237',
data[Widget][foo]: 'bar',
etc.


$('input.ApplyChanges').live('click', function(e)
{
        var $form = $(this).closest('form');
        var data = {};

        $('input[type=checkbox]:checked', $form).each(function()
        {
                data.$(this).attr('name') = $(this).val();
        });
        
        $.ajax({
                url: $form.attr('action'),
                data: data,
                ...
        });
});

I know, that's a lot of "data"s to keep track of.

On Wed, Apr 13, 2011 at 11:37 PM, cricket <[email protected]> wrote:
> On Wed, Apr 13, 2011 at 7:41 PM, Andre Truter <[email protected]> wrote:
>> I am new to cakePHP and JQuery
>>
>> I have a form with a table and each row of the table has a checkbox in
>> one of the cells.
>> THe user then select some of the checkboxes and click a button.
>>
>> I then need to use javascript to only process the rows with checked
>> checkboxes.
>>
>> This is what I have in the view:
>> ...
>> ...
>> <td><?=$form->input('chkSel.'.$index, array('type' => 'checkbox',
>> 'div' => false, 'label'=>false)); ?></td>
>> ...
>> ...
>> <li><a class="btnWhite172" href="#" id="applyChanges">Apply Changes</
>> a></li>
>> ...
>> ...
>> This generates the following HTML:
>> ...
>> ...
>>
>> <td>
>>  <input type="hidden" name="data[chkSel][0]" id="chkSel0_" value="0" /
>>><input type="checkbox" name="data[chkSel][0]" value="1"
>> id="cchkSel0" />                                                </td>
>> ..
>>
>> The javascript:
>>
>> if ($('#applyChanges').length > 0)
>>  {
>>    $('#applyChanges').live('click', function(e)
>>    {
>>      e.preventDefault();
>>
>>      var data = $('#data');
>>      ???
>>      ???
>>
>>    });
>>  }
>>
>> How do I access the "data[chkSel]" array?
>>
>> This is probably a stupid question, but between google and my tired
>> brain at this hour I just cannot find the answer.
>
> if ($('#applyChanges').length > 0)
> {
>        $('#applyChanges').live('click', function(e)
>
> This is not good. It looks to me like you're loading content with
> AJAX, and that it may include an applyChanges link, That's fine, but
> you're using an ID, and page element IDs must be unique. You'll likely
> see all sorts of odd results with jQuery otherwise.
>
> If you can't just use a single button (btw, why not use a button
> instead of a link?) but must have separate ones for each
> table/group/whatever, use a class. Let's say your page has several
> tables (dynamically added) like this:
>
> <form ...>
> <table class="Foo">
>        <caption>Group 3</caption>
>        <thead>
>                <tr>
>                        <th>...</th>
>                        <th>...</th>
>                </tr>
>        </thead>
>        <tfoot>
>                <tr>
>                        <th>...</th>
>                        <th><input type="button" class="ApplyChanges" /></th>
>                </tr>
>        </tfoot>
>        <tbody>
>                <tr>
>                        <td>...</td>
>                        <td><input ... /></td>
>                </tr>
>                <tr>
>                        <td>...</td>
>                        <td><input ... /></td>
>                </tr>
>        </tbody>
> </table>
> </form>
>
>
> $('input.ApplyChanges').live('click', function(e)
> {
>        //e.preventDefault(); not needed now
>
>        var ids = [];
>        var vals = [];
>
>        /* iterate over all checked checkboxes in the button's form's context
>         */
>        $('input[type=checkbox]:checked', 
> this.closest('form')).each(function(i, el)
>        {
>                ids[i] = $(this).attr('id');
>                vals[i] = $(this).val();
>        });
>
>        // do something else
> });
>

-- 
Our newest site for the community: CakePHP Video Tutorials 
http://tv.cakephp.org 
Check out the new CakePHP Questions site http://ask.cakephp.org and help others 
with their CakePHP related questions.


To unsubscribe from this group, send email to
[email protected] For more options, visit this group at 
http://groups.google.com/group/cake-php

Reply via email to