TwitterBootstrap dropdowns and submitting on change

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

TwitterBootstrap dropdowns and submitting on change

Mariano Martinez Peck
Hi guys, 

In my application I have many many places in which I need to submit the surrounding form once an item has been selected from a list or things like that. For example, for a "html select", I am relying on #beSubmitOnChange (which is deprecated....).

I am now using #tbsButtonGroup and #tbsDropdownMenu (they are inside a form with another html selects) and I want to achieve the same. I added a 

onClick: 'submit()';

to the tbsDropdownMenu. The form seems to be submitted, but the callbacks of my anchors never get called:

Reduced example:

html form: [
html tbsButtonGroup: [  
html tbsDropdownButton beDefault;  beExtraSmall; with: [html text: 'Filter '; tbsCaret]. 
html tbsDropdownMenu
onClick: 'submit()';
with: [
html tbsDropdownMenuItem: [ 
html anchor
text: 'Selected';
callback: [self halt. ]. ].
html tbsDropdownMenuItem: [ 
html anchor
text: 'Unselected';
callback: [self halt. ]. ].
]
]

]

Any ideas?

Thanks

--
Mariano
http://marianopeck.wordpress.com

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

Re: TwitterBootstrap dropdowns and submitting on change

Paul DeBruicker
Hi Mariano,


Can you use the JQAjax>>serializeForm: ?

e.g. for our anchor say:

onClick: html jQuery ajax serializeForm:(html jQuery id:'myForm');





On Oct 17, 2013, at 7:48 AM, Mariano Martinez Peck <[hidden email]> wrote:

> Hi guys,
>
> In my application I have many many places in which I need to submit the surrounding form once an item has been selected from a list or things like that. For example, for a "html select", I am relying on #beSubmitOnChange (which is deprecated....).
>
> I am now using #tbsButtonGroup and #tbsDropdownMenu (they are inside a form with another html selects) and I want to achieve the same. I added a
>
> onClick: 'submit()';
>
> to the tbsDropdownMenu. The form seems to be submitted, but the callbacks of my anchors never get called:
>
> Reduced example:
>
> html form: [
> html tbsButtonGroup: [  
> html tbsDropdownButton beDefault;  beExtraSmall; with: [html text: 'Filter '; tbsCaret].
> html tbsDropdownMenu
> onClick: 'submit()';
> with: [
> html tbsDropdownMenuItem: [
> html anchor
> text: 'Selected';
> callback: [self halt. ]. ].
> html tbsDropdownMenuItem: [
> html anchor
> text: 'Unselected';
> callback: [self halt. ]. ].
> ]
> ]
>
> ]
>
> Any ideas?
>
> Thanks
>
> --
> Mariano
> http://marianopeck.wordpress.com
> _______________________________________________
> 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: TwitterBootstrap dropdowns and submitting on change

Mariano Martinez Peck



On Thu, Oct 17, 2013 at 1:39 PM, Paul DeBruicker <[hidden email]> wrote:
Hi Mariano,


Can you use the JQAjax>>serializeForm: ?

e.g. for our anchor say:

onClick: html jQuery ajax serializeForm:(html jQuery id:'myForm');



Hi Paul, I have just tried that doing this:

html tbsDropdownMenuItem: [ 
html anchor
onClick: (html jQuery ajax serializeForm: (html jQuery id: formID));
text: 'Selected';
callback: [self halt. ]. ].


And it doesn't work either. The html for such code is this:

<li>

    <a onclick="jQuery.ajax({"url":"/dp","data":["_s=OpQD8YOfnkSWYrc_","_k=6_McsUmdszVXIFuG","21",jQuery("#id18").closest("form").find(":input").serialize()].join("&")})"> … </a>

</li>

and indeed, "#id18" is the correct id of the form. 

Ant other idea?

Thanks in advance,



 



On Oct 17, 2013, at 7:48 AM, Mariano Martinez Peck <[hidden email]> wrote:

> Hi guys,
>
> In my application I have many many places in which I need to submit the surrounding form once an item has been selected from a list or things like that. For example, for a "html select", I am relying on #beSubmitOnChange (which is deprecated....).
>
> I am now using #tbsButtonGroup and #tbsDropdownMenu (they are inside a form with another html selects) and I want to achieve the same. I added a
>
> onClick: 'submit()';
>
> to the tbsDropdownMenu. The form seems to be submitted, but the callbacks of my anchors never get called:
>
> Reduced example:
>
> html form: [
> html tbsButtonGroup: [
>               html tbsDropdownButton beDefault;  beExtraSmall; with: [html text: 'Filter '; tbsCaret].
>               html tbsDropdownMenu
>                       onClick: 'submit()';
>                       with: [
>                               html tbsDropdownMenuItem: [
>                                       html anchor
>                                               text: 'Selected';
>                                               callback: [self halt. ]. ].
>                               html tbsDropdownMenuItem: [
>                                       html anchor
>                                               text: 'Unselected';
>                                               callback: [self halt. ]. ].
>                       ]
>       ]
>
> ]
>
> Any ideas?
>
> Thanks
>
> --
> Mariano
> http://marianopeck.wordpress.com
> _______________________________________________
> 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



--
Mariano
http://marianopeck.wordpress.com

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

