How To Solve Conflict Between Yii Jquery And Custom One

Yii 1.1 General Discussion
1

I have this problem and it really bothers me a lot. I was searhing whole day for a solution, and nothing helped me.

Here is the thing:

Since I am quite thin with jQuery, I am using some theme that includes a lot of jQuery plugins. I am trying to implement captcha on my Contact form. I see the captcha and it validates properly. Problem is when I turn on ( include ) .js scripts needed by other parts of my front-end, captcha do not show the link for "Get a new code", "clickableImage" does not work either. Ajax validation does not work too. When I visit the page source of the contact page it shows the script calls necessary for captha to work:




<script type="text/javascript" src="/app/assets/cbc21b17/jquery.js"></script>

<script type="text/javascript" src="/app/assets/cbc21b17/jquery.yiiactiveform.js"></script>

So Yii made a call to necessary .js files, needed for contact form that comes as a part of yii app.

It is not only captcha problem here, all yii functionalities that reqires yii generated .js will not work if I put my plugins in use. Just for the record some of these .js plugins requires .js 1.5 and 1.2 to work.

Here is the code of my contact page ( form only ) :




<!-- form -->


<div class="form">


	<?php $form=$this->beginWidget('CActiveForm', array(

		'id'=>'contactForm',

		'enableClientValidation'=>true,

		'clientOptions'=>array(

			'validateOnSubmit'=>true,

		),

	)); ?>


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


	<?php echo $form->errorSummary($model); ?>


	<div class="row">

		<?php echo $form->labelEx($model,'name'); ?>

		<?php echo $form->textField($model,'name',

				array('id'=>'name','class'=>'form-poshytip', 'title'=>'Enter your name')); ?>

		<?php echo $form->error($model,'name'); ?>

	</div>


	<div class="row">

		<?php echo $form->labelEx($model,'email'); ?>

		<?php echo $form->textField($model,'email', 

				array('id'=>'email','class'=>'form-poshytip', 'title'=>'Enter your email address')); ?>

		<?php echo $form->error($model,'email'); ?>

	</div>


	<div class="row">

		<?php echo $form->labelEx($model,'subject'); ?>

		<?php echo $form->textField($model,'subject',

				array('size'=>60,'maxlength'=>128, 'id'=>'subject', 'class'=>'form-poshytip',

					'title'=>'Enter the subject of your request')); ?>

		<?php echo $form->error($model,'subject'); ?>

	</div>


	<div class="row">

		<?php echo $form->labelEx($model,'text'); ?>

		<?php echo $form->textArea($model,'text',

				array('rows'=>6, 'cols'=>50, 'id'=>'text','class'=>'form-poshytip',

					'title'=>'Enter the text of your request')); ?>

		<?php echo $form->error($model,'text'); ?>

	</div>


	<?php if(CCaptcha::checkRequirements()): ?>

	<div class="row">

		<?php echo $form->labelEx($model,'verifyCode'); ?>

		<div>

		<?php $this->widget('CCaptcha', array('clickableImage'=>true)); ?>

		</div>

		<div>

		<?php echo $form->textField($model,'verifyCode'); ?>

		</div>

		<div class="hint">Please enter the letters as they are shown in the image above.

		<br/> Letters are not case-sensitive.</div>

		<?php echo $form->error($model,'verifyCode'); ?>

	</div>

	<?php endif; ?>


	<div class="row buttons">

		<?php echo CHtml::submitButton('Submit', array('id'=>'submit')); ?>

	</div>


	<?php $this->endWidget(); ?>


</div>	


<!-- ENDS form -->

In my main.php ( main layout file in my theme ) I have these calls to jQuery plugins placed in head section:




<?php Yii::app()->clientScript->registerScriptFile(Yii::app()->theme->baseUrl.'/js/jquery-1.5.1.min.js'); ?>

<?php Yii::app()->clientScript->registerScriptFile(Yii::app()->theme->baseUrl.'/js/jqueryui.js'); ?>

<?php Yii::app()->clientScript->registerScriptFile(Yii::app()->theme->baseUrl.'/js/easing.js'); ?>

<?php Yii::app()->clientScript->registerScriptFile(Yii::app()->theme->baseUrl.'/js/jquery.scrollTo-1.4.2-min.js'); ?>

<?php Yii::app()->clientScript->registerScriptFile(Yii::app()->theme->baseUrl.'/js/quicksand.js'); ?>

<?php Yii::app()->clientScript->registerScriptFile(Yii::app()->theme->baseUrl.'/js/custom.js'); ?>

If I remove them, Yii generated .js works but ofc custom plugins do not, and If I put them in use then Yii generated .js does not work anymore.

I tried placing all my .js files in assets folder and calling them from there, it does not work.

Do anyone have any solution for this nightmare ?

Thanks

2

The first 2 lines will cause the problem. We can’t have the different versions of jQuery and jQuery UI in the same page where Yii will use its own versions of them.

Try this instead:




<?php Yii::app()->clientScript->registerCoreScript('jquery'); ?>

<?php Yii::app()->clientScript->registerCoreScript('jquery.ui'); ?>

<?php Yii::app()->clientScript->registerScriptFile(Yii::app()->theme->baseUrl.'/js/easing.js'); ?>

<?php Yii::app()->clientScript->registerScriptFile(Yii::app()->theme->baseUrl.'/js/jquery.scrollTo-1.4.2-min.js'); ?>

<?php Yii::app()->clientScript->registerScriptFile(Yii::app()->theme->baseUrl.'/js/quicksand.js'); ?>

<?php Yii::app()->clientScript->registerScriptFile(Yii::app()->theme->baseUrl.'/js/custom.js'); ?>

Well, as you may be worrying, this will force your plug-ins to work under the newer versions of jQuery and jQuery UI. If some of the plug-ins stops working, then you have to find the latest version of it that works fine with the later versions of jQuery and jQuery UI. If you have failed to find one unfortunately, well, you’d better give up using it.

3

put a false,true at the render if you need only query from that page

like


$this->renderPartial('_form', array('model'=>$model),false,true);

this is also used to solve conflicts

4

An alternative is to put this under ‘components’ in your config:




		'clientScript' => array(

			'scriptMap' => array(

				'jquery.js' => false,

				'jquery.min.js' => false,

			),

		),

This will disable the built-in jQuery and allow you to include your own.

5

Yeah, Tsunami has pointed a good tip.

But I’m afraid jQuery 1.5.1 is a little too old for Yii …

6

You’re right, as you said earlier if the theme doesn’t work with a newer jQuery, you shouldn’t use that theme.