I've added a link

<%= link "⇧", to: post_upvote_path(@conn, :create, post), "ujs-method": "post", "ujs-remote": true %>

And upvoted.js.eex file

console.log("upvoted!");

Server responds with application/javascript; charset=utf-8, but console.log doesn't work.

It is preferred way to get JS executed (like in Rails), but I've also tried to use $(document).ajaxSuccess and it doesn't work for me too.

https://github.com/jalkoby/phoenix_ujs/blob/master/src/ujs/dom.js#L11

I found that strange, vanilla.ujs does support button elements

When I use ujs-remote with form_for, phoenix_ujs sends Origin header among others. But when using with link, it doesn't.
This leads to Plug.CSRFProtection.InvalidCrossOriginRequestError error on backend.

Hello!

I have this form:

<form accept-charset="UTF-8" action="/api/foo/9" id="form" method="post"  ujs-remote="ujs-remote">
    <input name="_method" type="hidden" value="put">
    <input name="_csrf_token" type="hidden" value="---">
    <input name="_utf8" type="hidden" value="✓">
</form>

And when I execute this js-code, it triggered native submit event (not ajax):

form = document.getElementById("form");
form.submit();

@jalkoby what I do wrong?

I'm getting lots of forms not working on my site. They seem to submit without xhr, or are missing form fields.

The common denominator seems to be older Windows and Android environments. My hunch is that lack of support for FormData is the culprit.

I'm trying to alter form.js to handle this case, will submit a PR if I succeed. It might just be easier for me to add a jquery dependency however (I'm already using it for other reasons).

Thanks!

I get console.log succes but paramaters doesnt pass to controller only empty map %{}

<%= form_for @conn, search_path(@conn, :search), [ method: :get, ujs_remote: "ujs-remote"] , fn f ->%>

<%= text_input f, :q, placeholder: "search", required: true, id: "search-input", class: "fontAwesome form-control input-lg", data: [behaviour: "autocomplete"] %>

<%= submit "Search", class: "btn btn-bordered btn-green btn-block btn-lg"%>

      </div>
  </div>
<% end%>    

<script> document.addEventListener('ajax:success', function(e) { console.log("succes") }); </script>

it seems that the value of the header being case sensitive is undefined by http spec. In this library you use
xhr.setRequestHeader('X-Requested-With', 'XmlHttpRequest');
when the standard I've seen around other libraries is "XMLHttpRequest". Could this be changed? I can submit a pr if yes.

To enable full page caching, we no longer render a CSRF token in the meta tag that UJS depends on.

We've made two workarounds:

• render a blank meta tag (so UJS doesn't log a warning)
• inject the token on ajax:beforeSend

Some ideas

• ability to tell UJS when to read the meta tag (we do set it eventually)
• ability to tell UJS the token to use (rather than read from the meta tag)

Great library, thanks!

I believe there may be a race condition between the xhr sending and associated events. Running a phoenix server locally I'll register the following listeners:

document.addEventListener('ajax:complete', function (e) {
    console.log("complete");
});
document.addEventListener('ajax:beforeSend', function (e) {
    console.log("before");
});

In the console I'll see 9 calls to each listener and in the network tab see 3 xhr requests.

If I break and step through the xhr code down to xhr.send(setXHRData(xhr, options.data, options.type));, everything works correctly.