Update a component after a Jquery

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

Update a component after a Jquery

HilaireFernandes
Hi,

The datepicker event below updates the model and it implies an important
change in the component content (TableReport, etc). I think I kind of
need to refresh the page on the client.
Is it possible to do so from a callback fired from a jquery?

Thanks

Hilaire

        html textInput
            value: '1/1/2015';
            callback: [ :value | self addMonth: value asDate asMonth];
            script: (html jQuery new datepicker onSelect: html jQuery
ajax serializeThis).

--
Dr. Geo
http://drgeo.eu
http://google.com/+DrgeoEu


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

Re: Update a component after a Jquery

Paul DeBruicker
mail client coding but something like this should work:


(html jQuery new datepicker onSelect: (html jQuery
ajax serializeThis;onSuccess:((html jQuery id: 'myTableContainerId') load html: [:h | h render: myTable])).




HilaireFernandes wrote
Hi,

The datepicker event below updates the model and it implies an important
change in the component content (TableReport, etc). I think I kind of
need to refresh the page on the client.
Is it possible to do so from a callback fired from a jquery?

Thanks

Hilaire

        html textInput
            value: '1/1/2015';
            callback: [ :value | self addMonth: value asDate asMonth];
            script: (html jQuery new datepicker onSelect: html jQuery
ajax serializeThis).

--
Dr. Geo
http://drgeo.eu
http://google.com/+DrgeoEu


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

Re: Update a component after a Jquery

Mariano Martinez Peck


On Thu, May 28, 2015 at 10:40 PM, Paul DeBruicker <[hidden email]> wrote:
mail client coding but something like this should work:


(html jQuery new datepicker onSelect: (html jQuery
ajax serializeThis;onSuccess:((html jQuery id: 'myTableContainerId') load
html:
[:h | h render: myTable])).



Paul: Is there a difference between doing a "load html:" and "replaceWith:" ? In other words, doing:

(html jQuery new datepicker onSelect: (html jQuery
ajax serializeThis;onSuccess:((html jQuery id: 'myTableContainerId') replaceWith: [:h | h render: myTable]

Thanks,


 



HilaireFernandes wrote
> Hi,
>
> The datepicker event below updates the model and it implies an important
> change in the component content (TableReport, etc). I think I kind of
> need to refresh the page on the client.
> Is it possible to do so from a callback fired from a jquery?
>
> Thanks
>
> Hilaire
>
>         html textInput
>             value: '1/1/2015';
>             callback: [ :value | self addMonth: value asDate asMonth];
>             script: (html jQuery new datepicker onSelect: html jQuery
> ajax serializeThis).
>
> --
> Dr. Geo
> http://drgeo.eu
> http://google.com/+DrgeoEu
>
>
> _______________________________________________
> seaside mailing list

> seaside@.squeakfoundation

> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside





--
View this message in context: http://forum.world.st/Update-a-component-after-a-Jquery-tp4829158p4829219.html
Sent from the Seaside General mailing list archive at Nabble.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: Update a component after a Jquery

jtuchel
Mariano,

load html: replaces the contents of a DOM node, so you need a render method that only renders the children of a node or you will end up with, say a DIV with itself as its frst child after load html:

replaceWith: replaces the element itself. So you can use the normal rendering method to really replace the DOM node with what you render in the block.

Note: I keep failing in my use of replaceWith: for whatever reason.

Joachim


Am 29.05.15 um 04:03 schrieb Mariano Martinez Peck:


On Thu, May 28, 2015 at 10:40 PM, Paul DeBruicker <[hidden email]> wrote:
mail client coding but something like this should work:


(html jQuery new datepicker onSelect: (html jQuery
ajax serializeThis;onSuccess:((html jQuery id: 'myTableContainerId') load
html:
[:h | h render: myTable])).



Paul: Is there a difference between doing a "load html:" and "replaceWith:" ? In other words, doing:

(html jQuery new datepicker onSelect: (html jQuery
ajax serializeThis;onSuccess:((html jQuery id: 'myTableContainerId') replaceWith: [:h | h render: myTable]

Thanks,


 



HilaireFernandes wrote
> Hi,
>
> The datepicker event below updates the model and it implies an important
> change in the component content (TableReport, etc). I think I kind of
> need to refresh the page on the client.
> Is it possible to do so from a callback fired from a jquery?
>
> Thanks
>
> Hilaire
>
>         html textInput
>             value: '1/1/2015';
>             callback: [ :value | self addMonth: value asDate asMonth];
>             script: (html jQuery new datepicker onSelect: html jQuery
> ajax serializeThis).
>
> --
> Dr. Geo
> http://drgeo.eu
> http://google.com/+DrgeoEu
>
>
> _______________________________________________
> seaside mailing list

> [hidden email]

> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside





--
View this message in context: http://forum.world.st/Update-a-component-after-a-Jquery-tp4829158p4829219.html
Sent from the Seaside General mailing list archive at Nabble.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


-- 
-----------------------------------------------------------------------
Objektfabrik Joachim Tuchel          [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
Reply | Threaded
Open this post in threaded view
|

Re: Update a component after a Jquery

Paul DeBruicker
In reply to this post by Mariano Martinez Peck
Hi Mariano,

In addition to what Joachim said:

If you use #replaceWith: the html content must be known when the original script is created, and therefore cannot reflect changes from the datepicker's callback.  With  the 'load html:' the client sends an ajax request for new html content (which could have changed because of the datepicker's content), so you get up to date info in your DOM.



Mariano Martinez Peck wrote
On Thu, May 28, 2015 at 10:40 PM, Paul DeBruicker <[hidden email]>
wrote:

> mail client coding but something like this should work:
>
>
> (html jQuery new datepicker onSelect: (html jQuery
> ajax serializeThis;onSuccess:((html jQuery id: 'myTableContainerId')
> *load html:* [:h | h render: myTable])).
>
>
>
Paul: Is there a difference between doing a "load html:" and "replaceWith:"
? In other words, doing:

(html jQuery new datepicker onSelect: (html jQuery
ajax serializeThis;onSuccess:((html jQuery id: 'myTableContainerId')
*replaceWith:* [:h | h render: myTable]

Thanks,




>
>
>
> HilaireFernandes wrote
> > Hi,
> >
> > The datepicker event below updates the model and it implies an important
> > change in the component content (TableReport, etc). I think I kind of
> > need to refresh the page on the client.
> > Is it possible to do so from a callback fired from a jquery?
> >
> > Thanks
> >
> > Hilaire
> >
> >         html textInput
> >             value: '1/1/2015';
> >             callback: [ :value | self addMonth: value asDate asMonth];
> >             script: (html jQuery new datepicker onSelect: html jQuery
> > ajax serializeThis).
> >
> > --
> > Dr. Geo
> > http://drgeo.eu
> > http://google.com/+DrgeoEu
> >
> >
> > _______________________________________________
> > seaside mailing list
>
> > seaside@.squeakfoundation
>
> > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
>
>
>
>
> --
> View this message in context:
> http://forum.world.st/Update-a-component-after-a-Jquery-tp4829158p4829219.html
> Sent from the Seaside General mailing list archive at Nabble.com.
> _______________________________________________
> 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: Update a component after a Jquery

jtuchel
So I'm glad I answered - learned why I was having troubles.

Thanks, Paul

Am 29.05.15 um 07:11 schrieb Paul DeBruicker:

> Hi Mariano,
>
> In addition to what Joachim said:
>
> If you use #replaceWith: the html content must be known when the original
> script is created, and therefore cannot reflect changes from the
> datepicker's callback.  With  the 'load html:' the client sends an ajax
> request for new html content (which could have changed because of the
> datepicker's content), so you get up to date info in your DOM.
>
>
>
>
> Mariano Martinez Peck wrote
>> On Thu, May 28, 2015 at 10:40 PM, Paul DeBruicker &lt;
>> pdebruic@
>> &gt;
>> wrote:
>>
>>> mail client coding but something like this should work:
>>>
>>>
>>> (html jQuery new datepicker onSelect: (html jQuery
>>> ajax serializeThis;onSuccess:((html jQuery id: 'myTableContainerId')
>>> *load html:* [:h | h render: myTable])).
>>>
>>>
>>>
>> Paul: Is there a difference between doing a "load html:" and
>> "replaceWith:"
>> ? In other words, doing:
>>
>> (html jQuery new datepicker onSelect: (html jQuery
>> ajax serializeThis;onSuccess:((html jQuery id: 'myTableContainerId')
>> *replaceWith:* [:h | h render: myTable]
>>
>> Thanks,
>>
>>
>>
>>
>>>
>>>
>>> HilaireFernandes wrote
>>>> Hi,
>>>>
>>>> The datepicker event below updates the model and it implies an
>>> important
>>>> change in the component content (TableReport, etc). I think I kind of
>>>> need to refresh the page on the client.
>>>> Is it possible to do so from a callback fired from a jquery?
>>>>
>>>> Thanks
>>>>
>>>> Hilaire
>>>>
>>>>          html textInput
>>>>              value: '1/1/2015';
>>>>              callback: [ :value | self addMonth: value asDate asMonth];
>>>>              script: (html jQuery new datepicker onSelect: html jQuery
>>>> ajax serializeThis).
>>>>
>>>> --
>>>> Dr. Geo
>>>> http://drgeo.eu
>>>> http://google.com/+DrgeoEu
>>>>
>>>>
>>>> _______________________________________________
>>>> seaside mailing list
>>>> seaside@.squeakfoundation
>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>
>>>
>>>
>>>
>>> --
>>> View this message in context:
>>> http://forum.world.st/Update-a-component-after-a-Jquery-tp4829158p4829219.html
>>> Sent from the Seaside General mailing list archive at Nabble.com.
>>> _______________________________________________
>>> seaside mailing list
>>>
>> seaside@.squeakfoundation
>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>
>>
>>
>> --
>> Mariano
>> http://marianopeck.wordpress.com
>>
>> _______________________________________________
>> seaside mailing list
>> seaside@.squeakfoundation
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
>
>
>
> --
> View this message in context: http://forum.world.st/Update-a-component-after-a-Jquery-tp4829158p4829230.html
> Sent from the Seaside General mailing list archive at Nabble.com.
> _______________________________________________
> 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
Reply | Threaded
Open this post in threaded view
|

Re: Update a component after a Jquery

Mariano Martinez Peck
Thank you both for the explanation. Today I learned something myself too. 

On Fri, May 29, 2015 at 2:42 AM, [hidden email] <[hidden email]> wrote:
So I'm glad I answered - learned why I was having troubles.

Thanks, Paul

Am 29.05.15 um 07:11 schrieb Paul DeBruicker:

Hi Mariano,

In addition to what Joachim said:

If you use #replaceWith: the html content must be known when the original
script is created, and therefore cannot reflect changes from the
datepicker's callback.  With  the 'load html:' the client sends an ajax
request for new html content (which could have changed because of the
datepicker's content), so you get up to date info in your DOM.




Mariano Martinez Peck wrote
On Thu, May 28, 2015 at 10:40 PM, Paul DeBruicker &lt;
pdebruic@
&gt;
wrote:

mail client coding but something like this should work:


(html jQuery new datepicker onSelect: (html jQuery
ajax serializeThis;onSuccess:((html jQuery id: 'myTableContainerId')
*load html:* [:h | h render: myTable])).



Paul: Is there a difference between doing a "load html:" and
"replaceWith:"
? In other words, doing:

(html jQuery new datepicker onSelect: (html jQuery
ajax serializeThis;onSuccess:((html jQuery id: 'myTableContainerId')
*replaceWith:* [:h | h render: myTable]

Thanks,






HilaireFernandes wrote
Hi,

The datepicker event below updates the model and it implies an
important
change in the component content (TableReport, etc). I think I kind of
need to refresh the page on the client.
Is it possible to do so from a callback fired from a jquery?

Thanks

Hilaire

         html textInput
             value: '1/1/2015';
             callback: [ :value | self addMonth: value asDate asMonth];
             script: (html jQuery new datepicker onSelect: html jQuery
ajax serializeThis).

--
Dr. Geo
http://drgeo.eu
http://google.com/+DrgeoEu


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




--
View this message in context:
http://forum.world.st/Update-a-component-after-a-Jquery-tp4829158p4829219.html
Sent from the Seaside General mailing list archive at Nabble.com.
_______________________________________________
seaside mailing list

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



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

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




--
View this message in context: http://forum.world.st/Update-a-component-after-a-Jquery-tp4829158p4829230.html
Sent from the Seaside General mailing list archive at Nabble.com.
_______________________________________________
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
Reply | Threaded
Open this post in threaded view
|

Re: Update a component after a Jquery

HilaireFernandes
In reply to this post by Paul DeBruicker
Le 29/05/2015 03:40, Paul DeBruicker a écrit :
> mail client coding but something like this should work:
>
>
> (html jQuery new datepicker onSelect: (html jQuery
> ajax serializeThis;onSuccess:((html jQuery id: 'myTableContainerId') load
> html: [:h | h render: myTable])).
>

Thanks. I am not sure I can apply it.

The change in the model results in a new div element, containing a table
populated with content. Moreover depending on the imputed date, the div
element position may vary in the DOM tree. I think a whole refresh,
server side, may be simpler.

Hilaire

--
Dr. Geo
http://drgeo.eu
http://google.com/+DrgeoEu

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

Re: Update a component after a Jquery

Johan Brichau-2
To trigger a full page refresh from a script:

html javascript refresh

So, if you want to do a full page request when selecting a date in the date picker:

html textInput
           value: '1/1/2015';
           callback: [ :value | self addMonth: value asDate asMonth];
           script: (html jQuery new datepicker onSelect: html jQuery
ajax serializeThis; onComplete: (html javascript refresh)).

cheers
johan

> On 29 May 2015, at 22:11, Hilaire <[hidden email]> wrote:
>
> Le 29/05/2015 03:40, Paul DeBruicker a écrit :
>> mail client coding but something like this should work:
>>
>>
>> (html jQuery new datepicker onSelect: (html jQuery
>> ajax serializeThis;onSuccess:((html jQuery id: 'myTableContainerId') load
>> html: [:h | h render: myTable])).
>>
>
> Thanks. I am not sure I can apply it.
>
> The change in the model results in a new div element, containing a table
> populated with content. Moreover depending on the imputed date, the div
> element position may vary in the DOM tree. I think a whole refresh,
> server side, may be simpler.
>
> Hilaire
>
> --
> Dr. Geo
> http://drgeo.eu
> http://google.com/+DrgeoEu
>
> _______________________________________________
> 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: Update a component after a Jquery

Paul DeBruicker
In reply to this post by HilaireFernandes
Hi Hilaire,

I'm sure you can do what you want without a full page refresh.  Below is an example.  You choose one of 5 divs to update and  the response and then update two spots on the page at once.  


renderContentOn: html
        html select
                list: #('a' 'b' 'c' 'd' 'e');
                onChange:
                                (html jQuery ajax
                                                serializeThis;
                                                onComplete:
                                                                ((html jQuery id: 'selected') load
                                                                                html: [ :h |
                                                                                        h render: 'Last picked ' , chosenDiv greaseString.
                                                                                        h script: ((h jQuery id: chosenDiv) html: [ :r | r span: DateAndTime now ]) ]));
                selected: chosenDiv;
                callback: [ :val | chosenDiv := val ].
        html span
                id: 'selected';
                with: 'Last picked ' , chosenDiv greaseString.
        #('a' 'b' 'c' 'd' 'e')
                do: [ :ea |
                        html div
                                id: ea;
                                with: 'not chosen yet' ]



You can use the #onSelect: of the datepicker to trigger the change like I've used the #onChange: of the select above.


Hope this helps.


Paul


HilaireFernandes wrote
Le 29/05/2015 03:40, Paul DeBruicker a écrit :
> mail client coding but something like this should work:
>
>
> (html jQuery new datepicker onSelect: (html jQuery
> ajax serializeThis;onSuccess:((html jQuery id: 'myTableContainerId') load
> html: [:h | h render: myTable])).
>

Thanks. I am not sure I can apply it.

The change in the model results in a new div element, containing a table
populated with content. Moreover depending on the imputed date, the div
element position may vary in the DOM tree. I think a whole refresh,
server side, may be simpler.

Hilaire

--
Dr. Geo
http://drgeo.eu
http://google.com/+DrgeoEu

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