0

I have the following code. 

(function() {
    $(document).on("keydown", function(e) {

        // ignore unless CTRL + ALT + N was pressed
        if (!(e.keyCode == 78 && e.ctrlKey && e.altKey )) return

        jQuery('[name*="type"]').select2("val","SECOND").trigger('change');
        jQuery('[name*="size"]').val(5);
    })
}())

Basically what it does is that when CTRL + ALT + N is pressed, it executes some jquery on the page. The issue that I am having is that when the "Type" field is changed, there is some JS that runs and makes the "size" field visible (It is only visible when type=SECOND). So, in order for this to work at the moment, I have to press CTRL + ALT + N twice. The first time it sets the value of type, then a few seconds later once the page has changed, I do it again and it fills in the value of 5 for size.

Note that I have read Why does the jquery change event not trigger when I set the value of a select using val()? which helped me make the event trigger, but I am not quite there yet.

Main HTML

<%= simple_form_for @type, :url => type_path, :remote => true, :html => {:method => :post} do |f| %>
  <%= form_errors @type, :header_text => 'There are problems with one or more fields:' %>

  <%= hidden_field_tag "change_type" %>
  <%= render :partial => 'type', :locals => {:f => f} %>
  <%= render :partial => 'size1', :locals => {:f => f} %>


  <div class="form__action">
    <a class="button" href="<%= type_path %>">Cancel</a>
    <%= f.submit "Save", :class => 'button button--primary' %>
  </div>
<% end %>

size1 partial

<% if @type.second? %>
  <%= render :partial => 'size2' %>
<% end %>

new.js.coffee

$ = jQuery

$('#type_show').on('change', "#thing_type", ->
  $this = $(@)
  original = $("#thing_type_original").val()
  current  = $this.val()

  if current in ['FIRST', 'SECOND']
    $("#allow_something")
      .filter(":hidden")
      .select2("val", "true")
    $("#allow_something")
      .closest(".form__row").fadeIn()
  else
    $("#allow_something")
      .not(":disabled")
      .select2("val", "false")
      .closest(".form__row").fadeOut()

  if (current is "SECOND" and original isnt "SECOND") or (current isnt "SECOND" and original is "SECOND")
    $('#change_type').val('true')
    $this.closest("form").submit()
)
Community
  • 1
  • 1
Zack
  • 2,377
  • 4
  • 25
  • 51
  • 1
    Event handling is asynchronous. `.trigger()` queues up the event, it doesn't run the handler immediately. – Barmar Jan 08 '14 at 23:16
  • @Barmar is on the right track - I think you might be handling this incorrectly. Rather than firing an event, why not just do the work you want to do within the keydown event? – Codeman Jan 08 '14 at 23:18
  • And if you don't want to write the same code twice, put it in a named function and call it from both places. – Barmar Jan 08 '14 at 23:18
  • Perhaps part of the problem is that I don't really understand the JS that changes the visibility. – Zack Jan 08 '14 at 23:41
  • It would be helpful to have the code for the change event, as well as a little html. I'm trying to make a Fiddle but I don't have enough to go off of. http://jsfiddle.net/8YekN/ – musicnothing Jan 08 '14 at 23:52
  • @AlexMorrise, I have added more code above. Thank you for your help! – Zack Jan 09 '14 at 00:18

0 Answers0