jQuery prop not working in iframe

Question

I have some very simple jQuery, in my Rails .erb file, and I cannot get it to work. My .erb file is:

<script type="text/javascript">
  $('.check').prop('checked', true);
</script>

<%= bootstrap_form_for(@shipping_shop, layout: :inline) do |f| %>

<div class="input-lg check">
  <%= f.check_box :enabled, label: "Standard shipping enabled?" %>
</div>

.... stuff removed for brevity

<%= f.submit 'Save Standard Settings', class: 'btn btn-primary btn-lg 
btn-block' %>
<% end %>

My application.js file looks like this:

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .

I'm using the "Rails Bootstrap Forms" gem. I can check the box by passing in arguments, but I am trying to figure out why I can't get any jQuery to work.

I am doing "Setting "checked" for a checkbox with jQuery?" exactly, but don't understand what's wrong.

I tried to change the check class directly to the element and that didn't work either:

<div class="input-lg check">
  <%= f.check_box :enabled, label: "Standard shipping enabled?",  
  class:"check" %>
</div>

score 2 · Answer 1 · edited Mar 31 '16 at 00:16

2

Try loading the document first:

$( document ).ready(function() {
 $('.check').prop('checked', true);
});

or:

 $( document ).ready(function() {
     $('.check').prop('checked', 'checked');
    });

edited Mar 31 '16 at 00:16

the Tin Man

158,662
42
215
303

answered Mar 31 '16 at 00:05

Jhonny Mesquita

148
2
9

Nope.. I wonder if its something with this gem, or somehow my setting in Ruby.. I can't find anything about a conflict with jquery and this gem though.. – ToddT Mar 31 '16 at 00:19
But you are loading the jquery library in the iframe page too, right? Couse the iframe document dont recognize elements/libraries from the parent document. (sorry for bad english) – Jhonny Mesquita Mar 31 '16 at 00:33
That was it!! I wish I could give 2 correct answers.. I choose the one that was first.. But that was totally it!! Thank you!! – ToddT Mar 31 '16 at 01:04
Nice! I think you can add the comment with useful, it can help some others with this problem... im new here, dont understand the rules so mutch... – Jhonny Mesquita Mar 31 '16 at 01:22

score 1 · Accepted Answer · answered Mar 31 '16 at 00:38

1

Have you included application.js into the page in the iframe? Since a page in an iframe is a standalone page, it does not recognize the css files or javascript files included in the parent page.

answered Mar 31 '16 at 00:38

Aetherus

8,720
1
22
36

Hmm, no I haven't.. How would I do that? – ToddT Mar 31 '16 at 00:48
See your `app/views/layouts/application.erb` for example. – Aetherus Mar 31 '16 at 00:57

score 0 · Answer 3 · answered Mar 30 '16 at 23:44

0

Try this

  $('.check').prop('checked', 'checked');

answered Mar 30 '16 at 23:44

Krishna

1,945
1
13
24

Where's this .check element, I see the div has class as "check". Maybe that's causing the problem – Krishna Mar 30 '16 at 23:55
Geez, good idea.. but no I added the check class directly to the element.. and no dice.. I'll update the question – ToddT Mar 30 '16 at 23:58

jQuery prop not working in iframe

3 Answers3