
<div dir="ltr"><div><span style="font-family:monospace,monospace">Summary:</span><br></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">When testing the new wrapper for the Pikaday datepicker, adding a *second* (apparently unrelated) <textbox> on the form makes the tag <body onload={...}> stop working - ie, the datepicker no longer appears in the Date field.<br></font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">(1) A test form with only *one* textbox compiles and runs - and the datepicker appears correctly - ie, the following code works:</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">  <a href="https://github.com/StefanScott/urweb-pikaday-test-foo/blob/master/thingDate.ur">https://github.com/StefanScott/urweb-pikaday-test-foo/blob/master/thingDate.ur</a></font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">  <body onload={PikadayControl.init date_nid}></font></div><div><font face="monospace, monospace">    <form></font></div><div><font face="monospace, monospace">      <textbox{#DateField} id={date_nid}/></font></div><div><font face="monospace, monospace">      <submit action={add_thing} value="Add !"/></font></div><div><font face="monospace, monospace">    </form></font></div><div><font face="monospace, monospace">  </body></font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">(2) A test form with a *second* (apparently unrelated) textbox also compiles and runs - but the datepicker no longer appears - ie, the following code runs but no datepicker appears on the Date field:</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">  <a href="https://github.com/StefanScott/urweb-pikaday-test/blob/master/thingDate.ur">https://github.com/StefanScott/urweb-pikaday-test/blob/master/thingDate.ur</a></font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">  <body onload={PikadayControl.init date_nid}></font></div><div><font face="monospace, monospace">    <form></font></div><div><font face="monospace, monospace">      <textbox{#NameField} /></font></div><div><font face="monospace, monospace">      <textbox{#DateField} id={date_nid}/></font></div><div><font face="monospace, monospace">      <submit action={add_thing} value="Add !"/></font></div><div><font face="monospace, monospace">    </form></font></div><div><font face="monospace, monospace">  </body></font></div><div><font face="monospace, monospace"><br></font></div><div><span style="font-family:monospace,monospace">In order to</span><span style="font-family:monospace,monospace"> make it easy to see this minimal change to the code, </span><font face="monospace, monospace">I have set up 2 GitHub repos:</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">- repo (1) "</font><span style="font-family:monospace,monospace">urweb-pikaday-test-foo";</span></div><div><span style="font-family:monospace,monospace"><br></span></div><div><span style="font-family:monospace,monospace">- repo (2) "</span><span style="font-family:monospace,monospace">urweb-pikaday-test" initally a clone of (1), then adding the tiny change to the code.</span></div><div><span style="font-family:monospace,monospace"><br></span></div><div><span style="font-family:monospace,monospace">The tiny change to the code is highlighted in the following commit to repo (2):</span></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">  <a href="https://github.com/StefanScott/urweb-pikaday-test/commit/f5142a31b04341a57a5e335a84390d86ef6b7aa9">https://github.com/StefanScott/urweb-pikaday-test/commit/f5142a31b04341a57a5e335a84390d86ef6b7aa9</a></font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">This is the *only* thing that was changed between repo (1) and repo (2). </font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">Why does the <body onload={...}> work in (1) - but not work in (2), after merely adding another (apparently unrelated) <textbox> ?</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">Details:</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">In order to provide a minimal test case to help isolate any errors, I am developing two almost-identical versions of an extremely simplified app which allows editing a table with two columns:</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">  table thing : { Nam : string , Date : time }</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">Version (1) - base case </font></div><div><font face="monospace, monospace">(`Nam` is *always* "foo" - this compiles and runs, and the datepicker appears):</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">  <a href="https://github.com/StefanScott/urweb-pikaday-test-foo">https://github.com/StefanScott/urweb-pikaday-test-foo</a></font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">This "base case" version of the app works correctly. For simplicity during testing, Version (1) does *not* include a <textbox> for the `Nam` column - it simply sets `Nam` to always be "foo" in the SQL INSERT. Version (1) behaves correctly, ie:</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">- it displays a form containing *one* field: a Date field (with a datepicker, which displays when clicking the Date field)</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">- when the user clicks the "Add!" button, the app INSERTs a record (with the Date entered by the user, and Nam always "foo")</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">Version (2) - slightly extended case</font></div><div><font face="monospace, monospace">(`Nam` is set by user via a <textbox> - this also compiles and runs, but *no* datepicker appears):</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">  <a href="https://github.com/StefanScott/urweb-pikaday-test">https://github.com/StefanScott/urweb-pikaday-test</a></font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">Version (2) is almost identical to version (1). Version (2) should:</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">- display a form containing *two* fields: a Nam field, and a Date field (a datepicker should appear - but actually, it doesn't!)</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">- when the user clicks the "Add!" button, the app INSERTs a record (with the Nam and Date entered by the user)</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">Version (2) doesn't behave correctly: it fails to display a datepicker on the Date field.</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">Remark:</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">Somehow, adding an additional <textbox> for the (second, unrelated) `Nam` column seems to prevent the Date field from displaying its datepicker.</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">Comparison of approaches:</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">(a) The current approach uses `<body onload={...}>` as implemented in Istvan Chung's Pull Request, which was merged into the GitHub repo below:</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">  <a href="https://github.com/StefanScott/urweb-pikaday">https://github.com/StefanScott/urweb-pikaday</a></font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">That approach worked in the above repo (which, like Version (1) here, involved only a *single* field on the form).</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">(b) Previously, Ziv Scully had suggested a different approach - involving <active code={...}> :</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">  <a href="http://www.impredicative.com/pipermail/ur/2015-August/002143.html">http://www.impredicative.com/pipermail/ur/2015-August/002143.html</a></font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">  <a href="http://www.impredicative.com/pipermail/ur/2015-August/002162.html">http://www.impredicative.com/pipermail/ur/2015-August/002162.html</a></font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">  <textbox{#DateField} id={date_nid}/></font></div><div><font face="monospace, monospace">  <active code={PikadayControl.init date_nid; return <xml/>}/></font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">I have tried doing (b) (putting the <active> tag in 3 different locations: just inside the <xml>, just inside the <body>, just inside the <form>) but it always gave a compile error about a conflict between a field `Form` and a field `DynForm` - so I used (a) instead.</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">(c) Ziv also stated:</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">  <a href="http://www.impredicative.com/pipermail/ur/2015-August/002162.html">http://www.impredicative.com/pipermail/ur/2015-August/002162.html</a></font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">> More generally, we have the question of how best to interface with mutation-heavy JS libraries. You can make this seem a bit more declarative by writing a wrapper function (see [activate] in Logitext), but maybe there are other approaches that are nicer in some ways (e.g. could the FFI be just a value of type [transaction xbody]?).</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">This approach sounds interesting, but I was unsure how to get started with it, so I haven't tried it yet.</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">Discussion:</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">(a) It seems strange that <body onload={...}> works when there is only *one* field in the form (ie, the Date field shows a datepicker), but stops working when a *second*, apparently unrelated field for `Nam` is added (ie, the Date field does not show a datepicker).</font></div><div><font face="monospace, monospace"><br></font></div><div><span style="font-family:monospace,monospace">(b) The JavaScript code which adds the datepicker to the Date field is fairly short, and can be seen here:</span><br></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">  <a href="https://github.com/StefanScott/urweb-pikaday-test/blob/master/pikadayControl.js">https://github.com/StefanScott/urweb-pikaday-test/blob/master/pikadayControl.js</a><br></font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace"><div>  function init ( nodeId ) {</div><div>    var picker = new Pikaday ( {</div><div>      field: document.getElementById(nodeId),</div><div>      firstDay: 1,</div><div>      format: 'YYYY-MM-DD',</div><div>      minDate: new Date('2000-01-01'),</div><div>      maxDate: new Date('2030-12-31'),</div><div>      yearRange: [2000,2030]</div><div>    } ) ;</div><div>  }</div><div><br></div><div>This behaves correctly when the Date field is the *only* field in the form. As far as I understand, it doesn't return anything - it merely adds a datepicker to the field identified by `nodeId`. Hence its JS FFI declaration has result type `transaction unit`:</div><div><br></div><div>  <a href="https://github.com/StefanScott/urweb-pikaday/blob/master/pikadayControl.urs">https://github.com/StefanScott/urweb-pikaday/blob/master/pikadayControl.urs</a><br></div><div><br></div><div>It might be interesting to explore various alternative ways of calling this code - perhaps not involving:</div><div><br></div><div>  <body onload={PikadayControl.init date_nid} /></div><div><br></div><div><div style="font-family:arial,sans-serif"><font face="monospace, monospace">(c) In the interest of "modularity", it might also be interesting if the code which adds the datepicker to the Date field were as "close" as possible to the Date field itself - ie, this code could perhaps not be located "far away" in a <body> tag, but perhaps could be located "closer" to where it gets used - say, in the <form> - or even somehow in or "next to" the <textbox> itself.</font></div><div style="font-family:arial,sans-serif"><font face="monospace, monospace"><br></font></div></div><div>---</div></font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">Thanks for any help!</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">###</font></div><div><font face="monospace, monospace"><br></font></div><div><br></div></div>