Ajax is not working properly

Hi Guy,

This is a serious trouble for me. I have a view like this




<div id="OP">

<?php

	

	$criteria=new CDbCriteria();

	$criteria->select="id,name";

	$opdata=Testing::model()->findAll($criteria);

	

	foreach ($opdata as $row){

		

		$this->renderPartial('_testOpData',array('row'=>$row));

		

	}


?>

</div>


<?php $this->widget('application.extensions.fancybox.EFancyBox', array(

//         'target'=>'a#inline',


		'target'=>'input.inline-edit',

        'config'=>array(

                'scrolling'=> 'no',

                'titleShow'=> true,

        		'onclick'=>'',

        		       		

        	),

        )

	);

	

	

?>



in ‘_testOpData’ it is like




<div style='border: 1px solid #CCC; margin-top: 10px; width: 300px;'><div style='float: left; width: 200px;'><?php echo $row['name']; ?></div>

<?php

		echo CHtml::ajaxSubmitButton('submit', CHtml::normalizeUrl(array('site/ajaxTestEdit')), 

					     array(

					       

					       'data'=>'js:jQuery("#temp-form").serialize()+"&isAjaxRequest=filldata"',

					       'dataType'=>'json',               


					       'success'=>"function(data){

	

					       		if (data.error=='false'){

					       			if (data.name!=''){

					       				$('#edit-name').val(data.name);

					       			}

					       		}

					       }",    

					     	

					     ), 

					     array(

					        'id'=>''.$row['id'],

					     	'href'=>'#edit',

					     	'class'=>'inline-edit',

					     	'value'=>'edit'

					     )); 

		echo "</div>"; 

	?>



In my controller




public function actionAjaxTestSubmit(){

		$model = new Testing;

		if ($_POST['isAjaxRequest']=='1'){			

			$model->attributes = $_POST['Testing'];			

			$model->save();

			

			//print_r($model);

			

			//$this->render('test', array('model'=>$model));

			$criteria=new CDbCriteria();

			$criteria->select="id,name";

			$opdata=Testing::model()->findAll($criteria);

			//print_r($opdata);

			/*

			if(count($editdata,1)>0){

				echo CJSON::encode(array(

					'error'=>'false',

                    'opdata'=>$opdata,    

				));

				

			}*/

			

			foreach ($opdata as $row){

				

				$this->renderPartial('_testOpData',array('row'=>$row));

								

			}

			

			

			

			echo "<script type='text/javascript'>

					parent.$.fancybox.close();

					document.getElementById('name').value='';

					$('input').click(function(event) {

				        var form = document.forms['temp-form'];

				        form.elements['temp-name'].value = event.target.id;

				        

				    });

				  </script>";

				  

		}

		

		

	}




But the problem is that when i click to edit button after loading the page the ajax is working as desired. But after submitting some new value when the list is updated by ajax, if I click to edit then ajax is not working properly. fancy box is not opening then. But if I refresh the page again… then it starts to work.

Please help me Guys…

The problem is that the even is attached to the HTML element only once as the second renderPartial (the contents returned by the AJAX call) do not have its output to be processed (check function renderPartial for the correct parameter to process output)…

Nevertheless, I totally disagree with the way you do render your solution. IMHO I would make a script in my view that will delegate a live event to the buttons; do not use ajaxSubmitButton at all, just render a button and the within the view write a JS like so:




// if i have rendered on my view this element to edit a row:

// <a class="inline-edit" href="#'.$row['id'].'">Edit</a>

document.on('click','a.inline-edit',function(){

   var id = $(this).prop('href').substring(1);

   $.ajax .... // do your ajax call here

}



Subsequent calls will maintain event binding with new elements on page…

I would really like to know the best possible way to render my solution over here. Please show me the correct way to solve this kind of ajax problem. Hope you don’t mind anything as I am new to this. I would also like to know the flaws in my shown code. Please …