Re: TwitterBootstrap dropdowns and submitting on change

Paul DeBruicker
Hi Mariano,

I don't understand what you mean when you say "And it doesn't work either"


That should serialize the form and the data in the inputs to the server.  In the javascript debugger do you see a 'GET' after clicking the link that has the form data?

Maybe you need a

html hiddenInput callback:[self processSubmittedFormData].

at the end of the form.

What do you want to happen when the link is clicked?  



Thanks

Paul

On Oct 17, 2013, at 10:25 AM, Mariano Martinez Peck <[hidden email]> wrote:

>
>
>
> On Thu, Oct 17, 2013 at 1:39 PM, Paul DeBruicker <[hidden email]> wrote:
> Hi Mariano,
>
>
> Can you use the JQAjax>>serializeForm: ?
>
> e.g. for our anchor say:
>
> onClick: html jQuery ajax serializeForm:(html jQuery id:'myForm');
>
>
>
> Hi Paul, I have just tried that doing this:
>
> html tbsDropdownMenuItem: [
> html anchor
> onClick: (html jQuery ajax serializeForm: (html jQuery id: formID));
> text: 'Selected';
> callback: [self halt. ]. ].
>
>
> And it doesn't work either. The html for such code is this:
>
> <li>
>
>     <a onclick="jQuery.ajax({"url":"/dp","data":["_s=OpQD8YOfnkSWYrc_","_k=6_McsUmdszVXIFuG","21",jQuery("#id18").closest("form").find(":input").serialize()].join("&")})"> … </a>
>
> </li>
>
> and indeed, "#id18" is the correct id of the form.
>
> Ant other idea?
>
> Thanks in advance,
>
>
>
>  
>
>
>
> On Oct 17, 2013, at 7:48 AM, Mariano Martinez Peck <[hidden email]> wrote:
>
> > Hi guys,
> >
> > In my application I have many many places in which I need to submit the surrounding form once an item has been selected from a list or things like that. For example, for a "html select", I am relying on #beSubmitOnChange (which is deprecated....).
> >
> > I am now using #tbsButtonGroup and #tbsDropdownMenu (they are inside a form with another html selects) and I want to achieve the same. I added a
> >
> > onClick: 'submit()';
> >
> > to the tbsDropdownMenu. The form seems to be submitted, but the callbacks of my anchors never get called:
> >
> > Reduced example:
> >
> > html form: [
> > html tbsButtonGroup: [
> >               html tbsDropdownButton beDefault;  beExtraSmall; with: [html text: 'Filter '; tbsCaret].
> >               html tbsDropdownMenu
> >                       onClick: 'submit()';
> >                       with: [
> >                               html tbsDropdownMenuItem: [
> >                                       html anchor
> >                                               text: 'Selected';
> >                                               callback: [self halt. ]. ].
> >                               html tbsDropdownMenuItem: [
> >                                       html anchor
> >                                               text: 'Unselected';
> >                                               callback: [self halt. ]. ].
> >                       ]
> >       ]
> >
> > ]
> >
> > Any ideas?
> >
> > Thanks
> >
> > --
> > Mariano
> > http://marianopeck.wordpress.com
> > _______________________________________________
> > 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
>
>
>
> --
> Mariano
> http://marianopeck.wordpress.com
> _______________________________________________
> 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: TwitterBootstrap dropdowns and submitting on change

Mariano Martinez Peck



On Thu, Oct 17, 2013 at 2:37 PM, Paul DeBruicker <[hidden email]> wrote:
Hi Mariano,

I don't understand what you mean when you say "And it doesn't work either"


The callback is not called. 
 

That should serialize the form and the data in the inputs to the server.  In the javascript debugger do you see a 'GET' after clicking the link that has the form data?


Yes, I do see a GET. 
 
Maybe you need a

html hiddenInput callback:[self processSubmittedFormData].

at the end of the form.


mmm I don't get it. Sorry, I am still a bit newbie here.
 
What do you want to happen when the link is clicked?


Quite simple in fact. I just want my callbacks to be invoked. See my original example:

html form: [
html tbsButtonGroup: [  
html tbsDropdownButton beDefault;  beExtraSmall; with: [html text: 'Filter '; tbsCaret]. 
html tbsDropdownMenu
with: [
html tbsDropdownMenuItem: [ 
html anchor
text: 'Selected';
callback: [self halt. ]. ].
html tbsDropdownMenuItem: [ 
html anchor
text: 'Unselected';
callback: [self halt. ]. ].
]
]

]

you see those halts? I simple want them to really be executed when I click on an item....

thanks Paul.


 


Thanks

Paul

On Oct 17, 2013, at 10:25 AM, Mariano Martinez Peck <[hidden email]> wrote:

