Neat development using CI and YUI

[eluser]whitey5759[/eluser]
Hi,

I'm in the process of developing my first web application in CI and I want to start incorporating some AJAX functionality, using the YUI library. I am a stickler for neat organisation of code and files, and so I'm struggling to find a good way to incorporate YUI into my views.

Focussing just on coding one Controller, with one View.

What I want to do is have a JS file for the Controller, which looks after attaching listeners to items in the View so it will react when, say a user clicks a button. Then I want to have a JS file for the View which is solely responsible for being called by the Controller to pass back info and update the View (in response to user action in the View). I think this seems fairly logical and neat (I hope you all agree, or if not have a better way). I'm open to suggestions!

Assuming my approach is good, moving forward my my problem is I cannot get the 'link' tag in my View to link to the JS file which is in with the Controller (so that the JS file in the Controller can attach listeners to items in the View).

The is the View:
/system/application/views/customerAdmin.php

This is the JS file I'm trying to include:
/system/application/controllers/customerAdmin.js

I can't for the life of me get it to work! I've tried mucking with .htaccess but still nothing.

So what I'm after I guess is 2 things:
1. Is my approach for separation of JS from PHP a good way of doing things (I've seen another tutorial online do the same thing kinda)?
2. If it's a good approach, can anyone help me make it work in terms of the link working?

[eluser]Natebot[/eluser]
I wouldn't put your javascript files in with your controllers. I would only expect to find controllers (that is, php files, each with one class that extends the Controller class) in the system/application/controller directory.

I would expect web assets like html, images, css, and javascript to have their own directory structure in the web root and away from the framework and application files. In fact I would recommend putting your system and application files outside the web root.

Ideally your web assets are agnostic in regards to what framework or even language is used in your Web application's back-end.

Having said that, I guess it is possible to do so. If your system and application directory is in the web root you should be able to point directly to the js file in your view with:

Code:

<script src="/system/application/controllers/javascriptfile.js" language="javascript"></script>

Also, I am not sure what you mean by "a JS file for the Controller" - since javascript is a client-side technology, you won't be using it in your actual controllers.

[eluser]Nick Husher[/eluser]
Generally, I put all my client-side-only code (Javascript, CSS, Flash) in a directory in the root of my CI project. Usually, it goes in /assets/[css|js|fla]. Inside the js folder, I have subdivide it further into a directory for project-specific code and one for each Javascript library I need to use. Usually it ends up looking like:

Code:

/assets/js/
/assets/js/projectname/
/assets/js/jquery/
/assets/js/yui/
/system/...
/index.php
/.htaccess
/...

Then in a template file, I define a root directory variable that I can use when I need to do path-specific stuff in javascript (ajax and the like), generally that looks like this:

Code:

[removed]ROOT = "<?=base_url() ?>"[removed]

Good luck with YUI. It's my library of choice, so if you need any pointers I can probably help you out!

[eluser]thinkigniter[/eluser]
This may help.
It uses Nick Husher's assets management idea and is set to run jquery but you can change that.

check out
[email=http://codeigniter.com/wiki/_insert_js/]http://codeigniter.com/wiki/_insert_js/[/email]

[eluser]umefarooq[/eluser]
hi use this library it will make you life easy you can add specific js and css file for specific page, if you required 10 js file for your page it will combine all js files will make only one js file, it will do same work for css files also. not only this also it will minfy your js and css files.

http://ellislab.com/forums/viewthread/103890/

[eluser]whitey5759[/eluser]
Thank you all very much for your comments! What put me onto this train of thought was this article: http://www.phpied.com/ajax-mvc/

I'm just wondering what others think about this approach?

[eluser]Crafter[/eluser]
I've used the ExtJS library and more recently the YUI library (after the ExtJS licencing issue) and I have moved to a development approach where my JS (YUI in this case) and the backend (using CI) are developed separately.

With the rich controls that the modern JS libraries offer, it makes sense to draw (most of) your screen output from the libraries, and I find less and less use for views. My views are largely constrained to the main pages of the application, like the login page and the main application layout, containing the different screen regions, menus and so on. Thereafter most interaction is controlled using a mixture of AJAX and JS rendering of output.

Of course, I still use the MVC structure, but with a slightly different approach. The traditional view is now either a JSON output, or a view segment, to be used by YUI to render a region from markup.

As an example, say I have my main application (with menus etc, loaded). The user :
- clicks on the option to view all customers
- I will send as my view a JSON listing to be rendered in a table/grid

- clicks on the option to view edit a single customer
- I will send a view segment containing HTML for a customer form that will be displayed for the customer

- clicks on the option to save the customer details
- I will send a JSON message providing the result of the action, and the front end will hide the customer form

- clicks on the option to delete a customer
- I will send a JSON message providing the result of the action, and the front end update the table/grid

With all this, I still use the browser -> controller -> model -> controller -> view OR generated JSON.

I now have to give a lot more attention how the two parts exchange data, whereas previously I could do it "on the fly" when coding.I have tried to integrate CI with the JS code, but found that the best approach for me was to treat the browser JS rendering and backend PHP processing as separate.

Regards
Pradesh

[eluser]Rob Steele[/eluser]
That's pretty cool man, I've been trying to figure out a way of how i would attack that same issue because the JS lib's have sooo much rich controls that it seems lacking for me not to take advantage of them.