ajax onBlur callback with load html
Bob Nemec <[email protected]> Tue, 14 Sep 2021 12:42:47 +0000 (UTC)
| Newsgroups | gmane.comp.lang.smalltalk.squeak.seaside |
|---|---|
| Message-ID | <[email protected]> |
--===============7546832784518291312== Content-Type: multipart/alternative; boundary="----=_Part_4690740_706546886.1631623367419" ------=_Part_4690740_706546886.1631623367419 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: quoted-printable (sorry if this is duplicate; didn't see the first attempt in the email list= ) 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_4690740_706546886.1631623367419 Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: quoted-printable <html><head></head><body><div class=3D"ydp133db1d6yahoo-style-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-view-body" class= =3D"ydp1ecd7d12I_52qC ydp1ecd7d12D_FY ydp1ecd7d12W_6D6F" style=3D"width: 97= 2.781px;"><div class=3D"ydp1ecd7d12msg-body ydp1ecd7d12P_wpofO ydp1ecd7d12m= q_AS" data-test-id=3D"message-view-body-content"><div class=3D"ydp1ecd7d12j= b_0 ydp1ecd7d12X_6MGW ydp1ecd7d12N_6Fd5"><div id=3D"ydp1ecd7d12yiv922151368= 8"><div class=3D"ydp1ecd7d12yiv9221513688yahoo-style-wrap" style=3D"font-fa= mily: lucida console, sans-serif;"><div dir=3D"ltr"><div><div dir=3D"ltr" d= ata-setdir=3D"false">(sorry if this is duplicate; didn't see the first atte= mpt in the email list)</div><div dir=3D"ltr" data-setdir=3D"false"><br></di= v><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 refr= esh 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 button again.&= nbsp;</div><div><br></div><div>To get around this we=E2=80=99re selective a= bout which components we refresh, but it feels like there should be a bette= r way. </div><div><br></div><div>Here is a simple example (coded in VW= ), where #stringValue is an instVar. Entering a value and triggering the on= Blur will show the ' value: ' in the Transcript, but pressing the button wi= ll not show the ' button: ' string until the second press, since 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 works fine...<= /div><div><br></div><div>renderContentOn: html </div><div><span style= =3D"white-space: pre-wrap;">=09</span>html div id: 'testDiv'; with: [</div>= <div><span style=3D"white-space: pre-wrap;">=09=09</span>self renderContent= DivOn: html]</div><div><br></div><div>renderContentLoadDivOn: html</div><di= v><span style=3D"white-space: pre-wrap;">=09</span>^(html jQuery id: 'testD= iv') load html: [:renderer | </div><div><span style=3D"white-space: pr= e-wrap;">=09=09</span>self renderContentDivOn: renderer]</div><div><br></di= v><div>renderContentDivOn: html </div><div><span style=3D"white-space:= pre-wrap;">=09</span>html text: 'Test at ' , Time now displayString.</div>= <div><span style=3D"white-space: pre-wrap;">=09</span>html horizontalRule.&= nbsp;</div><div><span style=3D"white-space: pre-wrap;">=09</span>html textI= nput </div><div><span style=3D"white-space: pre-wrap;">=09=09</span>va= lue: self stringValue; </div><div><span style=3D"white-space: 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><s= pan style=3D"white-space: pre-wrap;">=09=09=09=09=09=09</span>self stringVa= lue: value.</div><div><span style=3D"white-space: pre-wrap;">=09=09=09=09= =09=09</span>Transcript cr; show: Time now printString , ' value: ' , value= asString]</div><div><span style=3D"white-space: pre-wrap;">=09=09=09=09</s= pan>value: (html jQuery this value) ) </div><div><span style=3D"white-= space: pre-wrap;">=09=09=09</span>onSuccess: (self renderContentLoadDivOn: = html) ).</div><div><span style=3D"white-space: pre-wrap;">=09</span>html br= eak; break. </div><div><span style=3D"white-space: pre-wrap;">=09</spa= n>html button </div><div><span style=3D"white-space: pre-wrap;">=09=09= </span>onClick: ( </div><div><span style=3D"white-space: pre-wrap;">= =09=09=09=09</span>(html jQuery ajax callback: [</div><div><span style=3D"w= hite-space: pre-wrap;">=09=09=09=09=09</span>Transcript cr; show: Time now = printString, ' button: ' , self stringValue asString])</div><div><span styl= e=3D"white-space: pre-wrap;">=09=09=09</span>onSuccess: (self renderContent= LoadDivOn: html) );</div><div><span style=3D"white-space: pre-wrap;">=09=09= </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></di= v></div></div><div class=3D"ydp1ecd7d12jb_0 ydp1ecd7d12X_6MGW ydp1ecd7d12N_= 6Fd5"></div></div><div class=3D"ydp1ecd7d12H_7jIs ydp1ecd7d12D_F ydp1ecd7d1= 2ab_C ydp1ecd7d12Q_69H5 ydp1ecd7d12E_36RhU" data-test-id=3D"toolbar-hover-a= rea"><div class=3D"ydp1ecd7d12D_F ydp1ecd7d12W_6D6F ydp1ecd7d12r_BN ydp1ecd= 7d12gl_C" data-test-id=3D"card-toolbar" style=3D"width: 1000.78px;"></div><= /div></div><br></div></div></body></html> ------=_Part_4690740_706546886.1631623367419-- --===============7546832784518291312== Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: base64 Content-Disposition: inline X19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX18Kc2Vhc2lkZSBt YWlsaW5nIGxpc3QKc2Vhc2lkZUBsaXN0cy5zcXVlYWtmb3VuZGF0aW9uLm9yZwpodHRwOi8vbGlz dHMuc3F1ZWFrZm91bmRhdGlvbi5vcmcvY2dpLWJpbi9tYWlsbWFuL2xpc3RpbmZvL3NlYXNpZGUK --===============7546832784518291312==--