>
>
>
> On Thu, Oct 17, 2013 at 1:39 PM, Paul DeBruicker <[hidden email]> wrote:
> Hi Mariano,
>
>
> Can you use the JQAjax>>serializeForm: ?
>
> e.g. for our anchor say:
>
> onClick: html jQuery ajax serializeForm:(html jQuery id:'myForm');
>
>
>
> Hi Paul, I have just tried that doing this:
>
> html tbsDropdownMenuItem: [
>                                       html anchor
>                                               onClick: (html jQuery ajax serializeForm: (html jQuery id: formID));
>                                               text: 'Selected';
>                                               callback: [self halt. ]. ].
>
>
> And it doesn't work either. The html for such code is this:
>
> <li>
>
>     <a onclick="jQuery.ajax({"url":"/dp","data":["_s=OpQD8YOfnkSWYrc_","_k=6_McsUmdszVXIFuG","21",jQuery("#id18").closest("form").find(":input").serialize()].join("&")})"> … </a>
>
> </li>
>
> and indeed, "#id18" is the correct id of the form.
>
> Ant other idea?
>
> Thanks in advance,
>
>
>
>
>
>
>
> On Oct 17, 2013, at 7:48 AM, Mariano Martinez Peck <[hidden email]> wrote:
>
> > Hi guys,
> >
> > In my application I have many many places in which I need to submit the surrounding form once an item has been selected from a list or things like that. For example, for a "html select", I am relying on #beSubmitOnChange (which is deprecated....).
> >
> > I am now using #tbsButtonGroup and #tbsDropdownMenu (they are inside a form with another html selects) and I want to achieve the same. I added a
> >
> > onClick: 'submit()';
> >
> > to the tbsDropdownMenu. The form seems to be submitted, but the callbacks of my anchors never get called:
> >
> > Reduced example:
> >
> > html form: [
> > html tbsButtonGroup: [
> >               html tbsDropdownButton beDefault;  beExtraSmall; with: [html text: 'Filter '; tbsCaret].
> >               html tbsDropdownMenu
> >                       onClick: 'submit()';
> >                       with: [
> >                               html tbsDropdownMenuItem: [
> >                                       html anchor
> >                                               text: 'Selected';
> >                                               callback: [self halt. ]. ].
> >                               html tbsDropdownMenuItem: [
> >                                       html anchor
> >                                               text: 'Unselected';
> >                                               callback: [self halt. ]. ].
> >                       ]
> >       ]
> >
> > ]
> >
> > Any ideas?
> >
> > Thanks
> >
> > --
> > Mariano
> > http://marianopeck.wordpress.com
> > _______________________________________________
> > 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
>
>
>
> --
> Mariano
> http://marianopeck.wordpress.com
> _______________________________________________
> 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



--
Mariano
http://marianopeck.wordpress.com

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

Re: TwitterBootstrap dropdowns and submitting on change

Bob Arning-2
I don't know TB at all, but does what you are asking for make sense? You want some items in a menu to have their callbacks triggered? To me the callback means this item was picked from the menu, not just that it exists in the menu. Doesn't seem quite right that they would all get triggered by a form submission.

Cheers,
Bob

On 10/17/13 2:40 PM, Mariano Martinez Peck wrote:
you see those halts? I simple want them to really be executed when I click on an item....



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

Re: TwitterBootstrap dropdowns and submitting on change

tty
I have a tbsNavBar that I want to put buttons on and be able to disable/enable the rendering of them depending on what component is using the navBar.
For example, If I am on the Documentation component, I do not want to show a link to the Documentation component when I am on it.

In the NavBar, I initialized a couple of dictionaries--one with a selector and the other with a lable to display.




initialize
super initialize.
linkDisplay = Dictionary new.
"enable all links by default"
linkDisplay
at: #signin put: true;
at: #documentation put: true;
at: #support put: true;
at: #signup put: true.
linkLabel = Dictionary new.
linkLabel
at: #signin put: 'Sign In';
at: #documentation put: 'Documentation';
at: #support put: 'Help & Support';
at: #signup put: 'Sign Up'.


Then on render, I want to invoke a callback with a selector named what the key in the dictionary is so that this:


html tbsNavItem: [ html anchor callback: [self signup]; with: 'Sign Up' ].
html tbsNavItem: [ html anchor callback: [self documentation]; with: 'Documentation' ].
html tbsNavItem: [ html anchor callback: [self support]; with: 'Help & Support'].
html tbsNavItem: [ html anchor callback: [self signin]; with: 'Sign In']]]

Becomes:

