TwitterBootstrap dropdowns and submitting on change
Locked
TwitterBootstrap dropdowns and submitting on change
 
|
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 |
Re: TwitterBootstrap dropdowns and submitting on change
|
|
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 |
Re: TwitterBootstrap dropdowns and submitting on change
|
|
On Thu, Oct 17, 2013 at 1:39 PM, Paul DeBruicker <[hidden email]> wrote: Hi Mariano, 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,
Mariano http://marianopeck.wordpress.com _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: TwitterBootstrap dropdowns and submitting on change
|
|
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 |
Re: TwitterBootstrap dropdowns and submitting on change
|
|
On Thu, Oct 17, 2013 at 2:37 PM, Paul DeBruicker <[hidden email]> wrote: Hi Mariano, The callback is not called.
Yes, I do see a GET. Maybe you need a 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.
Mariano http://marianopeck.wordpress.com _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: TwitterBootstrap dropdowns and submitting on change
|
|
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:
_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
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. _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: TwitterBootstrap dropdowns and submitting on change
|
|
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 |
|
|
Sorry, I thought I was...my bad start your own thread? _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
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 |
Re: TwitterBootstrap dropdowns and submitting on change
|
|
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 |
Re: TwitterBootstrap dropdowns and submitting on change
|
|
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 |
|
|
In reply to this post by Paul DeBruicker
Thanks! it works. I had seen the example in Terse Guide To Squeak
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:
---- On Thu, 17 Oct 2013 14:23:34 -0700 Paul DeBruicker<[hidden email]> wrote ----
_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: TwitterBootstrap dropdowns and submitting on change
|
|
In reply to this post by Paul DeBruicker
On Thu, Oct 17, 2013 at 6:23 PM, Paul DeBruicker <[hidden email]> wrote:
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!
Mariano http://marianopeck.wordpress.com _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
«
Return to Seaside General
|
1 view|%1 views
| Free forum by Nabble | Edit this page |