How to customize forms (globally)

Hello,

First of all a big "Chapeau" to the development team of jojocms who, to me, is the best web development platform out there. Really, you guys made it very simple for us to make any kind of web app. :)

Here is y problem.

I would like to use this open source jquery form transformation script:

http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform


I've used it befor in a static website and it works fine. The way to use it is simply add js and css path to files in head, and use class= and rel= in the form and elements u wish to transform. Then a javascript functions looks for the forms in the page that need transformation and does it.

I've tried two methods with no success.


First method: As stated in jojo documentation. I put jqtransform.js and the scripts that transforms the forms in a file called functions.js in js folder in theme folder. I then added the css file to my normal style.css file in /theme/css/ ( I made sure there are no doubled names). I understood that jquery is usable with jojo cms out of the box so i didnt do anything for that. Finally i added style= and rel= in my form in for exemple login.tpl file in jojocore folder if i want the login form to be styled.

Second method: I thought of it like a static website so i put all the js and css files in /theme/pictures/, I then edited the head.tpl and login.tpl in jojocore folder.

If this cant be done, can you please tell me how can we style the forms please

Also what is the best way to have elements on page that are visible or activ only when user is logged in

Thank you very much in advance for your reply and this amazing cms.

Hello, First of all a big "Chapeau" to the development team of jojocms who, to me, is the best web development platform out there. Really, you guys made it very simple for us to make any kind of web app. :) Here is y problem. I would like to use this open source jquery form transformation script: http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform I've used it befor in a static website and it works fine. The way to use it is simply add js and css path to files in head, and use class= and rel= in the form and elements u wish to transform. Then a javascript functions looks for the forms in the page that need transformation and does it. I've tried two methods with no success. First method: As stated in jojo documentation. I put jqtransform.js and the scripts that transforms the forms in a file called functions.js in js folder in theme folder. I then added the css file to my normal style.css file in /theme/css/ ( I made sure there are no doubled names). I understood that jquery is usable with jojo cms out of the box so i didnt do anything for that. Finally i added style= and rel= in my form in for exemple login.tpl file in jojocore folder if i want the login form to be styled. Second method: I thought of it like a static website so i put all the js and css files in /theme/pictures/, I then edited the head.tpl and login.tpl in jojocore folder. If this cant be done, can you please tell me how can we style the forms please Also what is the best way to have elements on page that are visible or activ only when user is logged in Thank you very much in advance for your reply and this amazing cms.

when you view source on the page, do the javascript links appear in the head as expected?
Does it load them? or do they return errors?
You need to force reload (Ctr+F5) to get any new functions.js included - Jojo builds and optimises all functions.js files it finds in themes/plugins and caches them as common.js, so you need to refresh to rebuild the cached script.
The same goes for style.css files (which get combined, optimised and cached as styles.css)

jQuery should be included automatically, but it's 1.3, so check that your scripts aren't expecting 1.2 or earlier - some things were deprecated in 1.3 and will cause jQuery to fail (like including @ in rel statements).

As for logged-in only elements, I'm reasonably sure there are smarty variables that gets set automatically when logged in which you can check for with {if $loggedIn}
and also {if $user && $user.isadmin} but I'll need to double check that

when you view source on the page, do the javascript links appear in the head as expected? Does it load them? or do they return errors? You need to force reload (Ctr+F5) to get any new functions.js included - Jojo builds and optimises all functions.js files it finds in themes/plugins and caches them as common.js, so you need to refresh to rebuild the cached script. The same goes for style.css files (which get combined, optimised and cached as styles.css) jQuery should be included automatically, but it's 1.3, so check that your scripts aren't expecting 1.2 or earlier - some things were deprecated in 1.3 and will cause jQuery to fail (like including @ in rel statements). As for logged-in only elements, I'm reasonably sure there are smarty variables that gets set automatically when logged in which you can check for with {if $loggedIn} and also {if $user && $user.isadmin} but I'll need to double check that

if those smarty variables aren't available .. you can always generate them in global.php of the theme like this (which also allows you to pre-populate form fields with user data)

if (!empty($_USERID)) {
$user = Jojo::selectRow("SELECT userid, us_login, us_firstname, us_lastname, us_email, us_website FROM {user} WHERE userid = ?", array($_USERID));
$user['isadmin'] = in_array('admin', $_USERGROUPS) ? true : false;
$smarty->assign('user', $user);
}

if those smarty variables aren't available .. you can always generate them in global.php of the theme like this (which also allows you to pre-populate form fields with user data) [code] if (!empty($_USERID)) { $user = Jojo::selectRow("SELECT userid, us_login, us_firstname, us_lastname, us_email, us_website FROM {user} WHERE userid = ?", array($_USERID)); $user['isadmin'] = in_array('admin', $_USERGROUPS) ? true : false; $smarty->assign('user', $user); } [/code]

There is also a Smarty function which screen dumps all the variables that have been set / are available to use. It's in the Smarty docs, I'm too lazy to go get the name of it.

There is also a Smarty function which screen dumps all the variables that have been set / are available to use. It's in the Smarty docs, I'm too lazy to go get the name of it.

I threw it into a plugin... attached.

The point though, is to learn.
- javascript (including the invoking code) was put in js/functions.js
- images were put in images/jqtransform/ to avoid conflicts
- CSS was updated with new paths to images (starting from root) and put in css/style.css
- readme.txt was created with basic info
- description.txt was created with a short description
- all of these filenames are important because they're used directly by Jojo

Requires no modification of files in the core or theme

Edit: It still needs to be told to not adjust the admin forms at all.

