Fork me on GitHub
#hoplon
<
2016-03-18
>
leontalbot01:03:50

Hello. I am testing a web form made with Hoplon. On IE 12, 11, 10, 9, when I submit form data and then hit refresh, some input fields are still filled (bad). But my form validation doesn't see them, so when I complete form the second time and try resubmit, it says fields are missing. I then need to manually remove text in field and type it again so it can work.

leontalbot01:03:52

my state cell where I gather form data looks like this :

(defc form-data 
  {:commentaires              nil
   :nom                       nil
   :courriel                  nil
   :code-postal               nil
   :age                       nil
   :abonnement-vpc            nil
   :source                    nil})

leontalbot01:03:51

Maybe I should reset state just after sending...?

micha01:03:47

how are you initializing the inputs?

leontalbot01:03:32

Not sure it answers but I have "lens" that resets part of the state cell when inputs change...

leontalbot01:03:28

(form-group 
  :valid? form-name-valid?
  (question "Nom")
  (input-control 
    :cell (path-cell form-data [:nom])))

leontalbot01:03:54

Maybe it doesn't answer your question @micha

micha01:03:43

that seems like it should initilize the form inputs with the values from the cells, no?

leontalbot01:03:34

yes, but on IE, when i send the form once then I reload page, it doesn't reset

leontalbot01:03:16

input fields are filled, but not seen by validator, weird!

micha01:03:33

and filled with values that are not in the cells

leontalbot01:03:04

the values were the one that I had filled before I sent the data the first time

leontalbot01:03:54

yes, I guess they are not anymore in the cell, but somehow in memory for IE??

micha01:03:06

that's strange, and annoying

leontalbot01:03:14

hahaha, yes!

micha01:03:33

i wonder if there is some way to give it hints, like some HTML5 annotation

micha01:03:02

usually i have something like this:

micha01:03:27

(input :value some-cell :keyup #(reset! some-cell @%))

micha01:03:52

so when the page loads it will initialize the input

leontalbot01:03:14

let me try this! it'll take some time, because I need to deploy first in order to test with IE

leontalbot01:03:15

@micha I was using :

(defelem cell-input [{:keys [cell] :as attrs}]
  (let [target-value #(do! (-> % .-currentTarget) :value)]
    (input (-> attrs
               (dissoc :cell)
               (assoc :type (:type attrs "text")
                      :style "border: 1px solid #dddddd; background-color: white;"
                      :input #(reset! cell (target-value %)))))))

leontalbot01:03:28

target-value

leontalbot01:03:38

I think this @% doesn't work in IE (ideref error) but I'll try this instead :

(defelem cell-input [{:keys [cell] :as attrs}]
  (input (-> attrs
             (dissoc :cell)
             (assoc :type (:type attrs "text")
                    :style "border: 1px solid #dddddd; background-color: white;"
                    :keyup (fn [e] (reset! cell (.val (js/jQuery (.-target e)))))))))

micha01:03:58

i don't see where you're binding :value to cell though

micha01:03:31

that is the part that forces the input to always have the value contained in the cell

leontalbot01:03:30

ahhhh, thanks!

leontalbot01:03:51

maybe that was the problem... let's see!

leontalbot02:03:32

@micha: I still have the problem 😞

leontalbot02:03:55

Can I hate IE?

leontalbot02:03:47

Can I force a reset of the fields globally?

leontalbot02:03:57

Just after sending data for instance?

micha02:03:43

IE is terrible

micha02:03:44

perhaps :autocomplete "no" or something might disable the behavior?

leontalbot02:03:09

Let's try that! I do not have a <form>tag as such, but I see we can use :autocomplete "off" for input too

leontalbot02:03:58

well, this doesn't seem to work either...

leontalbot02:03:31

@micha: would you have a last idea?

leontalbot02:03:26

just found this

leontalbot02:03:31

found a jQuery hack :

function clearForm()
{
    $(':input').not(':button, :submit, :reset, :hidden, :checkbox, :radio').val('');
    $(':checkbox, :radio').prop('checked', false);
}

leontalbot02:03:44

not sure this is usable in my hoplon form. Will try tomorrow

leontalbot02:03:59

thanks for your help today @micha !

thedavidmeister12:03:30

@micha: @flyboarder a cond-tpl or if-tpl would be awesome. I was really confused as to why the performance of the page was so bad long after it had destroyed/rebuilt the DOM for “navigation” but I guess there’s reasons for that if stuff is still kicking around invisibly in memory

dm313:03:55

I also have a problem of generating different DOM depending on the type of output

dm313:03:27

to which the nicest solution is returning a cell that creates the DOM in a multimethod