...
linkDisplay keysAndValuesDo: [ :key :value | value
ifTrue: [
html tbsNavItem: [ html anchor callback: [self key]; with: (linkLabel at: key) ]]....


I am getting an error


MessageNotUnderstood: MyComponent>>key

Does anybody have a generic way to dynamically set a callback to a selector?

thx in advance

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

Re: TwitterBootstrap dropdowns and submitting on change

Paul DeBruicker
start your own thread?


On Oct 17, 2013, at 1:55 PM, gettimothy <[hidden email]> wrote:

> I have a tbsNavBar that I want to put buttons on and be able to disable/enable the rendering of them depending on what component is using the navBar.
> For example, If I am on the Documentation component, I do not want to show a link to the Documentation component when I am on it.
>
> In the NavBar, I initialized a couple of dictionaries--one with a selector and the other with a lable to display.
>
>
>
>
> initialize
> super initialize.
> linkDisplay = Dictionary new.
> "enable all links by default"
> linkDisplay
> at: #signin put: true;
> at:  #documentation put: true;
> at:  #support put: true;
> at:  #signup put: true.
> linkLabel = Dictionary new.
> linkLabel
> at: #signin put: 'Sign In';
> at:  #documentation put: 'Documentation';
> at:  #support put: 'Help & Support';
> at:  #signup put: 'Sign Up'.
>  
>
> Then on render, I want to invoke a callback with a selector named what the key in the dictionary is so that this:
>
>
> html tbsNavItem: [ html anchor callback: [self signup]; with: 'Sign Up'   ].
> html tbsNavItem: [ html anchor callback: [self documentation]; with: 'Documentation'   ].
> html tbsNavItem: [ html anchor callback: [self support]; with: 'Help & Support'].
> html tbsNavItem: [ html anchor callback: [self signin]; with: 'Sign In']]]
>  
> Becomes:
>
> ...
> linkDisplay keysAndValuesDo: [ :key  :value |  value
> ifTrue: [
> html tbsNavItem: [ html anchor callback: [self key]; with: (linkLabel at: key) ]]....
>  
>
> I am getting an error
>
> MessageNotUnderstood: MyComponent>>key
>  
> Does anybody have a generic way to dynamically set a callback to a selector?
>
> thx in advance
> _______________________________________________
> 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
tty
Reply | Threaded
Open this post in threaded view
|

Re: Assign a selector to a callback

tty
Sorry, I thought I was...my bad

---- On Thu, 17 Oct 2013 14:00:59 -0700 Paul DeBruicker<[hidden email]> wrote ----

start your own thread?


On Oct 17, 2013, at 1:55 PM, gettimothy <[hidden email]> wrote:

> I have a tbsNavBar that I want to put buttons on and be able to disable/enable the rendering of them depending on what component is using the navBar.
> For example, If I am on the Documentation component, I do not want to show a link to the Documentation component when I am on it.
>
> In the NavBar, I initialized a couple of dictionaries--one with a selector and the other with a lable to display.
>
>
>
>
> initialize
>     super initialize.
>     linkDisplay = Dictionary new.
>     "enable all links by default"
>     linkDisplay
>         at: #signin put: true;
>         at: #documentation put: true;
>         at: #support put: true;
>         at: #signup put: true.
>     linkLabel = Dictionary new.        
>     linkLabel
>         at: #signin put: 'Sign In';
>         at: #documentation put: 'Documentation';
>         at: #support put: 'Help & Support';
>         at: #signup put: 'Sign Up'.
>
>
> Then on render, I want to invoke a callback with a selector named what the key in the dictionary is so that this:
>
>
> html tbsNavItem: [ html anchor callback: [self signup]; with: 'Sign Up' ].
> html tbsNavItem: [ html anchor callback: [self documentation]; with: 'Documentation' ].
> html tbsNavItem: [ html anchor callback: [self support]; with: 'Help & Support'].
> html tbsNavItem: [ html anchor callback: [self signin]; with: 'Sign In']]]
>
> Becomes:
>
> ...
> linkDisplay keysAndValuesDo: [ :key :value | value
>             ifTrue: [
>                 html tbsNavItem: [ html anchor callback: [self key]; with: (linkLabel at: key) ]]....
>
>
> I am getting an error
>
> MessageNotUnderstood: MyComponent>>key
>
> Does anybody have a generic way to dynamically set a callback to a selector?
>
> thx in advance
> _______________________________________________
> 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


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

Re: TwitterBootstrap dropdowns and submitting on change

tty
In reply to this post by Paul DeBruicker
Sorry about that, my bad

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

Re: TwitterBootstrap dropdowns and submitting on change

Paul DeBruicker
In reply to this post by Mariano Martinez Peck

I think you're trying to find out about something by asking about something else, and in this instance its confusing.  What I suspect you are trying to do is:

1. user clicks dropdown menu item
2. form data is submitted to server
3. form callback is processed based on which menu item is clicked
4. UI is updated based on calculations and data


more below:

On Oct 17, 2013, at 11:40 AM, Mariano Martinez Peck <[hidden email]> wrote:

>
>
>
> On Thu, Oct 17, 2013 at 2:37 PM, Paul DeBruicker <[hidden email]> wrote:
> Hi Mariano,
>
> I don't understand what you mean when you say "And it doesn't work either"
>
>
> The callback is not called.

You can't have the anchor callbacks processed as part of the form submission process because anchors aren't form elements, but navigation elements.  They can trigger a form submission using javascript and thats about it when it comes to forms & anchors.  

You can either attach those callbacks to #hiddenInputs next to each anchor or just use one hiddenInput at the bottom of the form (which is what I recommend if you want the same thing to happen no matter what link is clicked)

If you want a different callback to be processed based on which anchor is clicked and have the UI updated then do this:


html anchor
                onClick:
                        (html jQuery ajax
                                serializeForm: (html jQuery id: 'myForm');
                                onSuccess:
                                                ((html jQuery id: 'myForm') load
                                                                html: [ :h |
                                                                        self selectedCallback.
                                                                        self renderForm: h ])).
                with: 'Selected'.

Which serializes the form data, then replaces the form after performing the #selectedCallback


>  
>
> That should serialize the form and the data in the inputs to the server.  In the javascript debugger do you see a 'GET' after clicking the link that has the form data?
>
>
> Yes, I do see a GET.
>  
> Maybe you need a
>
> html hiddenInput callback:[self processSubmittedFormData].
>
> at the end of the form.
>
>
> mmm I don't get it. Sorry, I am still a bit newbie here.
>  


So if all of the callbacks in your example do the same thing then take the callbacks off the anchors and at the end of the form insert a #hiddenInput.  Attach a callback to that #hiddenInput which will process all the data.  Put it at the end of the form so all of the form's data will have been processed by seaside by the time its time to run the #hiddenInput's callback.  


> What do you want to happen when the link is clicked?
>
>
> Quite simple in fact. I just want my callbacks to be invoked. See my original example:
>

I think the #hiddenIpnut or the JQuery monstrosity above should cover it but do you mean all of them anytime one a link is clicked or just the one nearest the link?


> html form: [
> html tbsButtonGroup: [  
> html tbsDropdownButton beDefault;  beExtraSmall; with: [html text: 'Filter '; tbsCaret].
> html tbsDropdownMenu
> with: [
> html tbsDropdownMenuItem: [
> html anchor
> text: 'Selected';
> callback: [self halt. ]. ].
> html tbsDropdownMenuItem: [
> html anchor
> text: 'Unselected';
> callback: [self halt. ]. ].
> ]
> ]
>
> ]
>
> you see those halts? I simple want them to really be executed when I click on an item....
>
> thanks Paul.
>
>
>  
>
>
> Thanks
>
> Paul
>
> On Oct 17, 2013, at 10:25 AM, Mariano Martinez Peck <[hidden email]> wrote:
>
> >
> >
> >
> > On Thu, Oct 17, 2013 at 1:39 PM, Paul DeBruicker <[hidden email]> wrote:
> > Hi Mariano,
> >
> >
> > Can you use the JQAjax>>serializeForm: ?
> >
> > e.g. for our anchor say:
> >
> > onClick: html jQuery ajax serializeForm:(html jQuery id:'myForm');
> >
> >
> >
> > Hi Paul, I have just tried that doing this:
> >
> > html tbsDropdownMenuItem: [
> >                                       html anchor
> >                                               onClick: (html jQuery ajax serializeForm: (html jQuery id: formID));
> >                                               text: 'Selected';
> >                                               callback: [self halt. ]. ].
> >
> >
> > And it doesn't work either. The html for such code is this:
> >
> > <li>
> >
> >     <a onclick="jQuery.ajax({"url":"/dp","data":["_s=OpQD8YOfnkSWYrc_","_k=6_McsUmdszVXIFuG","21",jQuery("#id18").closest("form").find(":input").serialize()].join("&")})"> … </a>
> >
> > </li>
> >
> > and indeed, "#id18" is the correct id of the form.
> >
> > Ant other idea?
> >
> > Thanks in advance,
> >
> >
> >
> >
> >
> >
> >
> > On Oct 17, 2013, at 7:48 AM, Mariano Martinez Peck <[hidden email]> wrote:
> >
> > > Hi guys,
> > >
> > > In my application I have many many places in which I need to submit the surrounding form once an item has been selected from a list or things like that. For example, for a "html select", I am relying on #beSubmitOnChange (which is deprecated....).
> > >
> > > I am now using #tbsButtonGroup and #tbsDropdownMenu (they are inside a form with another html selects) and I want to achieve the same. I added a
> > >
> > > onClick: 'submit()';
> > >
> > > to the tbsDropdownMenu. The form seems to be submitted, but the callbacks of my anchors never get called:
> > >
> > > Reduced example:
> > >
> > > html form: [
> > > html tbsButtonGroup: [
> > >               html tbsDropdownButton beDefault;  beExtraSmall; with: [html text: 'Filter '; tbsCaret].
> > >               html tbsDropdownMenu
> > >                       onClick: 'submit()';
> > >                       with: [
> > >                               html tbsDropdownMenuItem: [
> > >                                       html anchor
> > >                                               text: 'Selected';
> > >                                               callback: [self halt. ]. ].
> > >                               html tbsDropdownMenuItem: [
> > >                                       html anchor
> > >                                               text: 'Unselected';
> > >                                               callback: [self halt. ]. ].
> > >                       ]
> > >       ]
> > >
> > > ]
> > >
> > > Any ideas?
> > >
> > > Thanks
> > >
> > > --
> > > Mariano
> > > http://marianopeck.wordpress.com
> > > _______________________________________________
> > > 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
> >
> >
> >
> > --
> > Mariano
> > http://marianopeck.wordpress.com
> > _______________________________________________
> > 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
>
>
>
> --
> Mariano
> http://marianopeck.wordpress.com
> _______________________________________________
> 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: TwitterBootstrap dropdowns and submitting on change

Paul DeBruicker
In reply to this post by tty
No problem

I hit enter before I added:

In your

> linkDisplay keysAndValuesDo: [ :key  :value |  value
> ifTrue: [
> html tbsNavItem: [ html anchor callback: [self key]; with: (linkLabel at: key) ]]

chunk change the

'self key' bit to

self perform: key

and see if it works


On Oct 17, 2013, at 1:55 PM, gettimothy <[hidden email]> wrote:

> I have a tbsNavBar that I want to put buttons on and be able to disable/enable the rendering of them depending on what component is using the navBar.
> For example, If I am on the Documentation component, I do not want to show a link to the Documentation component when I am on it.
>
> In the NavBar, I initialized a couple of dictionaries--one with a selector and the other with a lable to display.
>
>
>
>
> initialize
> super initialize.
> linkDisplay = Dictionary new.
> "enable all links by default"
> linkDisplay
> at: #signin put: true;
> at:  #documentation put: true;
> at:  #support put: true;
> at:  #signup put: true.
> linkLabel = Dictionary new.
> linkLabel
> at: #signin put: 'Sign In';
> at:  #documentation put: 'Documentation';
> at:  #support put: 'Help & Support';
> at:  #signup put: 'Sign Up'.
>  
>
> Then on render, I want to invoke a callback with a selector named what the key in the dictionary is so that this:
>
>
> html tbsNavItem: [ html anchor callback: [self signup]; with: 'Sign Up'   ].
> html tbsNavItem: [ html anchor callback: [self documentation]; with: 'Documentation'   ].
> html tbsNavItem: [ html anchor callback: [self support]; with: 'Help & Support'].
> html tbsNavItem: [ html anchor callback: [self signin]; with: 'Sign In']]]
>  
> Becomes:
>
> ...
> linkDisplay keysAndValuesDo: [ :key  :value |  value
> ifTrue: [
> html tbsNavItem: [ html anchor callback: [self key]; with: (linkLabel at: key) ]]....
>  
>
> I am getting an error
>
> MessageNotUnderstood: MyComponent>>key
>  
> Does anybody have a generic way to dynamically set a callback to a selector?
>
> thx in advance
> _______________________________________________
> 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
tty
Reply | Threaded
Open this post in threaded view
|

Re: TwitterBootstrap dropdowns and submitting on change

tty
In reply to this post by Paul DeBruicker
Thanks! it works.

I had seen the example in Terse Guide To Squeak


     x := 2 perform: #sqrt.                                      "indirect method invocation"

and thought (without trying--my bad) that there is no way it would work in the callback: block.


Here's the corrected code for the record:


.....
        html tbsNav tbsPullRight beTabs; with: [
                      linkDisplay keysAndValuesDo: [ :key  :value |  value
                        ifTrue: [
                            html tbsNavItem: [ html anchor callback: [self perform: key]; with: (linkLabel at: key) ]]]]]


