Phx-change not able to emit event second time

I have a list of forms rendered in live view template like so:

        <%= for candidate_pipeline <- @candidate_pipelines do %>
            <form phx-change="update-stage">
               <input type="hidden" name="candidate_id" value="<%= candidate_pipeline.id %>" />
               <select name="stage_id" onchange="this.blur()", class="custom-select">
               <%= for job_stage <- @job_stages do %>
	               <option value=<%= job_stage.id %> <%= if job_stage.name == candidate_pipeline.job_stage.name, do: "selected" %>><%= job_stage.name %></option>
	           <% end %>
               </select>
            </form>
        <% end %>

Here am trying to update each pipeline’s stage on selection of stage from a list of stage options. But my phx-change event works fine for first time, and next time I try to choose a stage for next pipeline, the phx-change event doesn’t get fired and I have to reload the whole page to make it work. Please help me figure out this issue, stuck on this one.

Here’s the image for reference:
pipeline

Are you rendering each of these rows inside a <table> row by any chance? Your snippet doesn’t show it, but perhaps you simplified it. If you are using tables, you cannot embed forms inside tables. If you inspect the HTML, you’d find the browser moved the tags outside of the table. Can you confirm?

1 Like

Thanks for replying @chrismccord . Yes, I have used tables but I can’t see the tags moved outside the table if by “tags” you mean “phx-change”??

Using your browser’s HTML inspector, can you show the contents of the markup after page load?

Here is the screenshot.

Hmm everything looks fine there. After the first update, do you have any js errors on the next failed trigger?

No, it didn’t throw any js errors also. I checked in the console. I had to reload the page to make it work again on phx-change.

What happens if you put an IO.inspect("YEAH") in your handle_event?

def  handle_event("update-stage", params, socket) do
 IO.inspect("YEAH")
....
end

It doesn’t even reach there second time, seems like the form gets stuck with the newly selected value and then nothing happens.

Try using this commit

{:phoenix_live_view, github: "phoenixframework/phoenix_live_view", ref: "52b336719845fc8bdb2f50461f4a6a679513fabc"}

and if that works then try this one {:phoenix_live_view, github: "phoenixframework/phoenix_live_view", ref: "a199c1775fbb7156515981985436bae6a89708cc"}

1 Like

I tried using {:phoenix_live_view, github: “phoenixframework/phoenix_live_view”, ref: “52b336719845fc8bdb2f50461f4a6a679513fabc”}. Didn’t work for me. Had to handle this issue using js. Thanks for responding :slight_smile:

1 Like