JQueryUI Tabs not working

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

JQueryUI Tabs not working

Alejandro Zuzek
Hi everyone,

This is my first post to this list and I am hoping to get some help. Also I hope in the future I will be able to answer some questions to others. I am developing a web app in a Pharo 1.1 one-click distribution so it comes with Seaside 3.0. I am not able to make the JQueryUI tabs work in my app. I have added the JQDeploymentLibrary and JQUiDeploymentLibrary to this app and basically copied and pasted the tabswidget example (http://localhost:8080/tests/jquery-ui/tabswidget - JQTabsFunctionalTest class) into my app, but all I get is the unordered list with hiperlinks to the values of the 'tabNamesAndValues' dictionary. The value of the last link is displayed below the list and the other two are displayed as soon as I click on the corresponding link. There are no Javascript errors when loading the page.  Hopefully you will be able to see what I get below, but most probably the unordered list and hyperlinks will be lost in conversion to ASCII:

AZJQTabsTest
Third tab value


What am I missing here? By the way, the tabswidget example works perfectly fine and I have developed another application in the same image which also uses JQueryUI tabs and those are working fine too.

The two methods that are used in my example are:

AZJQTabsTest>>renderContentOn: html
    html text: 'AZJQTabsTest'.
html div
      script: html jQuery new tabs;
      with: [
         html unorderedList: [
            self tabNamesAndValues keysAndValuesDo: [ :name :description |
               html listItem: [
                  html anchor
                     url: (html jQuery ajax
                        html: [ :h | h text: description ];
                        fullUrl);
                     with: name ] ] ] ]

AZJQTabsTest>>tabNamesAndValues
    ^Dictionary new
        at: 'One' put: 'First tab value';
        at: 'Two' put: 'Second tab value';
        at: 'Three' put: 'Third tab value';
        yourself

AZJQTabsTest is a subclass of WAComponent and answers 'true' to canBeRoot.

Any ideas?

Thanks,

Alejandro

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: JQueryUI Tabs not working

xx397
Have you included a theme in your updateRoot: e.g. JQSmoothnessTheme new updateRoot: anHtmlRoot

--- On Tue, 24/7/12, Alejandro Zuzek <[hidden email]> wrote:

From: Alejandro Zuzek <[hidden email]>
Subject: [Seaside] JQueryUI Tabs not working
To: [hidden email]
Date: Tuesday, 24 July, 2012, 3:29

Hi everyone,

This is my first post to this list and I am hoping to get some help. Also I hope in the future I will be able to answer some questions to others. I am developing a web app in a Pharo 1.1 one-click distribution so it comes with Seaside 3.0. I am not able to make the JQueryUI tabs work in my app. I have added the JQDeploymentLibrary and JQUiDeploymentLibrary to this app and basically copied and pasted the tabswidget example (http://localhost:8080/tests/jquery-ui/tabswidget - JQTabsFunctionalTest class) into my app, but all I get is the unordered list with hiperlinks to the values of the 'tabNamesAndValues' dictionary. The value of the last link is displayed below the list and the other two are displayed as soon as I click on the corresponding link. There are no Javascript errors when loading the page.  Hopefully you will be able to see what I get below, but most probably the unordered list and hyperlinks will be lost in conversion to ASCII:

AZJQTabsTest
Third tab value


What am I missing here? By the way, the tabswidget example works perfectly fine and I have developed another application in the same image which also uses JQueryUI tabs and those are working fine too.

The two methods that are used in my example are:

AZJQTabsTest>>renderContentOn: html
    html text: 'AZJQTabsTest'.
html div
      script: html jQuery new tabs;
      with: [
         html unorderedList: [
            self tabNamesAndValues keysAndValuesDo: [ :name :description |
               html listItem: [
                  html anchor
                     url: (html jQuery ajax
                        html: [ :h | h text: description ];
                        fullUrl);
                     with: name ] ] ] ]

AZJQTabsTest>>tabNamesAndValues
    ^Dictionary new
        at: 'One' put: 'First tab value';
        at: 'Two' put: 'Second tab value';
        at: 'Three' put: 'Third tab value';
        yourself

AZJQTabsTest is a subclass of WAComponent and answers 'true' to canBeRoot.

Any ideas?

Thanks,

Alejandro

-----Inline Attachment Follows-----

_______________________________________________
seaside mailing list
seaside@...
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: JQueryUI Tabs not working

jtuchel
HI Alejandro,

welcome, and don't worry about asking questions: most uf us here have
mroe questions than answers ;-)

The first things to check are:

* Did you add the jquery libraries to your application in the method
that calls #register:asApplicationAt: ?
* Can you see the jquery.js and other files in your browser's debugging
tools (like Firebug)?
* Does the html page contain links to your local image for the jquery
code or some location like google API's and is the machine connected to
the internet? (Don't laugh, I had a problem on my notebook on the train
and it took a while to find out why ... ;-) )
* Can you put a breaktpoint into the javascript code in your web browser
and does it fire? Again, Safari/Chrome's web tools or Firebug are an
important recommendation here.

