JQuery elements in Yii

Hi!

I’m working on a website that requires lots of JQuery animations and interactions.

For example I’m supposed to set up a menu which will change some div layouts: when the mouse is over a menu voice, in the header div there will appear other menu voices related at the main voice.

Now, I wonder how can I import JQuery to make this working, but what I am worried about is whether these changes will upset the website integrity.

Thank you all!

I don’t really get your question … importing jQuery to Yii is as simple as


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

Ok,

I was thinking about it just after my post.

I thought using JQuery would have created chaos between yii views because the dynamic changes but now I see it doesn’t matter.

Just another question: how can I import JQuery libraries?

Put them in some directorty, and then use Yii::app()->clientScript->registerScript(…)

Take a look at the api of registerScritp for more information

I tried to put


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

in the main.php layout file but I got this error:

"Object of class CClientScript could not be converted to string"

How can I manage that?

EDIT: resolved.

I put "echo". The right form is to put the following on top:


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

…but I got another problem :)

I added this to load a js plugin:




<?php Yii::app()->clientScript->registerScript(Yii::app()->baseUrl . '/extensions/js/jquery.backstretch.min.js', CClientScript::POS_HEAD); ?> 



and added this after "<head>" tags:


<script type="text/javascript">

	$(document).ready(function(){

		$.backstretch("wall.jpg", {speed: 150});

	});//DOM

</script>

but it doesn’t work.

My script works for sure because I tried it in a no-yiiframework page.

The path you registered is in protected, so it cannot be served.

If you check with firebug, you will notice that is 404.

You can or move in a folder at the main level or publish with assets manager like that:


 Yii::app()->clientScript->registerScript(

    Yii::app()->assetsManager->publish(Yii::app()->baseUrl . '/extensions/js/jquery.backstretch.min.js', CClientScript::POS_HEAD)); 

Yeah, now I see that it’s been loaded because I’ve checked it on firebug (it didn’t do that before) but I’ve noticed that if I use JQuery native methods and functions it works, but if I use plugin methods these can’t work.

Where are these plugins appearing if you view the source of your page? Also, have you tried calling them in a $(document).ready() block?

I got it thorough firebug.

I used standard methods from JQuery like .css() and it works.

but if I call methods from the JQuery plugin, nothing happen.

This is the script I’m trying to make it working:


<script type="text/javascript">

	$(document).ready(function(){

		$.backstretch("wall.jpg", {speed: 150});

		

	});//DOM

</script>

What’s more I know this little script works because I tried it on a non-yiiframework web page and works fine (with JQuery 1.4.2).

I wonder if it concearns the JQuery version.

This is the JQuery plugin that I’m talking about: My linkhttp://srobbin.com/blog/jquery-plugins/jquery-backstretch/

That website says v1.4.2 of jQuery is recommended. My version of Yii is importing jQuery version 1.4.4 - that’s on Yii version 1.1.6

Instead of importing the system version of jQuery, download the latest from jquery.org and import that into your page to see what happens. There is no reason that just because this is a Yii application your jQuery plugin will not work.

No way, I’ve just tried but it doesn’t work.

Can you try that plugin in a project of yours?

I’m going mad!

I’ve just tried it, seems to be working just fine. I’ll run through my steps, anyway:

Download "backstretch" from their website http://srobbin.com/blog/jquery-plugins/jquery-backstretch/

Place "jquery.backstretch.min.js" in /path/to/my/app/scripts/ (the directory level above protected)

Then, from "main.php" (main layout file), at the very top, above <html>, I add:




        $cs = Yii::app()->clientScript;

	$cs->registerScriptFile(Yii::app()->baseUrl . '/scripts/jquery.backstretch.min.js');

	

	$cs->registerScript("backstretch", '$.backstretch("http://farm3.static.flickr.com/2443/3843020508_5325eaf761.jpg");');

It’s worth mentioning to double check the permissions on the folder where you keep your javascript needs to be readable by the web-server process.

Edit: jQuery was already being included on the page

There’s something incorrect for sure in my application because your steps are the same of mine.

I’m working on xampp but if there was something wrong, I would have got other errors before.

HOLD ON!

The image path was wrong!

When I tried to execute $.backstretch, I gave it “wall.jpg” instead of Yii::app()->baseUrl . '/css/wall.jpg

NOW IT WORKS!

Thanks :)