CAutoComplete Fails to Send Requests on Ajax Loaded Content

Yii 1.1 General Discussion
1

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.




<?php

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',  

			array(

				'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">

			'.$recipient->getFullName().'</b>

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

			<br/>';

			$this->widget( 'CAutoComplete',

					array(

						'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>

	</div>

	<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>

	<div class="row">

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

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

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

	</div>

	<div class="row buttons">

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

	</div>

';

$this->endWidget();


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.

2

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!

3

heck the documentation here.

api.jquery.com/jQuery.ajax

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.

Cheers.