Work differentiation between CodeIgniter / jQuery - best practice

[eluser]AndyBC[/eluser]
Hi guys!

A newbie architectural question:

I am looking for some guidance on 'best practice' in apps where you need the browser (javascript) and the server (codeigniter) to handle the same elements on a page.


Example:

1) Say you on the server side generates a 'select widget' with selectable items (just think <ul> with lots of elements)

2) In the browser, when user clicks an item, you'll have jquery add a special style to that item, to indicate it's selected.

3) When the user clicks 'submit', you post information about which items is selected to the server.

4) On the server Codeigniter does something with that information and returns a NEW page (so this is not done with ajax, but requires a page refresh).


So far no problem - This is what I'm not sure about:

On the returned page I need to redisplay the 'select widget', with the previously selected items being in the visual selected state.

* I could easily have php/Codeigniter do the SAME thing as jquery to the selected elements - i.e. apply the 'selected style' to them. But that would duplicate function between Codeigniter and jquery - so now I have two places to update when I need to change anything.

* So I was thinking that I could have CI do the vanilla 'select widget' plus a javascript array with the selected items and then let the jquery function take care of the special 'selected' formatting for those items, when the page loads.

-

I expect the exact same question on how to differentiate between server / browser control of the UI would pop up with other parts of the apps (error messages in forms, etc..) So is there a general best practice solution to this (or am I thinking about this in a wrong way - remember I am newbie)

Thanks for taking your time :-)

AndyBC

[eluser]Mark Croxton[/eluser]
Yuk, don't output a js array from php. Just get CI to output the semantically correct markup with the items selected. If you can't so this because your 'selected' items are list items instead of, say, checkboxes, then you're not doing it right Progressive enhancement: start with markup that actually works without JS. A nested lists of checkboxes for example inside a form that POSTs data to a CI controller. Then use jquery to add the bells and whistles.

[eluser]AndyBC[/eluser]
Mark, thanx for replying.

On this job I can rely on ppl having js enabled (it's for an internal page), so in this case I really can use js for more than the 'bells and whistles' and gracefull degradation is not a big concern. Yet, I think you have a good point about the semantics. Ideally it should be semantically correct. So now I might try to work out a way to use form checkboxes, styled to look/behave like clickable tags.

(for the record: this link might give a solution to do it with pure css: http://www.thecssninja.com/css/custom-inputs-using-css ).

Still I think my main question remains:

I am concerned about duplicating functionality between CI/jquery when it comes to rendering stuff on the page. It seems to me that there are many situations where you would need to have the same 'things' done to a page both on the server and in js.

Take form validation as an example. Ideally it should be done both in the browser, before submit, AND on the server. And we all know, that you at least never should skip the server side validation. But what about the validation error messages?

Do I really need this duplicate functionality:

* Server-side: If (input not valid) { render big red box complaining about input, and suggestions on how to fill out correctly }
* Browser-side: If (input not valid) { render big red box complaining about input, and suggestions on how to fill out correctly }

This would mean two places to update (and using two different languages), to do the same thing.

So, my thought was that a sensible way to handle this would be to skip the server part for things like that, and just serve a vanilla page to the browser along with information to js on what items to act on, e.g. via a js array or something.

Form validation messages is just an example. To my mind the situation is the same whenever you need a round trip to the server (page refresh) and the refreshed page needs to retain the state of some dynamic js-driven element on the page.

Am I getting upset about a non-issue? should I just live with duplicate functionality? Or is there some smart CI way to tackle this?
Or am I thinking about this in some twisted newbie way?

Any enlightenment will be much appreciated :-)

Thanks, Anders