---- On Thu, 17 Oct 2013 14:23:34 -0700 Paul DeBruicker<[hidden email]> wrote ----


I think you're trying to find out about something by asking about something else, and in this instance its confusing. What I suspect you are trying to do is:

1. user clicks dropdown menu item
2. form data is submitted to server
3. form callback is processed based on which menu item is clicked
4. UI is updated based on calculations and data


more below:

On Oct 17, 2013, at 11:40 AM, Mariano Martinez Peck <[hidden email]> wrote:

>
>
>
> On Thu, Oct 17, 2013 at 2:37 PM, Paul DeBruicker <[hidden email]> wrote:
> Hi Mariano,
>
> I don't understand what you mean when you say "And it doesn't work either"
>
>
> The callback is not called.

You can't have the anchor callbacks processed as part of the form submission process because anchors aren't form elements, but navigation elements. They can trigger a form submission using javascript and thats about it when it comes to forms & anchors.

You can either attach those callbacks to #hiddenInputs next to each anchor or just use one hiddenInput at the bottom of the form (which is what I recommend if you want the same thing to happen no matter what link is clicked)

If you want a different callback to be processed based on which anchor is clicked and have the UI updated then do this:


html anchor
        onClick:
            (html jQuery ajax
                serializeForm: (html jQuery id: 'myForm');
                onSuccess:
                        ((html jQuery id: 'myForm') load
                                html: [ :h |
                                    self selectedCallback.
                                    self renderForm: h ])).
        with: 'Selected'.

