Jquery select then hide

Hi,

A classic problem I can't get through: Depending on a select answer I
want to hide or show a node in the DOM tree.

So far I try this with mixed result:


            (field := mold at: #civility) "a select tag"
                    onChange: [ :aHtml | aHtml jQuery ajax serialize:
aHtml jQuery this];
                    customize: [:selectTag | "just set the seside
callback to the select tag"
                        selectTag callback: [: val |
                            field input: val.
                            html jQuery ajax script: [ :s |
                                val == #miss
                                    ifTrue: [s << (s jQuery: #maiden) show]
                                    ifFalse: [s << (s jQuery: #maiden)
hide]]
                            ]
                        ].
   

The serialize part work (it took me some time to realize
jQuery>>serialize does not much, but JAjax>serialize runs the form callback)
The script part does not work. What I am mssing?


A question about load: is it about updating a node with refreshed html
rendering from the server?


Thanks

--
Dr. Geo - http://drgeo.eu
iStoa - http://istoa.drgeo.eu


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

This works for me:

renderXYZ02: html

    | s1 choiceMade |
   
    choiceMade := '?'.
    html form
        with: [
            html div
                id: 'maiden';
                style: 'display: none';
                with: [
                    html text: 'Enter maiden name'
                ].

            s1 := html jQuery ajax
                callback: [ :value |
                    choiceMade := value.
                ]
                value: (JSStream on: 'options[selectedIndex].text');
   
                script: [ :s |
                    choiceMade = 'miss'
                        ifTrue: [s << (s jQuery: #maiden) show]
                        ifFalse: [s << (s jQuery: #maiden) hide]
                ].

            html select
                list: #('mr' 'ms' 'miss');
                beOptional;
                onChange: s1;
                selected: nil.
        ].
 

Hi,

A classic problem I can't get through: Depending on a select answer I
want to hide or show a node in the DOM tree.

So far I try this with mixed result:


            (field := mold at: #civility) "a select tag"
                    onChange: [ :aHtml | aHtml jQuery ajax serialize:
aHtml jQuery this];
                    customize: [:selectTag | "just set the seside
callback to the select tag"
                        selectTag callback: [: val |
                            field input: val.
                            html jQuery ajax script: [ :s |
                                val == #miss
                                    ifTrue: [s << (s jQuery: #maiden) show]
                                    ifFalse: [s << (s jQuery: #maiden)
hide]]
                            ]
                        ].
   

The serialize part work (it took me some time to realize
jQuery>>serialize does not much, but JAjax>serialize runs the form callback)
The script part does not work. What I am mssing?


A question about load: is it about updating a node with refreshed html
rendering from the server?


Thanks

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

Thanks for your tips.

Based on your tips, I have to do it a bit differently as my select list
is built from symbols (#mister, #miss #misses) and Seaside in that case,
only store index number in the option list value attribute:

          <option value="1">Madame</option>
          <option value="2" selected="selected">Mademoiselle</option>
          <option value="3">Monsieur</option>


Therefore the (JSStream on: 'options[selectedIndex].text') sent to the
ajax callback these index number (1 2 or 3) and not my symbol.

However I discover the 'html jQuery ajax serialize:' does two things:
send the jqueried input field value to the server and fire its Seaside
callback, where my symbol are known.

(field := mold at: #civility)
    onChange: [ :aHtml |
        html jQuery ajax
            serialize: html jQuery this;
            script: [ :s |
                field input == #missis
                    ifTrue: [s << (s jQuery: #maiden) show]
                    ifFalse: [s << (s jQuery: #maiden) hide]]

Now it seems to work locally, but stuff is uncoupled and asynchrone:
do I have the risk the script is fired before the serialize is terminated?

Thanks

Hilaire

Le 27/04/2015 00:57, Bob Arning a écrit :
> This works for me:
>

--
Dr. Geo - http://drgeo.eu
iStoa - http://istoa.drgeo.eu


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

no. if you put halts in the places shown below

            s1 := html jQuery ajax
                serialize: html jQuery this;
   
                script: [ :s |
                    self halt.
                    choiceMade = 'miss'
                        ifTrue: [s << (s jQuery: #maiden) show]
                        ifFalse: [s << (s jQuery: #maiden) hide]
                ].

            html select
                list: #('mr' 'ms' 'miss');
                beOptional;
                onChange: s1;
                callback: [ :value |
                    self halt.
                    choiceMade := value.
                ];
                selected: nil.

you'll see that the callback: happens before the script: because WACallbackRegistry has sorted the callbacks by priority before running them.

do I have the risk the script is fired before the serialize is terminated?

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

Hi Hilaire,

I wonder: do you really need the value server-side?
If you just want to manipulate the DOM but not send any value server-side, I would do it like this:

(field := mold at: #civility)
   onChange: (html jQuery this value) equals: ‘missis’ asJavascript
                                then: (html jQuery: #maiden) show
                  then: (html jQuery: #maiden) hide)

This will avoid doing a server-side call and has the advantage of immediate updating on your webbrowser without the delay of a server round-trip.

Also, in this case, the generation of the javascript is small and readable, but for such ‘static’ javascript, it’s better to put them in a separate file and only call the necessary function from your Seaside code. For example:

(field := mold at: #civility)
   onChange: (html javascript call: ‘maidenToggle’ with: (html jQuery this))

cheers,
Johan

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

Le 28/04/2015 09:21, Johan Brichau a écrit :
>    onChange: (html jQuery this value) equals: ‘missis’ asJavascript
> then: (html jQuery: #maiden) show
>                   then: (html jQuery: #maiden) hide)

I understand the intend but not the syntax.
I can see #then:else: message but no #equals: jquery instance
But I am curious to learn how to

--
Dr. Geo - http://drgeo.eu
iStoa - http://istoa.drgeo.eu

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

You’re right. JSObject>>equals: is an extension that is not in the standard Seaside package.
I’ll add it, but in the meantime, here’s the implementation:

JSObject>>equals: anObject
        "Combine the receiver and anObject with a logical AND."
       
        self addDecoration: (JSBinary new operator: '=='; statement: anObject)

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

Ok.
This way of definining Javascript snippet code is very Smalltalkish :)

I am wondering what is the pros and cons compared to just pure
javascript code integrated in a page as we do it for css descriptions.
Easier to debug? To protoype? But slower?
Anyway both options are there so it is nice.

Hilaire

Le 01/05/2015 14:11, Johan Brichau a écrit :
> You’re right. JSObject>>equals: is an extension that is not in the standard Seaside package.
> I’ll add it, but in the meantime, here’s the implementation:
>
> JSObject>>equals: anObject
> "Combine the receiver and anObject with a logical AND."
>
> self addDecoration: (JSBinary new operator: '=='; statement: anObject)


--
Dr. Geo - http://drgeo.eu
iStoa - http://istoa.drgeo.eu


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

Generating pieces of Javascript code is only appropriate when they _need_ to be generated. For example, when you need to generate a Seaside-JQuery callback inside a javascript, only Seaside can generate the right url for the callback and injecting it into a piece of Javascript code is easily done with Seaside’s Javascript-generation logic.

html button
        bePush;
        onClick: (html jQuery ajax callback:[ self iWasClicked ]);
        with: ‘Click me!'

Seaside allows you to generate Javascript code, just like it allows you to generate html, but that should not tempt you to generate anything more than what needs to be generated. There is a conceptual difference between generating html (which is a declarative output) and Javascript code (which is procedural output), that makes it harder to understand. However, generating simple things around callbacks can be easy:

html button
        bePush;
        onClick: (html jQuery this) hide, (html jQuery ajax callback:[ self iWasClicked ]),(html jQuery this) show, html javascript return: false;
        with: ‘Click me!'

If you need pieces of javascript code that can be hand-written, then just write them down in a separate file and include it on the page.

updateRoot:
        super updateRoot: aRoot.
        aRoot javascript resourceUrl: ‘myapp.js’

If that is too much for what you want to do, there is always JSStream:

html button
        bePush;
        onClick: (JSStream on: ‘$(“#foobar”).html(“Someone clicked me”); return false;');
        with: ‘Click me!’

cheers
Johan

ps: The examples above are just to demonstrate code options, they do not show any useful interaction.

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