CAutoComplete Fails to Send Requests on Ajax Loaded Content

I have a popup jQuery dialog that loads a form dynamically. The autocomplete field does not send requests to the autolookup function. I think that this is because the .js files are not loaded, but adding them to the dialog does not seem to help.

Is there a file that I am missing? There are no error messages in Firebug, the httpd log or the Yii app log. It’s just that no requests are ever made.


Yii::import( "application.controllers.MemberController" );

echo '

<script src="/js/jquery/jquery.min.js" type="text/javascript"></script>

<script src="/js/jquery/jquery.form.js" type="text/javascript"></script>

<script src="/js/jquery/jquery-ui/js/jquery.ui.js" type="text/javascript"></script>

<script src="/js/source/jquery.yiiactiveform.js" type="text/javascript"></script>

<script src="/js/source/jquery.bgiframe.js" type="text/javascript"></script>

<script src="/js/source/jquery.dimensions.js" type="text/javascript"></script>

<script src="/js/source/jquery.ajaxqueue.js" type="text/javascript"></script>

<script src="/js/source/jquery.autocomplete.js" type="text/javascript"></script>

<link type="text/css" href="/js/source/autocomplete/jquery.autocomplete.css" rel="stylesheet" />

<div class="form">


$form = $this->beginWidget( 'CActiveForm',  


				'id'                   => 'ed_message_form',

				'action'               => Yii::app()->createUrl( "/message/send" ),

				'method' 	       => "post",

				'enableAjaxValidation' => TRUE,

				'clientOptions'        => array( 'validateOnSubmit' => TRUE,

								'validateOnChange' => TRUE




echo '

	<p class="note">Fields with <span class="required">*</span> are required.</p>

	'.$form->errorSummary( $model ).'

	<div class="row" style="vertical-align:middle;">

		<label for="ed_msg_photo">To</label>

		<div id="ed_msg_photo">


			'.MemberController::avatar( $recipient->id, "medium", NULL, 'style="vertical-align:middle; align:right;"' ).'


			$this->widget( 'CAutoComplete',


						'name'        => "recipient",

						'value'	      => $recipient->first.' '.$recipient->middle.' '.$recipient->last,

						'url'         => '/member/autolookup/?t=foo',

						'max'         => 100, // max number of items to display

						'minChars'    => 1, 

						'delay'       => 200, // milliseconds before lookup occurs

						'matchCase'   => false,

						'htmlOptions' => array('size'=>'30')



		echo '



	<div class="row">

		'.$form->hiddenField( $model, 'creator_id' ).'

		'.$form->hiddenField( $model, 'last_modifier_id' ).'

		'.$form->hiddenField( $model, 'recipient_id' ).'

		'.$form->labelEx( $model, 'title' ).'

		'.$form->textField( $model, 'title', array( 'size'=>50,  'maxlengt'=>80 ) ).'

		'.$form->error( $model, 'title' ).'


	<div class="row">

		'.$form->labelEx( $model, 'body' ).'

		'.$form->textArea( $model, 'body', array( 'rows'=>6,  'cols'=>50 ) ).'

		'.$form->error( $model, 'body' ).'


	<div class="row buttons">

		'.CHtml::button( 'Send', array( 'onClick'=>'javascript:ed.Message.send();' ) ).'




echo '

</div><!-- form -->


I should add that I’ve tested the call to the /member/autolookup, and it works well. I have a nearly identical form that is not loaded via ajax that works very well. Also, the same problem is occurring with ajax based validation: no calls are made and no errors appear anywhere.

I’m running into the exact same issue. My AutoComplete works by itself. My Ajax loaded Dialog works by itself. They don’t work together!

heck the documentation here.

the newer version add new ajax function signature

=> $.ajax(url, settings)

the AutoComplete widget will include the jquery.ajaxqueue.js, which will override jQuery.ajax function.

so, we won’t be able to use this new signature to make ajax callback.

The solution is to use the original/old signature instead.

=> $.ajax(settings)

Not sure this will help your case.