How do I add JQuery UI to Web2PY

2,505 views
Skip to first unread message

rami

unread,
Sep 16, 2011, 4:41:02 PM9/16/11
to web2py-users
Hello,

I am a newbie in web2py and JQueryUI and I have looked at how to add a
general plugin by editing the file names to plugin_name. I created a
custom theme with the Theme Roller of JQuery UI and I want to be able
to add that theme in web2py. Which folders should I add them at and do
I have to rename them to be a plugin??

Can anybody please provide a step by step process for me?
I have these folders right now once I downloaded the JQuery UI:
/css
custom-theme/images
custom-theme/jquery-ui-1.8.16.custom.css
/development-bundle
demos/bunch of demos
docs/bunch of html files on how to use the widgets
external/
themes/
ui/
jquery-1.6.2.js
/js
jquery-1.6.2.min.js
jquery-ui-1.8.16.custom.min.js

I know I am supposed to import something like this in my <head></head>
where my layout is,

<link type="text/css" href="css/custom-theme/jquery-
ui-1.8.11.custom.css" rel="stylesheet" /> ^M
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></
script>^M
<script type="text/javascript" src="js/jquery-
ui-1.8.11.custom.min.js"></script>^M
<script type="text/javascript">^M

But I saw some posts where I had to get those libs from Google APIS
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/
base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/
jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/
jquery-ui.min.js"></script>

But then if I want my customized theme the googleApis won't work.

Can anybody help a newbie please in both on how to get this working or
just how to get started please?

Thank you v much!

Alan Etkin

unread,
Sep 16, 2011, 5:06:16 PM9/16/11
to web2py-users
First
Place the UI files somewhere in the app static folder
(maybe ../static/jquery-ui)

