ajax onBlur callback with load html: [...]
Bob Nemec <[email protected]> Mon, 13 Sep 2021 19:29:21 +0000 (UTC)
| Newsgroups | gmane.comp.lang.smalltalk.squeak.seaside |
|---|---|
| Message-ID | <[email protected]> |
--===============7959860651624383102== Content-Type: multipart/alternative; boundary="----=_Part_4484801_2077932647.1631561361995" ------=_Part_4484801_2077932647.1631561361995 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: quoted-printable I have a design pattern question: what is the good way to deal with ajax ca= llbacks when the component is refreshed by a previous component=E2=80=99s o= nBlur action, using jQuery load html: [=E2=80=A6]?=C2=A0 We use onBlur to get the data from input fields and to refresh the state of= 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 th= e jQuery load), so the user has to press the button again.=C2=A0 To get around this we=E2=80=99re selective about which components we refres= h, but it feels like there should be a better way.=C2=A0 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 T= ranscript, but pressing the button will not show the ' button: ' string unt= il the second press, since the onBlur happens before the button callback an= d the onBlur is rendering the button again. If the button is rendered outsi= de of the 'testDiv' it works fine... renderContentOn: html=C2=A0 html div id: 'testDiv'; with: [ self renderCont= entDivOn: html] renderContentLoadDivOn: html ^(html jQuery id: 'testDiv') load html: [:rend= erer |=C2=A0 self renderContentDivOn: renderer] renderContentDivOn: html=C2=A0 html text: 'Test at ' , Time now displayStri= ng. html horizontalRule.=C2=A0 html textInput=C2=A0 value: self stringValue= ;=C2=A0 onBlur: ( (html jQuery ajax callback: [:value |=C2=A0 self stringVa= lue: value. Transcript cr; show: Time now printString , ' value: ' , value = asString] value: (html jQuery this value) )=C2=A0 onSuccess: (self renderCo= ntentLoadDivOn: html) ). html break; break.=C2=A0 html button=C2=A0 onClick= : (=C2=A0 (html jQuery ajax callback: [ Transcript cr; show: Time now print= String, ' button: ' , self stringValue asString]) onSuccess: (self renderCo= ntentLoadDivOn: html) ); with: 'Press' Thanks for any advice,Bob NemecKORE / HTS ------=_Part_4484801_2077932647.1631561361995 Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: quoted-printable <html><head></head><body><div class=3D"yahoo-style-wrap" style=3D"font-fami= ly:lucida console, sans-serif;font-size:13px;"><div dir=3D"ltr" data-setdir= =3D"false"><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]?&nbs= p;</div><div><br></div><div>We use onBlur to get the data from input fields= and to refresh the state of 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 bu= tton again. </div><div><br></div><div>To get around this we=E2=80=99re= selective about which components we refresh, but it feels like there shoul= d be a better way. </div><div><br></div><div>Here is a simple example = (coded in VW), where #stringValue is an instVar. Entering a value and trigg= ering the onBlur will show the ' value: ' in the Transcript, but pressing t= he button will not show the ' button: ' string until the second press, sinc= e the onBlur happens before the button callback and the onBlur is rendering= the button again. If the button is rendered outside of the 'testDiv' it wo= rks fine...</div><div><br></div><div>renderContentOn: html </div><div>= <span style=3D"white-space: pre-wrap;">=09</span>html div id: 'testDiv'; wi= th: [</div><div><span style=3D"white-space: pre-wrap;">=09=09</span>self re= nderContentDivOn: html]</div><div><br></div><div>renderContentLoadDivOn: ht= ml</div><div><span style=3D"white-space: pre-wrap;">=09</span>^(html jQuery= id: 'testDiv') load html: [:renderer | </div><div><span style=3D"whit= e-space: pre-wrap;">=09=09</span>self renderContentDivOn: renderer]</div><d= iv><br></div><div>renderContentDivOn: html </div><div><span style=3D"w= hite-space: pre-wrap;">=09</span>html text: 'Test at ' , Time now displaySt= ring.</div><div><span style=3D"white-space: pre-wrap;">=09</span>html horiz= ontalRule. </div><div><span style=3D"white-space: pre-wrap;">=09</span= >html textInput </div><div><span style=3D"white-space: pre-wrap;">=09= =09</span>value: self stringValue; </div><div><span style=3D"white-spa= ce: pre-wrap;">=09=09</span>onBlur: (</div><div><span style=3D"white-space:= pre-wrap;">=09=09=09=09</span>(html jQuery ajax callback: [:value | <= /div><div><span style=3D"white-space: pre-wrap;">=09=09=09=09=09=09</span>s= elf stringValue: value.</div><div><span style=3D"white-space: pre-wrap;">= =09=09=09=09=09=09</span>Transcript cr; show: Time now printString , ' valu= e: ' , value asString]</div><div><span style=3D"white-space: pre-wrap;">=09= =09=09=09</span>value: (html jQuery this value) ) </div><div><span sty= le=3D"white-space: pre-wrap;">=09=09=09</span>onSuccess: (self renderConten= tLoadDivOn: html) ).</div><div><span style=3D"white-space: pre-wrap;">=09</= span>html break; break. </div><div><span style=3D"white-space: pre-wra= p;">=09</span>html button </div><div><span style=3D"white-space: pre-w= rap;">=09=09</span>onClick: ( </div><div><span style=3D"white-space: p= re-wrap;">=09=09=09=09</span>(html jQuery ajax callback: [</div><div><span = style=3D"white-space: pre-wrap;">=09=09=09=09=09</span>Transcript cr; show:= Time now printString, ' button: ' , self stringValue asString])</div><div>= <span style=3D"white-space: pre-wrap;">=09=09=09</span>onSuccess: (self ren= derContentLoadDivOn: html) );</div><div><span style=3D"white-space: pre-wra= p;">=09=09</span>with: 'Press'</div><div><br></div></div>Thanks for any adv= ice,</div><div dir=3D"ltr" data-setdir=3D"false">Bob Nemec</div><div dir=3D= "ltr" data-setdir=3D"false">KORE / HTS</div></div></body></html> ------=_Part_4484801_2077932647.1631561361995-- --===============7959860651624383102== Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: base64 Content-Disposition: inline X19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX18Kc2Vhc2lkZSBt YWlsaW5nIGxpc3QKc2Vhc2lkZUBsaXN0cy5zcXVlYWtmb3VuZGF0aW9uLm9yZwpodHRwOi8vbGlz dHMuc3F1ZWFrZm91bmRhdGlvbi5vcmcvY2dpLWJpbi9tYWlsbWFuL2xpc3RpbmZvL3NlYXNpZGUK --===============7959860651624383102==--