Which serializes the form data, then replaces the form after performing the #selectedCallback


>
>
> That should serialize the form and the data in the inputs to the server. In the javascript debugger do you see a 'GET' after clicking the link that has the form data?
>
>
> Yes, I do see a GET.
>
> Maybe you need a
>
> html hiddenInput callback:[self processSubmittedFormData].
>
> at the end of the form.
>
>
> mmm I don't get it. Sorry, I am still a bit newbie here.
>


So if all of the callbacks in your example do the same thing then take the callbacks off the anchors and at the end of the form insert a #hiddenInput. Attach a callback to that #hiddenInput which will process all the data. Put it at the end of the form so all of the form's data will have been processed by seaside by the time its time to run the #hiddenInput's callback.


> What do you want to happen when the link is clicked?
>
>
> Quite simple in fact. I just want my callbacks to be invoked. See my original example:
>

I think the #hiddenIpnut or the JQuery monstrosity above should cover it but do you mean all of them anytime one a link is clicked or just the one nearest the link?


> html form: [
> html tbsButtonGroup: [
>         html tbsDropdownButton beDefault; beExtraSmall; with: [html text: 'Filter '; tbsCaret].
>         html tbsDropdownMenu
>             with: [
>                 html tbsDropdownMenuItem: [
>                     html anchor
>                         text: 'Selected';
>                         callback: [self halt. ]. ].
>                 html tbsDropdownMenuItem: [
>                     html anchor
>                         text: 'Unselected';
>                         callback: [self halt. ]. ].
>             ]
>     ]
>
> ]
>
> you see those halts? I simple want them to really be executed when I click on an item....
>
> thanks Paul.
>
>
>
>
>
> Thanks
>
> Paul
>
> On Oct 17, 2013, at 10:25 AM, Mariano Martinez Peck <[hidden email]> wrote:
>
> >
> >
> >
> > On Thu, Oct 17, 2013 at 1:39 PM, Paul DeBruicker <[hidden email]> wrote:
> > Hi Mariano,
> >
> >
> > Can you use the JQAjax>>serializeForm: ?
> >
> > e.g. for our anchor say:
> >
> > onClick: html jQuery ajax serializeForm:(html jQuery id:'myForm');
> >
> >
> >
> > Hi Paul, I have just tried that doing this:
> >
> > html tbsDropdownMenuItem: [
> > html anchor
> > onClick: (html jQuery ajax serializeForm: (html jQuery id: formID));
> > text: 'Selected';
> > callback: [self halt. ]. ].
> >
> >
> > And it doesn't work either. The html for such code is this:
> >
> > <li>
> >
> > <a onclick="jQuery.ajax({"url":"/dp","data":["_s=OpQD8YOfnkSWYrc_","_k=6_McsUmdszVXIFuG","21",jQuery("#id18").closest("form").find(":input").serialize()].join("&")})"> … </a>
> >
> > </li>
> >
> > and indeed, "#id18" is the correct id of the form.
> >
> > Ant other idea?
> >
> > Thanks in advance,
> >
> >
> >
> >
> >
> >
> >
> > On Oct 17, 2013, at 7:48 AM, Mariano Martinez Peck <[hidden email]> wrote:
> >
> > > Hi guys,
> > >
> > > In my application I have many many places in which I need to submit the surrounding form once an item has been selected from a list or things like that. For example, for a "html select", I am relying on #beSubmitOnChange (which is deprecated....).
> > >
> > > I am now using #tbsButtonGroup and #tbsDropdownMenu (they are inside a form with another html selects) and I want to achieve the same. I added a
> > >
> > > onClick: 'submit()';
> > >
> > > to the tbsDropdownMenu. The form seems to be submitted, but the callbacks of my anchors never get called:
> > >
> > > Reduced example:
> > >
> > > html form: [
> > > html tbsButtonGroup: [
> > > html tbsDropdownButton beDefault; beExtraSmall; with: [html text: 'Filter '; tbsCaret].
> > > html tbsDropdownMenu
> > > onClick: 'submit()';
> > > with: [
> > > html tbsDropdownMenuItem: [
> > > html anchor
> > > text: 'Selected';
> > > callback: [self halt. ]. ].
> > > html tbsDropdownMenuItem: [
> > > html anchor
> > > text: 'Unselected';
> > > callback: [self halt. ]. ].
> > > ]
> > > ]
> > >
> > > ]
> > >
> > > Any ideas?
> > >
> > > Thanks
> > >
> > > --
> > > Mariano
> > > http://marianopeck.wordpress.com
> > > _______________________________________________
> > > 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
> >
> >
> >
> > --
> > Mariano
> > http://marianopeck.wordpress.com
> > _______________________________________________
> > 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
>
>
>
> --
> Mariano
> http://marianopeck.wordpress.com
> _______________________________________________
> 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


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