Second
Specify each file to load in the template with the
response.files.insert() command
In the scaffolding application it can be placed in the
"web2py_ajax.html" file
for example:
response.files.insert([position integer], URL('static', 'css/the-
jquery-ui-style-sheet.css'))

I think that's it

rami

unread,
Sep 16, 2011, 5:14:55 PM9/16/11
to web2py-users
I saw in some post that Massimo said that we should not touch the
web2py_ajax.html.
I will try it out and see if I can get it working, but was just
wandering about that comment on a post.

I tried understanding all those response.files.insert APIs, but they
are given just a general description under core. How am I supposed to
know what each parameter means and how to use it properly if I am
given just a general description? Am I supposed to know these already
before trying web2py? Is there a more detailed documentation on it?
What does "[position integer]" mean in this case?

Thank you much for your time and help!!

Alan Etkin

unread,
Sep 16, 2011, 6:09:49 PM9/16/11
to web2py-users
[position integer] is an integer (Python int). I think that script or
css files in response.files are appended to the html in the order
specified by those integers.

Alan Etkin

unread,
Sep 16, 2011, 6:34:59 PM9/16/11
to web2py-users
Static plugin files (as jQuery-UI files) should be stored at
app_folder/static/plugin_name
Then you could append them to the response in the plugin model file
with the ...insert command (i don't know if it works but i think it
should). Then you could append static files whenever the plugin is
used.

The web2py book has a plugin section: http://web2py.com/book/default/chapter/13

On 16 sep, 18:14, rami <beatrisr...@gmail.com> wrote:

rami

unread,
Sep 16, 2011, 8:06:45 PM9/16/11
to web2py-users
1) Yes, I tried adding the plugin that way. Followed the steps under
adding LayoutPlugin in Chapter 13 and it does not work.

I have a layout.html inside my plugin folder under the view and I
included this

{{
response.files.insert(0,URL('static','plugin_jQueryUi/css/
custom-theme/jquery-ui-1.8.11.custom.css'))
response.files.insert(1,URL('static','plugin_jQueryUi/js/
jquery-1.5.2.min.js'))
response.files.insert(2,URL('static','plugin_JQueryUi/js/
jquery-ui-1.8.11.custom.min.js'))
}}

and it does not work. (This layout.html file is just a simple html
file that tries a few of the widgets that comes with jqueryui)

Then in my actual app, I followed the instructions in chapter 13 and
in the view/layout.html I did

{{extend 'plugin_jQueryUi/layout.html'}}
{{include}}

but it does not work.


I am wondering if maybe I should put the "{{include}}" inside of my
layout.html inside of my plugin and not inside of my app under view/
layout.html

2) --------------
If this route does not work, I am thinking to just do define a simple
layout inside my app, create a simple folder jQueryUi under the static
folder and try doing response.files.insert inside of my layout.html.
What do you think about that?

----------

3)
Since I am so new with ajax and JqueryUi and web2Py, I do not
understand what happens in the web_ajax.js and so I I might just not
wanna use all that web2py already gives.
Can I just start from scratch with a simple layout that I have, use
the JQueryUI widgets however I want and then use Ajax later?
What would be your suggestion on this one?



Thank you!

pbreit

unread,
Sep 16, 2011, 8:22:46 PM9/16/11
to web...@googlegroups.com
It might be as easy as sticking this in your <head></head> in layout.html:

rami

unread,
Sep 16, 2011, 8:40:11 PM9/16/11
to web2py-users
But that does not offer me the custom themes that I set for this
plugin, right?

Anthony

unread,
Sep 16, 2011, 8:50:58 PM9/16/11
to web...@googlegroups.com
response.files is simply a (Python) list of URLs of JS and CSS files. insert() and append() are not web2py-specific -- they are methods of Python lists. Use response.files.insert(position, file) only if you need to insert the file at a specific position within the list -- otherwise, just use response.files.append(file), which adds it to the end. For something like jQuery UI that you want available on all pages, the best place to add to response.files is in the head of your layout.html. Add it somewhere before the {{include 'web2py_ajax.html'}} because the code that actually inserts the response.files is in that file (specifically, the response.insert_files() line). The response.insert_files() function will link each of the JS and CSS files at the point in the layout.html head where {{include 'web2py_ajax.html'}} is (they will be linked in order). jQuery will automatically be the first file linked, so it doesn't matter where you put jQuery UI because it will end up coming after jQuery.

Note, you don't need to user response.files at all -- it's just a convenience. Instead, you can manually add the appropriate script and link elements in the layout.html head yourself.

Anthony


On Friday, September 16, 2011 5:14:55 PM UTC-4, rami wrote:
I saw in some post that Massimo said that we should not touch the
web2py_ajax.html.
I will try it out and see if I can get it working, but was just
wandering about that comment on a post.

I tried understanding all those response.files.insert APIs, but they
are given just a general description under core. How am I supposed to
know what each parameter means and how to use it properly if I am
given just a general description? Am I supposed to know these already
before trying web2py? Is there a more detailed documentation on it?
What does "[position integer]" mean in this case?

Thank you much for your time and help!!


Anthony

unread,
Sep 16, 2011, 9:02:27 PM9/16/11
to web...@googlegroups.com
On Friday, September 16, 2011 8:06:45 PM UTC-4, rami wrote:
1) Yes, I tried adding the plugin that way. Followed the steps under
adding LayoutPlugin in Chapter 13 and it does not work.

I have a layout.html inside my plugin folder under the view and I
included this

{{
        response.files.insert(0,URL('static','plugin_jQueryUi/css/
custom-theme/jquery-ui-1.8.11.custom.css'))
        response.files.insert(1,URL('static','plugin_jQueryUi/js/
jquery-1.5.2.min.js'))
        response.files.insert(2,URL('static','plugin_JQueryUi/js/
jquery-ui-1.8.11.custom.min.js'))
 }}

and it does not work. (This layout.html file is just a simple html
file that tries a few of the widgets that comes with jqueryui)

response.files is processed by a function called response.insert_files(), which is called in web2py_ajax.html. So, you either need to {{include 'web2py_ajax.html'}} in the head of your layout.html, or you need to add response.insert_files() at the end of that block of code above. If you include 'web2py_ajax.html', keep in mind that it already inserts jQuery for you (the version that comes with web2py), so you wouldn't want to repeat that in your own response.files inserts.

(Actually, now that I think about it, response.insert_files() is something new in trunk that will be released soon. The current version includes the expanded code that has now been moved to response.insert_files(), so until 1.99 is released soon, you would either have to simply include web2py_ajax.html, or copy the relevant code from it into your layout.html head.)
 
3)
Since I am so new with ajax and JqueryUi and web2Py, I do not
understand what happens in the web_ajax.js and so I I might just not
wanna use all that web2py already gives.
Can I just start from scratch with a simple layout that I have, use
the JQueryUI widgets however I want and then use Ajax later?
What would be your suggestion on this one?

Yes, you can do that -- just take note of the above.
 
Anthony

rami

unread,
Sep 16, 2011, 9:43:37 PM9/16/11
to web2py-users
Anthony,

Thank you very much! That makes a lot of sense.
Ok so I added what is below in the default layout in the scaffolding
app. I have a jQueryUI folder that has css and js and images,etc under
the static/ folder inside myapp.

{{response.files.append(URL('static','jQueryUI/js/jquery-
ui-1.8.11.custom.min.js'))}}
{{response.files.append(URL('static','jQueryUI/css/custom-theme/jquery-
ui-1.8.11.custom.min.css'))}}
{{#------ include web2py specific js code (jquery, calendar, form
stuff) ------}}
{{include 'web2py_ajax.html'}}

<script type="text/javascript">
$(function(){

// Accordion
$("#accordion").accordion({ header: "h3" })

$('#tabs').tabs();

});
</script>


and then in my view default/index.html

I have this:



{{left_sidebar_enabled=right_sidebar_enabled=False}}
{{extend 'layout.html'}}

<div id="accordion">
<div>
<h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>

<h1>I should see tabs below</h1>

<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras
orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas
scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</
div>
<div id="tabs-3">Nam dui erat, auctor a, dignissim quis,
sollicitudin eu, felis. Pellentesque nisi urna, interdum eget,
sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper
augue.</div>
</div>


And when I open index.html, it displays the accordion because I think
web2py's jquery has it already included. However, the tabs, are
displayed just as regular lists which means it is not using the
JQueryUi.

Any ideas what I am doing wrong??

Anthony

unread,
Sep 16, 2011, 9:53:46 PM9/16/11
to web...@googlegroups.com
I think you're missing a semicolon after your accordion declaration in layout.html.

Anthony

rami

unread,
Sep 16, 2011, 10:05:39 PM9/16/11
to web2py-users
Oh my bad,
// Accordion
$("#accordion").accordion({ header: "h3" });

$('#tabs').tabs();

I included the semicolon in my code but just for some dumb reason not
on my post. Sorry to confuse you :(


Any other reasons why this does not work??

pbreit

unread,
Sep 16, 2011, 10:17:07 PM9/16/11
to web...@googlegroups.com
You can substitute any of the theme URLs into <link> href:

Anthony

unread,
Sep 16, 2011, 11:06:26 PM9/16/11
to web...@googlegroups.com
On Friday, September 16, 2011 10:05:39 PM UTC-4, rami wrote:
Oh my bad,
                // Accordion
                $("#accordion").accordion({ header: "h3" });

                $('#tabs').tabs();

I included the semicolon in my code but just for some dumb reason not
on my post. Sorry to confuse you :(


Any other reasons why this does not work??

Nothing obvious. If accordion is working, I assume jQuery UI is loaded. You may need to check the source html delivered by web2py and do some debugging in the browser.

Anthony 

JavierQQ

unread,
Sep 18, 2011, 2:11:04 AM9/18/11
to web2py-users
Can I edit =FORM too?

is it difficult?
As a example I'm going to insert this
http://jqueryui.com/demos/dialog/#modal-form

and I have one view called 'regcliente.html'
that has this
{{extend 'layout.html'}}
<h1>Registrar cliente</h1>
<div class="form">
<fieldset>
<legend>Cliente</legend>
{{=form}}
</fieldset>
</div>

can I do =form(_class="Dialog-form")? (Dialog-form is the id of
the example)

this is how I intend to put it folders
/static
/css
/start
jquery-ui-1.8.16.custom.css
/images
..
/js
jquery-1.6.2.min.js
jquery-ui-1.8.16-min.js
..

and in Layout.html I put the javascript here
<!-- All JavaScript at the bottom, except for Modernizr which enables
HTML5 elements & feature detects -->

and finally in the view I put the divs but it only appears without the
style

Is the something I missed?

Anthony

unread,
Sep 18, 2011, 2:31:15 AM9/18/11
to web...@googlegroups.com
On Sunday, September 18, 2011 2:11:04 AM UTC-4, JavierQQ wrote:
can I do =form(_class="Dialog-form")?     (Dialog-form is the id of
the example)

Not exactly, but assuming 'form' is a web2py FORM or SQLFORM object, you can add a class to it by adding a '_class' attribute. You can either do that when you first create the form:

form = SQLFORM(..., _class='Dialog-form')

or after it is created:

form['_class']='Dialog-form'


Anthony

JavierQQ

unread,
Sep 18, 2011, 4:05:17 AM9/18/11
to web2py-users

Thanks it worked, but can it change the submit_button='' too?
is there a way to change it to
<button id="create-user">Create new user</button>

According this
http://web2py.com/book/default/chapter/05#HTML-Helpers

It should be:
submit_button=BUTTON('Create new user', _id='create-user')

or maybe BUTTON() doesn't exist

Sorry to bother you again =)

Anthony

unread,
Sep 18, 2011, 10:29:57 AM9/18/11
to web...@googlegroups.com
On Sunday, September 18, 2011 4:05:17 AM UTC-4, JavierQQ wrote:

Thanks it worked, but can it change the submit_button='' too?
is there a way to change it to
<button id="create-user">Create new user</button>

web2py forms use <input type="submit' value="[submit_button]">, not the <button> tag. You can change the label displayed on the button via the submit_button argument to SQLFORM. I'm not sure if the API provides a way to add an id to the submit element, but you can do it using the server-side DOM (http://web2py.com/book/default/chapter/05#Server-side-DOM-and-Parsing), as follows:

form.element('input', _type='submit')['_id'] = 'create-user'

That's saying to find an 'input' element in the form object that has _type='submit', and then add a new attribute, '_id', with the value 'create-user'.

Anthony

JavierQQ

unread,
Sep 18, 2011, 9:03:53 PM9/18/11
to web2py-users
Well, I tried but... I think that I'm confusing even more,
and I thought something else
I made this
{{=A(('Item'), _href=URL('regitem'))}}
and it was a link that refers to REGITEM but I change into this
{{=A(('Item'), _id='create-user')}}
and it has the appereance of a button, but the problem comes when I
click on it
It should show the form as a MODAL MESSAGE but nothing happen

JavierQQ

unread,
Sep 18, 2011, 9:50:46 PM9/18/11
to web2py-users
I solved, I haven't define {{=form2}} and that's why it didn't show

rami

unread,
Sep 19, 2011, 11:45:43 AM9/19/11
to web2py-users
Javier,

Could you please tell me how you included your javascript files in the
layout after the
<!-- All JavaScript at the bottom, except for Modernizr which
enables
HTML5 elements & feature detects -->
?

I see that you added the latest jQuery and jqueryui under the default /
static/js folder that web2py has. Did you remove the jquery.js file
that web2py comes with? (or did you override it?)



On Sep 17, 11:11 pm, JavierQQ <jquari...@gmail.com> wrote:
> Can I edit =FORM too?
>
> is it difficult?
> As a example I'm going to insert thishttp://jqueryui.com/demos/dialog/#modal-form

rami

unread,
Sep 19, 2011, 12:06:29 PM9/19/11
to web2py-users
Thank you, pbreit!

You mean under the "Google Ajax Libraries API (CDN)", right?
Well I added for example
<link rel="stylesheet" href="http://http://ajax.googleapis.com/ajax/
libs/jqueryui/1.8.5/themes/swanky-purse/jquery-ui.css" type="text/
css">

instead of my

{{response.files.append(URL('static','jQueryUI/css/custom-theme/jquery-
ui-1.8.11.custom.css'))}}

and I still get my custom theme I created with Theme Roller. So I am
thinking that because I am using an older version of jQueryUI, it does
not like this css theme that uses a newer version of JQueryUI. Correct
me if I am wrong.

Thank you.

Javier Quarite

unread,
Sep 19, 2011, 12:11:28 PM9/19/11
to web...@googlegroups.com
You have to add 1 css and 2 js files
those files are in the zip that you've downloaded
after that you only have to copy paste the code that appears in jqueryui page

rami

unread,
Sep 19, 2011, 1:38:23 PM9/19/11
to web2py-users
Anthony,

Very interesting behavior. I checked in the page source, and even
though my custom jQueryUI files append lines are commented, for some
reason they are still included. I think it has to do with that
files.append...I think that once those files are appended, they do not
automatically get removed if I just comment those lines out inside my
layout before including the webajax.html. If I use files.insert inside
webajax.html this behavior does not happen. So, I guess I don't like
this files.append thing because it does not offer me the possibility
to quickly remove files appended by commenting out code.
What do you think about this?

Beatris Rusu

unread,
Sep 19, 2011, 2:28:21 PM9/19/11
to Anthony Bastardi, web...@googlegroups.com
It works!!! Thanks so much! 


and it works :D



On Mon, Sep 19, 2011 at 11:03 AM, Anthony Bastardi <abas...@gmail.com> wrote:
I think response.files should work with external URLs as well -- try it (it just takes a list of URLs of files).
 
Anthony

On Mon, Sep 19, 2011 at 2:01 PM, Beatris Rusu <beatr...@gmail.com> wrote:
Also, if I want to change the css theme the way pbreit suggested, I do this

<link rel="stylesheet" href="http://http://ajax.googleapis.com/ajax/
> libs/jqueryui/1.8.5/themes/swanky-purse/jquery-ui.css" type="text/
> css">

instead of 

{{response.files.append(URL('static','jQueryUI/css/custom-theme/jquery- 
ui-1.8.11.custom.css'))}} 

and I looked at page source and it does include the link but before including any of the javascript files and so it does not apply the theme from google APIS. So I am wandering if the order matters?
I still have my JQueuryUI included with the files.append insde my layout.
Also, is there like a reponse.append sort of method where I can append an external link like the theme from google APIS so it would add it correctly inside the URL list that file appends handles?


Thank you! 

(Too many questions, I know, I do not wanna overwhelm you! )


On Mon, Sep 19, 2011 at 10:42 AM, Beatris Rusu <beatr...@gmail.com> wrote:
I am sorry, I am just a bit new with this blog thing. I did a just [Reply] to the last post so everybody could see the below message. I am a bit frustrated bc I wish I could get an email each time somebody a general reply  to the post that I created. Wouldn't it be nice for me just to send you an email from my gmail and then the blog to be updated to a new reply on the post?

Thank you so much for all your help and cooperation. This helps a lot and makes me continue wanna use web2py! I really appreciate your patience and help!
 
This is what I replied to your last message:
"
Very interesting behavior. I checked in the page source, and even though my custom jQueryUI files append lines are commented, for some reason they are still included. I think it has to do with that files.append...I think that once those files are appended, they do not automatically get removed if I just comment those lines out inside my layout before including the webajax.html. If I use files.insert inside webajax.html this behavior does not happen. So, I guess I don't like this files.append thing because it does not offer me the possibility to quickly remove files appended by commenting out code. 
What do you think about this?
"


On Mon, Sep 19, 2011 at 9:56 AM, Anthony Bastardi <abas...@gmail.com> wrote:
On Mon, Sep 19, 2011 at 12:47 PM, Beatris Rusu <beatr...@gmail.com> wrote:

I think you might be right. I just get this really weird behavior happening, like I comment my custom jquery ui file appends in layout, but i leave my view untouched to still include the accordion and the tabs, and for some reason when I open my index my accordion and tabs still show up correctly like my custome jquery ui are included. I do not understand this behavior. That is why at some point I thought that oh maybe web2py comes with accordion. Do you know of web2py having this behavior?

 
Have you looked at the HTML source rendered in the browser to confirm that the files are no longer included in the head? Use the browser tools to see if they are actually being loaded. 

 

[ALso, not sure why these emails are not posted on the blog anymore, but just my personal email - I guess is because i chose to click on "Reply to Author, button"]
 
Yes, that only replies directly to the author, not the whole list.
 
Anthony
 




Vineet

unread,
Sep 20, 2011, 1:13:04 AM9/20/11
to web2py-users
I had some hard time while using jQueryUI with web2py first time.
Whatever I did, I couldn't get rid of the 'ui-darkness' theme.
The theme css files were correctly specified in the header.
After slogging for a long time, I uninstalled a web2py plugin for
jqueryUI (which was having ui-darkness theme).
...And it worked.

See if it helps.

---Vineet
Reply all
Reply to author
Forward
0 new messages