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