Yii CJui + Bootstrap Extension JS conflict?

I’m trying to integrate the Bootstrap (ver2) Extension to my app.

Everything is working fine except a few things that I really want to implement.

Namely, the Bootstrap stateful button is not working when I load the CJuiAutoComplete widget on my top nav bar (when I delete the CJuiAutoComplete widget, the stateful button works perfectly).

I tried to look at DOM and console error logs on Firebug, tried jQuery.noConflict(), put the stateful button before the CJuiAutoComplete widget, all in vain and now I’m desperate…

Is there any known issue about this I’m simply missing?

I appreciate any help and/or hint… thank you!

Here’s my codes:

VIEW

(header)

<?php 

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

				'id'=>'test_autocomplete',

			    'name' => 'test_autocomplete',

   				'value' => $model->isNewRecord ? '': $model->attribute_value,

   				'source'=>('/site/autocomplete'),

				'options'=>array(

					'delay'=>0,

					'minLength'=>1,

					'showAnim'=>'fold',

					'focus'=> 'js:function( event, ui ) {

			            $( "#test_autocomplete" ).val( ui.item.title );

			            return false;

			        }',

			        'select'=>'js:function( event, ui ) {

						$("#id").val(ui.item.id);

			            $("#'.CHtml::activeId($model,'attribute_id').'")

			            .val(ui.item.id);

			            return false;

			        }'

				),

				'htmlOptions'=>array(

					'placeholder'=>"search questions",

					'class'=>'span4',

				),

				'methodChain'=>'.data( "autocomplete" )._renderItem = function( ul, item ) {

			        return $( "<li></li>" )

			            .data( "item.autocomplete", item )

			            .append( "<a><img width=\'15px\' src=\'" + item.imageUrl + "\'> " + item.title +  "</a>" )

			            .appendTo( ul );

			    };'

			)); 

			?>

(view file)

<form>

<?php $this->widget('bootstrap.widgets.BootButton', array(

    'fn'=>'button',

    'type'=>'primary',

    'label'=>'Click me',

    'loadingText'=>'loading...',

    'htmlOptions'=>array('id'=>'buttonStateful'),

)); ?>

<script type="text/javascript">

$('#buttonStateful').click(function() {

    var btn = $(this);

    btn.button('loading'); // call the loading function

    setTimeout(function() {

        btn.button('reset'); // call the reset function

    }, 3000);

});

</script>

</form>

OK, a little self-follow up…

I found out that if I put the CJuiAutoComplete widget in the same view file as the buttons, the problems goes away.

So I thought this might has to do something with putting the CJuiAutoComplete in the Header widget that I’m calling from my layouts/main.php code.

While I know this has nothing solved, I put a dummy-notfunctionning-invisible CJuiAutoComplete widget on the view file (in addition to the working Header one) and it’s doing the job.

I’d very much like to know why this is happening… Any thought?

(layouts/main.php)

<div class="container" id="page">


	<? if (!$this->removeHeader) 	

		$this->widget( 'application.widgets.HeaderWidget');		

	?>


	<?php echo $content; ?>


	<? 


	if (!$this->removeFooter)

		$this->widget( 'application.widgets.FooterWidget' ); 

	?>


</div><!-- page -->

(view file)

<?php 

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

		    'name' => 'dummy',

			'htmlOptions'=>array(

				'style'=>'display:none;',

			),

		)); 

?>

		

<form>

<?php $this->widget('bootstrap.widgets.BootButton', array(

    'fn'=>'button',

    'type'=>'primary',

    'label'=>'Click me',

    'loadingText'=>'loading...',

    'htmlOptions'=>array('id'=>'buttonStateful'),

)); ?>

<script type="text/javascript">

$('#buttonStateful').click(function() {

    var btn = $(this);

    btn.button('loading'); // call the loading function

    setTimeout(function() {

        btn.button('reset'); // call the reset function

    }, 3000);

});

</script>

</form>