With ActiveAdmin, Not able to grab CSS Selectors with JavaScript

Question

Running Rails 3.2.13
Running ruby 1.9.3p392 (2013-02-22 revision 39386) [x86_64-darwin10.8.0]
gem 'activeadmin', '<= 0.6.0'

In the active_admin.rb initializer, I set it to load my js:

  # To load a javascript file:
    config.register_javascript 'keywords.js.coffee'

Then in my Coffeescript I have:

keywords = $('#conference_keyword_ids').html()
console.log(keywords)

Console prints out:

 undefined

Then to test that I have the script right I change the script to:

 keyword = 'test'
 console.log(keyword)

Console prints out:

 test

So to try something else, I try:

 keyword = $( "title" ).html()
 console.log(keyword)

And the console prints out the proper Title

 Edit Conference

And:

 keyword = $( ":root" ).html()
 console.log(keyword)

Gives me:
<head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Edit Conference</title> <link href="/assets/active_admin.css?body=1" media="screen" rel="stylesheet" type="text/css"> <link href="/assets/active_admin/print.css?body=1" media="print" rel="stylesheet" type="text/css"> <script src="/assets/application.js" type="text/javascript"> </script> <script src="/assets/conference_industry_keywords.js" type="text/javascript"> </script> </head>

So I am able to retrieve a few selectors but most of them are coming up "undefined". I have used the same Coffeescript in the base Rails and all works fine.

Can anybody see anything that I am doing wrong or perhaps ActiveAdmin works differently?

Here is an example of the Coffeescript generated js:

(function() {
  var title;

  title = $("#conference_state_id").html();

  console.log(title);

}).call(this);

I appreciate any help!

UPDATE

OK, testing in the Chrome Developers console:

I entered this into my Coffeescript:

 keywords = $('#conference_keyword_ids').html()
 console.log(keywords)

Console prints out:

 undefined

So I add this into the console:

 keywords = $('#conference_keyword_ids').html()

And I get the CORRECT output in the console:

"<optgroup label="Agriculture and Forestry"><option value="6">ag1</option></optgroup>
 <optgroup label="Apparel &amp; Clothing Congress"><option value="2">test</option>
 <option value="1">test 2 testing</option></optgroup>"

So I am obviously doing something wrong. Any ideas??

Update with Examples

Here are examples. The first set I used "$ ->" and the second set I removed the "$ ->". I list the Coffescript first, jQuery second, output third, then entered into the console.

Test #1    
Coffeescript entered:
$ ->  
   keywords = $('title').html()
   console.log(keywords)

Generated jQuery:
  (function() {
    $(function() {
      var keywords;
      keywords = $('title').html();
      return console.log(keywords);
      });
   }).call(this);

 Output:
   nothing output

 Test #2  
  Coffeescript entered:  
  keywords = $('title').html()
  console.log(keywords)

  Generated jQuery:  
   (function() {
    var keywords;
    keywords = $('title').html();
     console.log(keywords);
     }).call(this);

  Output:  
   Edit Conference

  Test #3
   In the Console:
    keywords = $('title').html()
    console.log(keywords)

   Results:
    Edit Conference
    undefined

  Test #4
   Coffeescript
   $ ->
     keywords = $('#conference_state_id').html()
     console.log(keywords)

   Generated jQuery
    (function() {
     $(function() {
      var keywords;
      keywords = $('#conference_state_id').html();
      return console.log(keywords);
      });
     }).call(this);

   Output:
    nothing output

  Test #5
   Coffeescript
    keywords = $('#conference_state_id').html()
    console.log(keywords)

   Generated jQuery
    (function() {
     var keywords;
     keywords = $('#conference_state_id').html();
     console.log(keywords);
     }).call(this);

    Output:
     undefined

  Test #6
   In the Console
     keywords = $('#conference_state_id').html()
     console.log(keywords)

   Results
    <option value=""></option>
    <option value="1">Alabama</option>
    <option value="2">Alaska</option>
    <option value="3">Arizona</option>
    <option value="4">Arkansas</option>
    ...
    <option value="56">Northern Mariana Islands</option>
    undefined

If there is anything else, please let me know.

UPDATE
I may have determined what the issue is, but still unsure how to fix it. I have JQuery loading in my application.js and my active_admin.js

 // application.js  manifest  
 //  
 //= require jquery  
 //= require jquery_ujs  
 //= require bootstrap  
 //= require user  
 //= require jquery_nested_form  
 //= require_tree .  

 // active_admin.js  manifest
 //  
 //= require jquery   
 //= require jquery_ujs  
 //= require jquery.ui.core  
 //= require jquery.ui.widget  
 //= require jquery.ui.datepicker  
 //= require active_admin/application  

 Page Source Code
 <script src="/assets/application.js" type="text/javascript"></script>
 <script src="/assets/active_admin.js" type="text/javascript"></script>

Each one is loading "jQuery JavaScript Library v1.10.0". I also have this error occuring which led me to believe that I have the 2 JQuery issue.

 Uncaught TypeError: Object [object Object] has no method 'tooltip'

Thanks!

You need to wait for the DOM to be ready before trying to query it: $ -> \n ... — Blender
– Blender, Commented Dec 23, 2013 at 6:11
I had already tried that: jQuery -> title = $( "#conference_state_id" ).html() console.log(title) Result is "undefined"... — Jim Miller
– Jim Miller, Commented Dec 23, 2013 at 13:25
Are you absolutely sure that #conference_keyword_ids exists in the document? You should be able to tell by running the exact same code from the developer console in your browser. — seanlinsley
– seanlinsley, Commented Dec 24, 2013 at 19:27
@seanlinsley, I tested in the console as you suggested and received the correct response(see updated answer). So that proves I am doing something wrong. But what? Any ideas from the additional clues? Thanks again! — Jim Miller
– Jim Miller, Commented Dec 27, 2013 at 21:55
@JimMiller you replied earlier to @Blender that you were doing $ -> (your code here). Can you update your question with such an example? Because all of the examples you gave will fail since they aren't waiting for the DOM to load. — seanlinsley
– seanlinsley, Commented Dec 28, 2013 at 23:12

Marshall · Accepted Answer · 2014-08-02 05:38:43Z

0

This solution seems odd to me, but I was having the same problem, and looked at how activeadmin-sortable was doing it:

(function($) {
  $(document).ready(function() {
    // your code here
  });
})(jQuery);

This is working for me. Hope it helps.

answered Aug 2, 2014 at 5:38

Marshall

161 bronze badge

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

Collectives™ on Stack Overflow

With ActiveAdmin, Not able to grab CSS Selectors with JavaScript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related