Re: ajax onBlur callback with load html
Paul DeBruicker <[email protected]> Tue, 14 Sep 2021 07:14:16 -0700
| Newsgroups | gmane.comp.lang.smalltalk.squeak.seaside |
|---|---|
| Message-ID | <[email protected]> |
--===============3161294237723332711== Content-Type: multipart/alternative; boundary=Apple-Mail-C9CD2573-15C6-460B-B6E0-DA2F0C905741 Content-Transfer-Encoding: 7bit --Apple-Mail-C9CD2573-15C6-460B-B6E0-DA2F0C905741 Content-Type: text/plain; charset=utf-8 Content-Transfer-Encoding: quoted-printable Forum.world.st no longer updates from the mailing lists. The nabble platform= it's built on stopped supporting mailing lists.=20 So now the only updated archives are at=20 http://lists.squeakfoundation.org/pipermail/seaside/ > On Sep 14, 2021, at 5:42 AM, Bob Nemec <[email protected]> wrote: >=20 > =EF=BB=BF > (sorry if this is duplicate; didn't see the first attempt in the email lis= t) >=20 > I have a design pattern question: what is the good way to deal with ajax c= allbacks when the component is refreshed by a previous component=E2=80=99s o= nBlur action, using jQuery load html: [=E2=80=A6]?=20 >=20 > We use onBlur to get the data from input fields and to refresh the state o= f the view. The problem comes up if a button is included in the refresh: the= ajax callback from that button is not handled (which makes sense due to the= jQuery load), so the user has to press the button again.=20 >=20 > To get around this we=E2=80=99re selective about which components we refre= sh, but it feels like there should be a better way.=20 >=20 > Here is a simple example (coded in VW), where #stringValue is an instVar. E= ntering a value and triggering the onBlur will show the ' value: ' in the Tr= anscript, but pressing the button will not show the ' button: ' string until= the second press, since the onBlur happens before the button callback and t= he onBlur is rendering the button again. If the button is rendered outside o= f the 'testDiv' it works fine... >=20 > renderContentOn: html=20 > html div id: 'testDiv'; with: [ > self renderContentDivOn: html] >=20 > renderContentLoadDivOn: html > ^(html jQuery id: 'testDiv') load html: [:renderer |=20 > self renderContentDivOn: renderer] >=20 > renderContentDivOn: html=20 > html text: 'Test at ' , Time now displayString. > html horizontalRule.=20 > html textInput=20 > value: self stringValue;=20 > onBlur: ( > (html jQuery ajax callback: [:value |=20 > self stringValue: value. > Transcript cr; show: Time n= ow printString , ' value: ' , value asString] > value: (html jQuery this value) )=20 > onSuccess: (self renderContentLoadDivOn: html) ). > html break; break.=20 > html button=20 > onClick: (=20 > (html jQuery ajax callback: [ > Transcript cr; show: Time now print= String, ' button: ' , self stringValue asString]) > onSuccess: (self renderContentLoadDivOn: html) ); > with: 'Press' >=20 > Thanks for any advice, > Bob Nemec > KORE / HTS >=20 > _______________________________________________ > seaside mailing list > [email protected] > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside --Apple-Mail-C9CD2573-15C6-460B-B6E0-DA2F0C905741 Content-Type: text/html; charset=utf-8 Content-Transfer-Encoding: quoted-printable <html><head><meta http-equiv=3D"content-type" content=3D"text/html; charset=3D= utf-8"></head><body dir=3D"auto"><div dir=3D"ltr">Forum.world.st no longer u= pdates from the mailing lists. The nabble platform it's built on stopped sup= porting mailing lists. </div><div dir=3D"ltr"><br></div><div dir=3D"ltr= ">So now the only updated archives are at </div><div dir=3D"ltr"><br></= div><div dir=3D"ltr"><a href=3D"http://lists.squeakfoundation.org/pipermail/= seaside/">http://lists.squeakfoundation.org/pipermail/seaside/</a></div><div= dir=3D"ltr"><br></div><div dir=3D"ltr"><br></div><div dir=3D"ltr"><br></div= ><div dir=3D"ltr"><br><blockquote type=3D"cite">On Sep 14, 2021, at 5:42 AM,= Bob Nemec <[email protected]> wrote:<br><br></blockquote></div><blockqu= ote type=3D"cite"><div dir=3D"ltr">=EF=BB=BF<div class=3D"ydp133db1d6yahoo-s= tyle-wrap" style=3D"font-family:lucida console, sans-serif;font-size:13px;">= <div dir=3D"ltr" data-setdir=3D"false"><div><div data-test-id=3D"message-vie= w-body" class=3D"ydp1ecd7d12I_52qC ydp1ecd7d12D_FY ydp1ecd7d12W_6D6F" style=3D= "width: 972.781px;"><div class=3D"ydp1ecd7d12msg-body ydp1ecd7d12P_wpofO ydp= 1ecd7d12mq_AS" data-test-id=3D"message-view-body-content"><div class=3D"ydp1= ecd7d12jb_0 ydp1ecd7d12X_6MGW ydp1ecd7d12N_6Fd5"><div id=3D"ydp1ecd7d12yiv92= 21513688"><div class=3D"ydp1ecd7d12yiv9221513688yahoo-style-wrap" style=3D"f= ont-family: lucida console, sans-serif;"><div dir=3D"ltr"><div><div dir=3D"l= tr" data-setdir=3D"false">(sorry if this is duplicate; didn't see the first a= ttempt in the email list)</div><div dir=3D"ltr" data-setdir=3D"false"><br></= div><div>I have a design pattern question: what is the good way to deal with= ajax callbacks when the component is refreshed by a previous component=E2=80= =99s onBlur action, using jQuery load html: [=E2=80=A6]? </div><div><br= ></div><div>We use onBlur to get the data from input fields and to refresh t= he state of the view. The problem comes up if a button is included in the re= fresh: the ajax callback from that button is not handled (which makes sense d= ue to the jQuery load), so the user has to press the button again. </di= v><div><br></div><div>To get around this we=E2=80=99re selective about which= components we refresh, but it feels like there should be a better way. = ;</div><div><br></div><div>Here is a simple example (coded in VW), where #st= ringValue is an instVar. Entering a value and triggering the onBlur will sho= w the ' value: ' in the Transcript, but pressing the button will not show th= e ' button: ' string until the second press, since the onBlur happens before= the button callback and the onBlur is rendering the button again. If the bu= tton is rendered outside of the 'testDiv' it works fine...</div><div><br></d= iv><div>renderContentOn: html </div><div><span style=3D"white-space: pr= e-wrap;"> </span>html div id: 'testDiv'; with: [</div><div><span styl= e=3D"white-space: pre-wrap;"> </span>self renderContentDivOn: htm= l]</div><div><br></div><div>renderContentLoadDivOn: html</div><div><span sty= le=3D"white-space: pre-wrap;"> </span>^(html jQuery id: 'testDiv') load ht= ml: [:renderer | </div><div><span style=3D"white-space: pre-wrap;">= </span>self renderContentDivOn: renderer]</div><div><br></div><div>= renderContentDivOn: html </div><div><span style=3D"white-space: pre-wra= p;"> </span>html text: 'Test at ' , Time now displayString.</div><div><s= pan style=3D"white-space: pre-wrap;"> </span>html horizontalRule. </= div><div><span style=3D"white-space: pre-wrap;"> </span>html textInp= ut </div><div><span style=3D"white-space: pre-wrap;"> </s= pan>value: self stringValue; </div><div><span style=3D"white-space: pre= -wrap;"> </span>onBlur: (</div><div><span style=3D"white-spa= ce: pre-wrap;"> </span>(html jQuery ajax callback: [= :value | </div><div><span style=3D"white-space: pre-wrap;"> = </span>self stringValue: value.</div><div><= span style=3D"white-space: pre-wrap;"> = </span>Transcript cr; show: Time now printString , ' value: ' , value asStr= ing]</div><div><span style=3D"white-space: pre-wrap;"> = </span>value: (html jQuery this value) ) </div><div><span style=3D"whi= te-space: pre-wrap;"> </span>onSuccess: (self renderConte= ntLoadDivOn: html) ).</div><div><span style=3D"white-space: pre-wrap;"> </s= pan>html break; break. </div><div><span style=3D"white-space: pre-wrap;= "> </span>html button </div><div><span style=3D"white-space: pre-= wrap;"> </span>onClick: ( </div><div><span style=3D"white-spac= e: pre-wrap;"> </span>(html jQuery ajax callback: [= </div><div><span style=3D"white-space: pre-wrap;"> = </span>Transcript cr; show: Time now printString, ' button: ' , sel= f stringValue asString])</div><div><span style=3D"white-space: pre-wrap;">= </span>onSuccess: (self renderContentLoadDivOn: html) );</d= iv><div><span style=3D"white-space: pre-wrap;"> </span>with: 'Press= '</div><div><br></div></div>Thanks for any advice,</div><div dir=3D"ltr">Bob= Nemec</div><div dir=3D"ltr">KORE / HTS</div></div></div></div></div><div cl= ass=3D"ydp1ecd7d12jb_0 ydp1ecd7d12X_6MGW ydp1ecd7d12N_6Fd5"></div></div><div= class=3D"ydp1ecd7d12H_7jIs ydp1ecd7d12D_F ydp1ecd7d12ab_C ydp1ecd7d12Q_69H5= ydp1ecd7d12E_36RhU" data-test-id=3D"toolbar-hover-area"><div class=3D"ydp1e= cd7d12D_F ydp1ecd7d12W_6D6F ydp1ecd7d12r_BN ydp1ecd7d12gl_C" data-test-id=3D= "card-toolbar" style=3D"width: 1000.78px;"></div></div></div><br></div></div= ><span>_______________________________________________</span><br><span>seasi= de mailing list</span><br><span>[email protected]</span><br= ><span>http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</s= pan><br></div></blockquote></body></html>= --Apple-Mail-C9CD2573-15C6-460B-B6E0-DA2F0C905741-- --===============3161294237723332711== Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: base64 Content-Disposition: inline X19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX18Kc2Vhc2lkZSBt YWlsaW5nIGxpc3QKc2Vhc2lkZUBsaXN0cy5zcXVlYWtmb3VuZGF0aW9uLm9yZwpodHRwOi8vbGlz dHMuc3F1ZWFrZm91bmRhdGlvbi5vcmcvY2dpLWJpbi9tYWlsbWFuL2xpc3RpbmZvL3NlYXNpZGUK --===============3161294237723332711==--