Re: TwitterBootstrap dropdowns and submitting on change

Mariano Martinez Peck
In reply to this post by Paul DeBruicker



On Thu, Oct 17, 2013 at 6:23 PM, Paul DeBruicker <[hidden email]> wrote:

I think you're trying to find out about something by asking about something else, and in this instance its confusing.  What I suspect you are trying to do is:

1. user clicks dropdown menu item
2. form data is submitted to server
3. form callback is processed based on which menu item is clicked
4. UI is updated based on calculations and data


Ouch Paul.....you will kill me....I have wasted your time.. Sorry. I found out my stupid problem.
I added the form just as an immediate "give it a try" because my callbacks were not being executed. But no, I didn't have any data in there. 
Now, why my callbacks were no being called? because of the most stupid error. At least nobody saw it in the pasted code either hahaha.
I was defining the anchors as:

html anchor text: 'something'; callback: [ self halt  ].

just changing it to

html anchor  callback: [ self halt  ]; with: 'something';

make the callbacks work...

Again, sorry to waste your time and thanks for your help!

 

more below:

On Oct 17, 2013, at 11:40 AM, Mariano Martinez Peck <[hidden email]> wrote:

>
>
>
> On Thu, Oct 17, 2013 at 2:37 PM, Paul DeBruicker <[hidden email]> wrote:
> Hi Mariano,
>
> I don't understand what you mean when you say "And it doesn't work either"
>
>
> The callback is not called.

You can't have the anchor callbacks processed as part of the form submission process because anchors aren't form elements, but navigation elements.  They can trigger a form submission using javascript and thats about it when it comes to forms & anchors.

You can either attach those callbacks to #hiddenInputs next to each anchor or just use one hiddenInput at the bottom of the form (which is what I recommend if you want the same thing to happen no matter what link is clicked)

If you want a different callback to be processed based on which anchor is clicked and have the UI updated then do this:


