Ajax link within Ajax-generated content

I’m having some trouble getting ajax links to work when they’re created as a result of an earlier Ajax query. I have a page which generates a bunch of content when a link is clicked. The content depends on which link is clicked, but it always contains an Ajax link. I’m trying to get a second Ajax call to simply return some plain text and put this text into an empty div. The code snippets below relate to the second Ajax link

The div to update:

<div id="dialogWrapper"></div>

The action (in my controller) called by my Ajax link:

public function actionAjax(){

	echo "test string";

}

The ajax link:

CHtml::ajaxLink('clickMe', array('controller/ajax'), array('update'=>'#dialogWrapper')

Now, if I place that Ajax link in the main view file for my page, then it works fine - clicking the link populates the div with the string ‘test string’.

Next, if I leave that first link in the main view file, and put a copy of it inside a separate view file, which gets partially rendered by an earlier Ajax query, then both links will do the same thing, as expected.

Next, I tried changing the second link to run a different action:

CHtml::ajaxLink('clickMe', array('controller/anotherAjax'), array('update'=>'#dialogWrapper'));

This is where things get wierd because the link which should now point to the action ‘anotherAjax’ still in fact runs the exact same query as before - i.e. both links still update the div with the result of a query to the action ‘ajax’.

Finally, I tried removing the ajax link from my main view file, so we are left with only the one in the partial view file. In this case, the link does nothing whatsoever. Is there something wierd about the way things are generated by partial view, or when content is produced via an Ajax request, that means I can’t have another Ajax request defined in this way?

(Sorry if thats a confusing description - I’m really struggling to make it any clearer)

can you post the code of actionAnotherAjax

The action anotherAjax is:

public function actionAnotherAjax(){

        echo "second test";

}

Edit: Accidentally posted actionAjax at first. Changed to the correct code snippet

I’ve just noticed something else that may be helpful; the URL that the Ajax link is now pointing to (after removing the first link) is the URL of the page I’m looking at, not the URL that I set in the Ajax link code.

Hi,

I have a similar problem with ajaxLinks.

I have two links in sidebar that refresh my content page by ajax. Until here, it’s fine.

But if i put an ajaxLink in my content page, this links don’t work.

My content page is loaded by renderPartial.

In model controller i have the following code:

public function actionCreate()

	{

		$model=new PropertyType;


		if(isset($_POST['PropertyType']))

		{

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

			if($model->save())

				$this->redirect(array('view','id'=>$model->ID));

		}


		$this->renderPartial('create',array(

			'model'=>$model,false,true

		));

	}

And in my sidebar i have two ajaxLinks:

<ul>

  <li><?php echo CHtml::ajaxLink(Yii::t('default','Property'),Yii::app()->createUrl('property/'), array('update'=>'#content-body'), array('class'=>'sidebar-menu-title')); ?></li>

  <li><?php echo CHtml::ajaxLink(Yii::t('default','Property types'),Yii::app()->createUrl('propertytype/'), array('update'=>'#content-body'), array('class'=>'sidebar-menu-title')); ?></li>

</ul>

Finally, in index content (that is loaded by any previous ajaxLinks) i have the following code with the ajaxLink(New button) that don’t work:

   <?php

	echo CHtml::ajaxLink(Yii::t('default','New'),Yii::app()->createUrl('propertytype/create/'), array('update'=>'#obj-view'), array('class'=>'bt-new'));

	$this->widget('zii.widgets.CListView', array(

		'id'=>'obj-list',

		'dataProvider'=>$dataProvider,

		'itemView'=>'_view',

		'tagName'=>'table', 

		'sortableAttributes'=>array(

	        'name',

	        'status'

	    ),

	));

	?>

	<div id="obj-view"></div>

Can’t figure where the problem is.

I’ve worked around this issue now by using raw jquery to build the onclick events. In fact, the usual .click(function(){…}) or .on(‘click’, function(){…}) methods in raw jquery didn’t work, as these attach events on page load but don’t attach to new objects that are added after page load. I had to use .live(‘click’, function(){…}) to get the onclick events to be attached to new links as they are added to the page.

Perhaps this is where our problems with the Yii ajaxLink come from. Does anyone know whether Yii’s ajaxLink uses .click, .on or .live to attach events to objects?

Ok… the following code

$this->renderPartial('create',array(

			'model'=>$model,false,true

		));

has an error. Instead it, should be:

$this->renderPartial('create',array(

			'model'=>$model

		),false,true);

Fábio, did that solve your problem completely?

Yes… note that the 3rd and 4th parameter was inside the model array instead in renderPartial parameters… Just the correction solved my problem, until now its working fine.

Interesting. Unfortunately I’ve already had to just move on and write the jQuery by hand (see above) and didn’t keep a copy of how I had it with renderPartials, so I can’t check whether I’d made the same mistake. If I have to make another similar page in the future, I’ll remember this and give it another go.

@Favicon: I’m having the same issue now. I will try your custom jQuery method and see if that works.

@Yii dev’s + community: why doesn’t ajaxLink() work when it comes from an ajax-generated response? What is the best work-around?

When I got this error, I simply gave to ajaxLink an id in htmlOptions().

echo CHtml::ajaxLink($representative->firstname.' '.$representative->lastname,

		$this->createUrl('/representantes/representantes/ver/id/'.$representative->representative_id),

		array(

				'update' => '#cidades',

		),

		array('id' => 'representante'.$representative->representative_id)

);

Happy coding.

What a great idea! I take the problem then is actually that Yii generates IDs automatically and so when running the Ajax request, the second Ajax link is assigned an ID that’s already taken by something else on the page? Whereas overriding it with a custom ID prevents this from happening…

Thanks for the tip.