Add javascript to ajax generated table

Hi,

through a drop down I generate the rows of a table:


<?php echo CHtml::dropDownList('someId','', $someSelectValues,

            array(

                'ajax' => array(

                    'type'=>'POST',

                    'url'=>CController::createUrl('controller/action'),

                    'update'=>'#tableId',

                    'data'   => array(  'oneVariable'=>'js:jQuery(this).val()',

                                        'anotherVariable'=>'js:jQuery(someId).val()'),

                    )

                )

        ); ?>

In the controller I then generate the table rows and pass them successfully back to the view where they get displayed.

Now I want a simple javascript to trigger when I click on a table row:


$(\'#tableId tr\').click(function() {

                                    alert($(this).attr(\'id\'));

                                });

However this doesn’t work if I have it added to the view right in the beginning.

I also tried adding it within the controller action when the drop down list updates the table. In this action I tried adding the javascript with


Yii::app()->clientScript->registerScript('tableRowClick',

                                '$(\'#tableId tr\').click(function() {

                                    alert($(this).attr(\'id\'));

                                });');

Again, not successful.

Do you have any idea what else I could try?

[size="3"]My overall goal is to accomplish the following:[/size]

Whenever I click on a table row I’d like another AJAX event to trigger. I would like to update another drop down depending on the table row selected.

If the above doesn’t put me in the right direction, maybe you can point me towards the right way?

Thank you,

jrn

Yii provides a getSelection() function:




var ids = $.fn.yiiGridView.getSelection('test-grid');



Also the thread Reacting on click anywhere in cgridviews row could direct you in the right direction.

Have you tried with


$("#tableId tr").live("click", function() {

    alert($(this).attr("id"));

});

Thank you. This did the trick!

I will have to look into what .live() is doing :)

Do you have any idea how I could accomplish this?

Can I somehow use the yii’s ajax() method for this?

$.live() is depreciated, Have a look at on

http://api.jquery.com/on/

Thank you :)

How would I rewrite the following code for on?


$("#tableId tr").live("click", function() {

    alert($(this).attr("id"));

});

I do not get the desired result using


$("#tableId tr").on("click", function() {

    alert($(this).attr("id"));

});

To rewrite it with on:


$(document).on("click", "#tableId tr", function() {

    alert($(this).attr("id"));

});

See here: http://api.jquery.com/live/

In fact, Yii’s ajax() helper writes the jQuery ajax code for you. You can do it yourself (hint: inspect the rendered HTML output). For instance:


$(document).on("click", "#tableId tr", function() {

    alert($(this).attr("id"));

    $.ajax({

        "type":"POST",

        "url":"controller/action",

        "cache":false,

        "data":$(this).parents("form").serialize(),

        "success":function(resultThatIsDropdownHTML){

            $("#anotherDropdownContainingDiv").html(resultThatIsDropdownHTML);

        }

    });

    return false;

});

Thanks a lot bennouna!! :)

Your posts were a great help.