html anchor
                onClick:
                        (html jQuery ajax
                                serializeForm: (html jQuery id: 'myForm');
                                onSuccess:
                                                ((html jQuery id: 'myForm') load
                                                                html: [ :h |
                                                                        self selectedCallback.
                                                                        self renderForm: h ])).
                with: 'Selected'.

Which serializes the form data, then replaces the form after performing the #selectedCallback


>
>
> That should serialize the form and the data in the inputs to the server.  In the javascript debugger do you see a 'GET' after clicking the link that has the form data?
>
>
> Yes, I do see a GET.
>
> Maybe you need a
>
> html hiddenInput callback:[self processSubmittedFormData].
>
> at the end of the form.
>
>
> mmm I don't get it. Sorry, I am still a bit newbie here.
>


So if all of the callbacks in your example do the same thing then take the callbacks off the anchors and at the end of the form insert a #hiddenInput.  Attach a callback to that #hiddenInput which will process all the data.  Put it at the end of the form so all of the form's data will have been processed by seaside by the time its time to run the #hiddenInput's callback.


> What do you want to happen when the link is clicked?
>
>
> Quite simple in fact. I just want my callbacks to be invoked. See my original example:
>

I think the #hiddenIpnut or the JQuery monstrosity above should cover it but do you mean all of them anytime one a link is clicked or just the one nearest the link?


> html form: [
> html tbsButtonGroup: [
>               html tbsDropdownButton beDefault;  beExtraSmall; with: [html text: 'Filter '; tbsCaret].
>               html tbsDropdownMenu
>                       with: [
>                               html tbsDropdownMenuItem: [
>                                       html anchor
>                                               text: 'Selected';
>                                               callback: [self halt. ]. ].
>                               html tbsDropdownMenuItem: [
>                                       html anchor
>                                               text: 'Unselected';
>                                               callback: [self halt. ]. ].
>                       ]
>       ]
>
> ]
>
> you see those halts? I simple want them to really be executed when I click on an item....
>
> thanks Paul.
>
>
>
>
>
> Thanks
>
> Paul
>
> On Oct 17, 2013, at 10:25 AM, Mariano Martinez Peck <[hidden email]> wrote:
>
> >
> >
> >
> > On Thu, Oct 17, 2013 at 1:39 PM, Paul DeBruicker <[hidden email]> wrote:
> > Hi Mariano,
> >
> >
> > Can you use the JQAjax>>serializeForm: ?
> >
> > e.g. for our anchor say:
> >
> > onClick: html jQuery ajax serializeForm:(html jQuery id:'myForm');
> >
> >
> >
> > Hi Paul, I have just tried that doing this:
> >
> > html tbsDropdownMenuItem: [
> >                                       html anchor
> >                                               onClick: (html jQuery ajax serializeForm: (html jQuery id: formID));
> >                                               text: 'Selected';
> >                                               callback: [self halt. ]. ].
> >
> >
> > And it doesn't work either. The html for such code is this:
> >
> > <li>
> >
> >     <a onclick="jQuery.ajax({"url":"/dp","data":["_s=OpQD8YOfnkSWYrc_","_k=6_McsUmdszVXIFuG","21",jQuery("#id18").closest("form").find(":input").serialize()].join("&")})"> … </a>
> >
> > </li>
> >
> > and indeed, "#id18" is the correct id of the form.
> >
> > Ant other idea?
> >
> > Thanks in advance,
> >
> >
> >
> >
> >
> >
> >
> > On Oct 17, 2013, at 7:48 AM, Mariano Martinez Peck <[hidden email]> wrote:
> >
> > > Hi guys,
> > >
> > > In my application I have many many places in which I need to submit the surrounding form once an item has been selected from a list or things like that. For example, for a "html select", I am relying on #beSubmitOnChange (which is deprecated....).
> > >
> > > I am now using #tbsButtonGroup and #tbsDropdownMenu (they are inside a form with another html selects) and I want to achieve the same. I added a
> > >
> > > onClick: 'submit()';
> > >
> > > to the tbsDropdownMenu. The form seems to be submitted, but the callbacks of my anchors never get called:
> > >
> > > Reduced example:
> > >
> > > html form: [
> > > html tbsButtonGroup: [
> > >               html tbsDropdownButton beDefault;  beExtraSmall; with: [html text: 'Filter '; tbsCaret].
> > >               html tbsDropdownMenu
> > >                       onClick: 'submit()';
> > >                       with: [
> > >                               html tbsDropdownMenuItem: [
> > >                                       html anchor
> > >                                               text: 'Selected';
> > >                                               callback: [self halt. ]. ].
> > >                               html tbsDropdownMenuItem: [
> > >                                       html anchor
> > >                                               text: 'Unselected';
> > >                                               callback: [self halt. ]. ].
> > >                       ]
> > >       ]
> > >
> > > ]
> > >
> > > Any ideas?
> > >
> > > Thanks
> > >
> > > --
> > > Mariano
> > > http://marianopeck.wordpress.com
> > > _______________________________________________
> > > 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
> >
> >
> >
> > --
> > Mariano
> > http://marianopeck.wordpress.com
> > _______________________________________________
> > 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
>
>
>
> --
> Mariano
> http://marianopeck.wordpress.com
> _______________________________________________
> 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



--
Mariano
http://marianopeck.wordpress.com

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