embeded renderPartial breaking ajax call

Hi all,

I have the following scenario and problem:

I have two sections of my website sectionA sectionB.

sectionA contains ajaxSubmitButtons of the type:


<?php echo CHtml::ajaxSubmitButton('option', array('create'), array(

                                                'type'=>'post',

                                            'success'=>'function(data){

                                                                ....some jquery logic here for marking the buttons as clicked

                                                                    $("#optionB").html(data);


                                                              }

                                                            ',


                                            ),

                                            array(

                                                'id' => CHtml::encode('button1'.$n),

                                                'class'=>'b'.$n.' button'.$class,

                                                'title'=>'choose option',

                                            )

                                            );

                                        ?>

when clicked it is supposed to add the chosen option into <div id="optionB"></div> The user can choose multiple options meaning he can click different options numerous times in consiquence. Each click need to reload <div id="optionB"></div> and add the new options in a list. Each option after loaded in <div id="optionB"></div> has its name and a delete ajaxSubmitButton next to it which when clicked is supposed to remove the option and again reload <div id="optionB"></div> with the other loaded options still remaining.

so the content can look like this:

<div id="optionB">

option1 remove

options2 remove

option3 remove

</div>

All works fine until I have to remove some of the options.

Now some words on the implementation and the observed problem:

When I click on a button to add an option(this happens in sectionA) I add an option and render the result in <div id=“optionB”></div> through renderPartial(’_sectionB’,array(…),false,true); However in sectionB view I have another renderPartial(’_subSectionB’, array(…),false,true); which renders the name of the chosen option and the delete ajaxSubmitButton.

After reading at least one hunderd posts on the ajax headaches in the forum I am still far from resolving my issue. I process the output on each renderPartial and here is the effect:

Each click on a button from sectionA performs a request to the actionCreate and following performs two GET requests to my assets folder to jquery.js (why twice? what am I doing wrong here?). It successfully loads the option in <div id="optionB"></div>. This happens as many times as I select a new option from sectionA.

When I want to remove some of the options I am exposed to multiple requests autoinitiated to actionRemove. I don’t understand this either since I am processing the output (I thought this resolves this issue). If I attempt to remove one more option from <div id=“optionB”>…options here…</div> then I get dozen of requests and <div id=“optionB”></div> disappears at all.

Randomly I get a whole page refresh on the first option delete click. But this is random and is only on the first click.

I would be very grateful if I can get any sort of assistance on the above. sorry that it is a long read but tried my best to explain it so my obstacle is clear enough.

Thanks in advance,

bettor

This is a very complex situation… I will try to explain a bit…

On every renderPartial when you process the output… all the JS files are registered/included again… that is why you get jQuery and possibly some other "main" files included again and again… the main problem is that when jQuery is loaded "again" it resets all the jQuery environment and because of that you loose all "binded" events…

one way to solve this is to use scriptmap so to not load the jquery again

The other problem is that you probably have some js/jquery code for the remove button… and again on every renderpartial that code is rendered again and again for all the buttons (old and new)… and thats why you get the dozen requests on one click…

The best solution in all the cases (if possible) is to restructure your JS code… and not process the renderpartial result…

By not processing the result of renderpartial no JS code will be loaded again… but in this case for the buttons to work you need to put all the needed code on the first page load…

For example… if you have 10 buttons "remove"… instead of rendering 10 JS functions for every button one… you just use one function that will be attached to all the buttons and get the ID of the row from some button property…

Hi mdomba,

Thanks for the time to read through my poem above and advise. I think I now understand what the issue is and will try to resolve it based on your advice. Will provide feedback on the result.

Best,

bettor