Form liveview phx-change - Help

Phoenix Forum Questions / Help
,
1

I have a little doubt …
I have a form in “liveview”, which does not expect me to type in the form and automatically it already updates the field …
because of phx_change.
Is there any way that this upload will be done only after you finish typing?

template:

<%= form_for @changeset, "#", [phx_change: :myfunction], fn f -> %>
    <input type="text" name="paramsdomain" class="form-control">
    <span class="input-group-append">
      <button phx-click="myfunction">Check! </button>
<% end %>
2

Not yet using phx-change. “Debouncing” is coming soon, which will allow you to specify how long to wait before you have “finished typing”.

3

OK, things move fast. Debounce is already here. You will need v0.3.0 or better (current release is 0.3.1). See https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#module-rate-limiting-events-with-debounce-and-throttle for details. You can set phx-debounce=“blur” on an input field to defer updates until you move from that field, or phx-debounce="" (e.g. phx-debounce=“2000” for two second pause) before sending updates.

I’ve just plugged it into my project and tested it - works like it says on the tin. You will need to add it into the “opts” when constructing the inputs, eg:

  <%= label f, :title %>
  <%= text_input f, :title,  "phx-debounce": "2000" %>
  <%= error_tag f, :title %>
3 Likes
4

Unfortunately not working “phx-debounce”: “2000”

live:



<form phx-debounce="blur" phx-change="mycheck">
  <div class="form-group input-group">
    <label>Domínio:&nbsp;&nbsp;</label>
    <input type="text" name="paramsdomain" phx-debounce="10000" placeholder="Ex: domain.com.br" class="form-control"/>
    <span class="input-group-append">
      <button class="btn btn-info btn-flat" phx-click="mycheck">Checar Domínio! 2</button>
    </span>
  </div>
  </form>
5

I’m doing this from memory on my phone so there may be a few mistakes, but try the following:

  1. Check that you mix file is pointing to the current version of liveview (0.3.1)
  2. Check that you have updated dependencies (mix deps.update)
  3. Check that the right version of the liveview js file is referenced in your assets/package.json (it should point to deps/phoenix_live_view)
  4. Check that that referenced JavaScript library has been properly updated by mix (search for debounce)
  5. Remove debounce attribute from form level tag
  6. Ensure your input is correctly bound to your form field - to double check this you are probably better using the helper functions in Phoenix.HTML.Form as per my example rather than hand coding the input tag.

Sorry for the imprecise steps - if you still can’t get it going I’ll take a look tonight when I’m back on a proper computer. It would be good if you provided your schema for the form, the live controller code and your template code.

2 Likes
6

Thanks @mindok
It really was lacking to upgrade to 0.3.1.
I recompiled and everything worked …
Thanks again,

1 Like