I guess once you are through this list you either solved the problem or
at least found it and can ask more specific questions about it ;-)

Joachim



Am 24.07.12 09:02, schrieb CHRIS BAILEY:

> Have you included a theme in your updateRoot: e.g. JQSmoothnessTheme
> new updateRoot: anHtmlRoot
>
> --- On *Tue, 24/7/12, Alejandro Zuzek /<[hidden email]>/* wrote:
>
>
>     From: Alejandro Zuzek <[hidden email]>
>     Subject: [Seaside] JQueryUI Tabs not working
>     To: [hidden email]
>     Date: Tuesday, 24 July, 2012, 3:29
>
>     Hi everyone,
>
>     This is my first post to this list and I am hoping to get some
>     help. Also I hope in the future I will be able to answer some
>     questions to others. I am developing a web app in a Pharo 1.1
>     one-click distribution so it comes with Seaside 3.0. I am not able
>     to make the JQueryUI tabs work in my app. I have added the
>     JQDeploymentLibrary and JQUiDeploymentLibrary to this app and
>     basically copied and pasted the tabswidget example
>     (http://localhost:8080/tests/jquery-ui/tabswidget -
>     JQTabsFunctionalTest class) into my app, but all I get is the
>     unordered list with hiperlinks to the values of the
>     'tabNamesAndValues' dictionary. The value of the last link is
>     displayed below the list and the other two are displayed as soon
>     as I click on the corresponding link. There are no Javascript
>     errors when loading the page. Hopefully you will be able to see
>     what I get below, but most probably the unordered list and
>     hyperlinks will be lost in conversion to ASCII:
>
>     AZJQTabsTest
>
>       * Three <http://localhost:8080/AZJQTabsTest#ui-tabs-5>
>       * Two <http://localhost:8080/AZJQTabsTest#ui-tabs-9>
>       * One <http://localhost:8080/AZJQTabsTest#ui-tabs-11>
>
>     Third tab value
>
>
>     What am I missing here? By the way, the tabswidget example works
>     perfectly fine and I have developed another application in the
>     same image which also uses JQueryUI tabs and those are working
>     fine too.
>
>     The two methods that are used in my example are:
>
>     AZJQTabsTest>>renderContentOn: html
>     html text: 'AZJQTabsTest'.
>     html div
>     script: html jQuery new tabs;
>     with: [
>     html unorderedList: [
>     self tabNamesAndValues keysAndValuesDo: [ :name :description |
>     html listItem: [
>     html anchor
>     url: (html jQuery ajax
>     html: [ :h | h text: description ];
>     fullUrl);
>     with: name ] ] ] ]
>
>     AZJQTabsTest>>tabNamesAndValues
>     ^Dictionary new
>     at: 'One' put: 'First tab value';
>     at: 'Two' put: 'Second tab value';
>     at: 'Three' put: 'Third tab value';
>     yourself
>
>     AZJQTabsTest is a subclass of WAComponent and answers 'true' to
>     canBeRoot.
>
>     Any ideas?
>
>     Thanks,
>
>     Alejandro
>
>     -----Inline Attachment Follows-----
>
>     _______________________________________________
>     seaside mailing list
>     [hidden email]
>     </mc/compose?to=[hidden email]>
>     http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
>
>
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
--
-- 
----------------------------------------------------------------------- 
Objektfabrik Joachim Tuchel          mailto:[hidden email] 
Fliederweg 1                         http://www.objektfabrik.de
D-71640 Ludwigsburg     http://joachimtuchel.wordpress.com
Telefon: +49 7141 56 10 86 0         Fax: +49 7141 56 10 86 1





_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

smime.p7s (7K) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: JQueryUI Tabs not working

Alejandro Zuzek
Thanks guys, I am amazed by the quick turnaround. I will be implementing these suggestions shortly and I'll let you know how it went.
 
Alejandro

On Tue, Jul 24, 2012 at 4:15 AM, Joachim Tuchel <[hidden email]> wrote:
HI Alejandro,

welcome, and don't worry about asking questions: most uf us here have mroe questions than answers ;-)

The first things to check are:

* Did you add the jquery libraries to your application in the method that calls #register:asApplicationAt: ?
* Can you see the jquery.js and other files in your browser's debugging tools (like Firebug)?
* Does the html page contain links to your local image for the jquery code or some location like google API's and is the machine connected to the internet? (Don't laugh, I had a problem on my notebook on the train and it took a while to find out why ... ;-) )
* Can you put a breaktpoint into the javascript code in your web browser and does it fire? Again, Safari/Chrome's web tools or Firebug are an important recommendation here.

I guess once you are through this list you either solved the problem or at least found it and can ask more specific questions about it ;-)

Joachim



Am 24.07.12 09:02, schrieb CHRIS BAILEY:
Have you included a theme in your updateRoot: e.g. JQSmoothnessTheme new updateRoot: anHtmlRoot

--- On *Tue, 24/7/12, Alejandro Zuzek /<[hidden email]>/* wrote:


    From: Alejandro Zuzek <[hidden email]>
    Subject: [Seaside] JQueryUI Tabs not working
    To: [hidden email]
    Date: Tuesday, 24 July, 2012, 3:29

    Hi everyone,

    This is my first post to this list and I am hoping to get some
    help. Also I hope in the future I will be able to answer some
    questions to others. I am developing a web app in a Pharo 1.1
    one-click distribution so it comes with Seaside 3.0. I am not able
    to make the JQueryUI tabs work in my app. I have added the
    JQDeploymentLibrary and JQUiDeploymentLibrary to this app and
    basically copied and pasted the tabswidget example
    (http://localhost:8080/tests/jquery-ui/tabswidget -
    JQTabsFunctionalTest class) into my app, but all I get is the
    unordered list with hiperlinks to the values of the
    'tabNamesAndValues' dictionary. The value of the last link is
    displayed below the list and the other two are displayed as soon
    as I click on the corresponding link. There are no Javascript
    errors when loading the page. Hopefully you will be able to see
    what I get below, but most probably the unordered list and
    hyperlinks will be lost in conversion to ASCII:

    AZJQTabsTest

      * Three <http://localhost:8080/AZJQTabsTest#ui-tabs-5>
      * Two <http://localhost:8080/AZJQTabsTest#ui-tabs-9>
      * One <http://localhost:8080/AZJQTabsTest#ui-tabs-11>


    Third tab value


    What am I missing here? By the way, the tabswidget example works
    perfectly fine and I have developed another application in the
    same image which also uses JQueryUI tabs and those are working
    fine too.

    The two methods that are used in my example are:

    AZJQTabsTest>>renderContentOn: html
    html text: 'AZJQTabsTest'.
    html div
    script: html jQuery new tabs;
    with: [
    html unorderedList: [
    self tabNamesAndValues keysAndValuesDo: [ :name :description |
    html listItem: [
    html anchor
    url: (html jQuery ajax
    html: [ :h | h text: description ];
    fullUrl);
    with: name ] ] ] ]

    AZJQTabsTest>>tabNamesAndValues
    ^Dictionary new
    at: 'One' put: 'First tab value';
    at: 'Two' put: 'Second tab value';
    at: 'Three' put: 'Third tab value';
    yourself

    AZJQTabsTest is a subclass of WAComponent and answers 'true' to
    canBeRoot.

    Any ideas?

    Thanks,

    Alejandro

    -----Inline Attachment Follows-----

    _______________________________________________
    seaside mailing list
    [hidden email]
    </mc/compose?to=[hidden email]>
    http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside




_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

--
-- ----------------------------------------------------------------------- Objektfabrik Joachim Tuchel          mailto:[hidden email] Fliederweg 1                         http://www.objektfabrik.de
D-71640 Ludwigsburg                  http://joachimtuchel.wordpress.com
Telefon: <a href="tel:%2B49%207141%2056%2010%2086%200" target="_blank" value="+4971415610860">+49 7141 56 10 86 0         Fax: <a href="tel:%2B49%207141%2056%2010%2086%201" target="_blank" value="+4971415610861">+49 7141 56 10 86 1





_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside



_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: JQueryUI Tabs not working

Alejandro Zuzek
At the end it was just a matter of adding the theme in my updateRoot: method. Of course, Joachim's tips will help me in general to debug Javascript problems as well.

Thanks again,

Alejandro

On Tue, Jul 24, 2012 at 9:18 AM, Alejandro Zuzek <[hidden email]> wrote:
Thanks guys, I am amazed by the quick turnaround. I will be implementing these suggestions shortly and I'll let you know how it went.
 
Alejandro

On Tue, Jul 24, 2012 at 4:15 AM, Joachim Tuchel <[hidden email]> wrote:
HI Alejandro,

welcome, and don't worry about asking questions: most uf us here have mroe questions than answers ;-)

The first things to check are:

* Did you add the jquery libraries to your application in the method that calls #register:asApplicationAt: ?
* Can you see the jquery.js and other files in your browser's debugging tools (like Firebug)?
* Does the html page contain links to your local image for the jquery code or some location like google API's and is the machine connected to the internet? (Don't laugh, I had a problem on my notebook on the train and it took a while to find out why ... ;-) )
* Can you put a breaktpoint into the javascript code in your web browser and does it fire? Again, Safari/Chrome's web tools or Firebug are an important recommendation here.

I guess once you are through this list you either solved the problem or at least found it and can ask more specific questions about it ;-)

Joachim



Am 24.07.12 09:02, schrieb CHRIS BAILEY:
Have you included a theme in your updateRoot: e.g. JQSmoothnessTheme new updateRoot: anHtmlRoot

--- On *Tue, 24/7/12, Alejandro Zuzek /<[hidden email]>/* wrote:


    From: Alejandro Zuzek <[hidden email]>
    Subject: [Seaside] JQueryUI Tabs not working
    To: [hidden email]
    Date: Tuesday, 24 July, 2012, 3:29

    Hi everyone,

    This is my first post to this list and I am hoping to get some
    help. Also I hope in the future I will be able to answer some
    questions to others. I am developing a web app in a Pharo 1.1
    one-click distribution so it comes with Seaside 3.0. I am not able
    to make the JQueryUI tabs work in my app. I have added the
    JQDeploymentLibrary and JQUiDeploymentLibrary to this app and
    basically copied and pasted the tabswidget example
    (http://localhost:8080/tests/jquery-ui/tabswidget -
    JQTabsFunctionalTest class) into my app, but all I get is the
    unordered list with hiperlinks to the values of the
    'tabNamesAndValues' dictionary. The value of the last link is
    displayed below the list and the other two are displayed as soon
    as I click on the corresponding link. There are no Javascript
    errors when loading the page. Hopefully you will be able to see
    what I get below, but most probably the unordered list and
    hyperlinks will be lost in conversion to ASCII:

    AZJQTabsTest

      * Three <http://localhost:8080/AZJQTabsTest#ui-tabs-5>
      * Two <http://localhost:8080/AZJQTabsTest#ui-tabs-9>
      * One <http://localhost:8080/AZJQTabsTest#ui-tabs-11>


    Third tab value


    What am I missing here? By the way, the tabswidget example works
    perfectly fine and I have developed another application in the
    same image which also uses JQueryUI tabs and those are working
    fine too.

    The two methods that are used in my example are:

    AZJQTabsTest>>renderContentOn: html
    html text: 'AZJQTabsTest'.
    html div
    script: html jQuery new tabs;
    with: [
    html unorderedList: [
    self tabNamesAndValues keysAndValuesDo: [ :name :description |
    html listItem: [
    html anchor
    url: (html jQuery ajax
    html: [ :h | h text: description ];
    fullUrl);
    with: name ] ] ] ]

    AZJQTabsTest>>tabNamesAndValues
    ^Dictionary new
    at: 'One' put: 'First tab value';
    at: 'Two' put: 'Second tab value';
    at: 'Three' put: 'Third tab value';
    yourself

    AZJQTabsTest is a subclass of WAComponent and answers 'true' to
    canBeRoot.

    Any ideas?

    Thanks,

    Alejandro

    -----Inline Attachment Follows-----

    _______________________________________________
    seaside mailing list
    [hidden email]
    </mc/compose?to=[hidden email]>
    http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside




_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

--
-- ----------------------------------------------------------------------- Objektfabrik Joachim Tuchel          mailto:[hidden email] Fliederweg 1                         http://www.objektfabrik.de
D-71640 Ludwigsburg                  http://joachimtuchel.wordpress.com
Telefon: <a href="tel:%2B49%207141%2056%2010%2086%200" value="+4971415610860" target="_blank">+49 7141 56 10 86 0         Fax: <a href="tel:%2B49%207141%2056%2010%2086%201" value="+4971415610861" target="_blank">+49 7141 56 10 86 1





_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside




_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside