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, Dec 23 '13 at 06:11
I had already tried that: jQuery -> title = $( "#conference_state_id" ).html() console.log(title) Result is "undefined"... — Jim Miller, Dec 23 '13 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, Dec 24 '13 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, Dec 27 '13 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, Dec 28 '13 at 23:12
I have updated the question with examples. I list the Coffeescript from the rb file, the generated jQuery, the output, then pasting the code into the console with results. I tested with "$ ->" and without "$ ->". Keep in mind that this is within the ActiveAdmin engine. Thank you for your help! — Jim Miller, Dec 29 '13 at 05:36
Hmm, I just noticed that you have your Gemfile to require AA <= 0.6.0. Is there something specific you're avoiding? — seanlinsley, Dec 29 '13 at 17:18
I have no idea what's happening; by all accounts this should be working without a hitch (it works fine for me locally). I'd recommend backing out your changes and starting from scratch. As well, it couldn't hurt to upgrade your version of Active Admin. — seanlinsley, Dec 29 '13 at 17:25
0.6.0 is the latest stable version. I tried "v0.6.2" and "v0.6.1" but received rails related errors with those versions. Dropped back to "v0.6.0". Will try to re-write code soon. Thanks! — Jim Miller, Jan 02 '14 at 22:43
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 ctive_admin.js. **SEE UPDATE ABOVE** Each one is loading "jQuery JavaScript Library v1.10.0". I also have this error occurring which led me to believe that I have the 2 JQuery issue. I tried solutions listed here [link](http://stackoverflow.com/questions/9435505/jquery-uncaught-typeerror-objectobject-object-has-no-method-slider). Both JQuery files continue to load. Any thoughts? — Jim Miller, Jan 04 '14 at 20:03

score 0 · Accepted Answer · answered Aug 02 '14 at 05:38

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 02 '14 at 05:38

Marshall

16
1

With ActiveAdmin, Not able to grab CSS Selectors with JavaScript

1 Answers1