I threw it into a plugin... attached. The point though, is to learn. - javascript (including the invoking code) was put in js/functions.js - images were put in images/jqtransform/ to avoid conflicts - CSS was updated with new paths to images (starting from root) and put in css/style.css - readme.txt was created with basic info - description.txt was created with a short description - all of these filenames are important because they're used directly by Jojo Requires no modification of files in the core or theme Edit: It still needs to be told to not adjust the admin forms at all.

Updated to only update forms on the public side and leave the admin area alone. I used a little bit of a hack to do this as I prefer to not pollute the page html with stuff I don't need to.

I'll add the plugin to the repo too, though still consider it not fully tested. Requires clearing cached JS files and a CTRL+F5 I guess too.

Edit: Do I manually create the branchs/tags/trunk directories when adding a plugin to the repo? I don't want to break your system by doing it wrong.

Updated to only update forms on the public side and leave the admin area alone. I used a little bit of a hack to do this as I prefer to not pollute the page html with stuff I don't need to. I'll add the plugin to the repo too, though still consider it not fully tested. Requires clearing cached JS files and a CTRL+F5 I guess too. Edit: Do I manually create the branchs/tags/trunk directories when adding a plugin to the repo? I don't want to break your system by doing it wrong.

yep. empty folders for branches and tags please - although if it's branch/Jojo1.0 safe a copy can go in there too, tags are for (hopefully) stable versions conventially tagged by compatible core release tag version. (thanks Rick)

yep. empty folders for branches and tags please - although if it's branch/Jojo1.0 safe a copy can go in there too, tags are for (hopefully) stable versions conventially tagged by compatible core release tag version. (thanks Rick)

Thank you very much guys I really appreciate it!!! @Tom: When 2nd method applied links showed properly. Force refresh didnt do anything. I think the problem was with images folder path now that i read Ricks post ( I edited the css file to add /images/ in front of the /img/ folder that i put in /images/). For logged in status I think I found the solution. @Harvey : I'm going to get deeper in smarty doc ;) @Rick : Thank you for the explanation and the plugin. Cant wait to test it! will reply asap.

I feel that I owe you guys so I'm going to try to make the "Facebook Connect" as a plugin(with options and everything) that can apply on top of community plugin . I'm building a classified ads with jojo so if I end up making a plugin of it I will upload that too.

Thank you very much guys I really appreciate it!!! @Tom: When 2nd method applied links showed properly. Force refresh didnt do anything. I think the problem was with images folder path now that i read Ricks post ( I edited the css file to add /images/ in front of the /img/ folder that i put in /images/). For logged in status I think I found the solution. @Harvey : I'm going to get deeper in smarty doc ;) @Rick : Thank you for the explanation and the plugin. Cant wait to test it! will reply asap. I feel that I owe you guys so I'm going to try to make the "Facebook Connect" as a plugin(with options and everything) that can apply on top of community plugin . I'm building a classified ads with jojo so if I end up making a plugin of it I will upload that too.

Cool, I have been tinkering with my own Facebook app recently, though haven't yet tinkered with Facebook connect.

It looks like a pretty cool system - with so many people being permanently logged into Facebook, Facebook connect is a pretty cool way to promote your site to their friends and get some clickthroughs.

Cool, I have been tinkering with my own Facebook app recently, though haven't yet tinkered with Facebook connect. It looks like a pretty cool system - with so many people being permanently logged into Facebook, Facebook connect is a pretty cool way to promote your site to their friends and get some clickthroughs.

@Harvey: Just started cheking it out. Found interesting PHP scripts.
@Rick: Plugin is working perfectly! Thanks again.

The only thing is I had to ctrl+F5 for it to work. Will all new visitors have to do the same for it to work?

I didn't understand : "Requires clearing cached JS files and a CTRL+F5 I guess too. "
do you mean code or because I allready visited the link?

Sorry to bother you all with my newbie questions :)

@Harvey: Just started cheking it out. Found interesting PHP scripts. @Rick: Plugin is working perfectly! Thanks again. The only thing is I had to ctrl+F5 for it to work. Will all new visitors have to do the same for it to work? I didn't understand : "Requires clearing cached JS files and a CTRL+F5 I guess too. " do you mean code or because I allready visited the link? Sorry to bother you all with my newbie questions :)

Both Jojo and your browser will be doing some caching of common files. In Firefox or IE, Ctr + F5 will do a force refresh, getting new copies of all files from Jojo and replacing any that the browser has cached.

Safari and Chrome don't have a real force-refresh so are a bit more problematic.

If you make changes to the js or css, you need to force-refresh the site to get Jojo to update its cached versions, after that any new visitors will see the new versions.

Returning visitors may still see the old versions but usually only if returning to the site the same day.

favicons seem to be particularly aggressively cached by browsers (especially Safari) so can take longer to update.

Both Jojo and your browser will be doing some caching of common files. In Firefox or IE, Ctr + F5 will do a force refresh, getting new copies of all files from Jojo and replacing any that the browser has cached. Safari and Chrome don't have a real force-refresh so are a bit more problematic. If you make changes to the js or css, you need to force-refresh the site to get Jojo to update its cached versions, after that any new visitors will see the new versions. Returning visitors may still see the old versions but usually only if returning to the site the same day. favicons seem to be particularly aggressively cached by browsers (especially Safari) so can take longer to update.

Also running www.domain.com/setup/ will clear out a lot of cached files. Always a good first step to resolving any issue.

Also running www.domain.com/setup/ will clear out a lot of cached files. Always a good first step to resolving any issue.

Got it! ;)

Got it! ;)