How to render a partial within javascript

Question

I have two forms on a page which have mostly the same inputs. I have tabs on the screen that switch between each form. However when i submit one of the forms, i recieve a 'cant be blank' on the same input fields on the other form. I understand why this is happening. I tried to stop this by using a if statement to only render either form depending on which tab is clicked. This did not work as you cant target html id's in an if statement. Then i tried to use javascript which used a 'show' and 'hide' methods depending on which tab was clicked which also didnt work as i believe that that even though the form is still hidden, it is still actually there. Now im not sure what to do. My only idea is to render the forms within javascript?

 <input id="tab1" type="radio" name="tabs" checked>
  <label class="label-header" for="tab1"> UK Address</label>

  <input id="tab2" type="radio" name="tabs">
  <label class="label-header"for="tab2"> International Address </label>

  <!-- <section id="content1"> -->
    <%# if  %>
        <%= f.simple_fields_for :address do |fields| %>
        <%# raise %>
            <section id="content1">
                <%= render "address/fields", fields: fields, addressable: addressable %>
            </section>
        <% end %>
      <%# else %>
        <%= f.simple_fields_for :address do |fields| %>
            <section id="content2">
                <%= render "address/international_fields", fields: fields, addressable: addressable %>
            </section>
        <% end %>


$(document).ready(function() {
  var uk_address = $('#content1');
  var international_address = $('#content2');
  $('#tab1').on('click', function() {
    uk_address.show();
    international_address.hide();
  });

  $('#tab2').on('click', function() {
    uk_address.hide();
    international_address.show();
  });

});

You don't need to render the forms within javascript. You could either do a conditional check on your model (if international_fields are present, ignore address fields, etc.) or, in the tab toggle, apply the disable attribute to the other fields so they don't get sent with the form. — Josh Brody
– Josh Brody, Commented May 4, 2019 at 16:23
I would prefer the second option. How would i do this? would you add the disable through javascript? @JoshBrody — b.herring
– b.herring, Commented May 4, 2019 at 16:48

lacostenycoder · Accepted Answer · 2019-05-04 17:20:59Z

1

You should be able to enable/disable the items inside the javascript you have with this modification:

 $(document).ready(function() {
   var uk_address = $('#content1');
   var international_address = $('#content2');
   $('#tab1').on('click', function() {
     uk_address.removeAttr("disabled").show();
     international_address.attr("disabled", "disabled").hide();
   });

   $('#tab2').on('click', function() {
     uk_address.attr("disabled", "disabled").hide();
     international_address.removeAttr("disabled").show();
   });

 });

answered May 4, 2019 at 17:20

lacostenycoder

11.3k4 gold badges37 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

b.herring Over a year ago

wont this still throw an error, as 'presence true' is on the model for a couple of the columns, so just having disabled wont override that i dont think

Collectives™ on Stack Overflow

How to render a partial within javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related