jQuery illuminate in use with bootstrap 2.2.2 won't work together: e.css(...) is undefined illuminate.js

Question

I've downloaded and set up jQuery illuminate( http://www.tonylea.com/2011/jquery-illuminate/ )
I made sure both jQuery and illuminate plugin are loaded in page.

Then I coded like this

Javascript part

window.onload = function(){
            if(document.URL.indexOf("mode=1") >= 0){ 

                    var input = $(".box#input");
                    $(document).scrollTop(input .offset().top - 60);
                    var v = input.val();
                    input.val('');
                    input.focus().val(v);
                    input.focus()

                    $(".btn#illuminate").illuminate({
                        'intensity': '0.3',
                        'color': '#98cb00',
                        'blink': 'true',
                        'blinkSpeed': '1200',
                        'outerGlow': 'true',
                        'outerGlowSize': '30px',
                        'outerGlowColor': '#98cb00'
                    });

            }
}

Form part

<div class="chat">
    <form accept-charset="UTF-8" action="/comments" class="new_comment" data-remote="true" id="new_comment" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="GujuDnihu2UXCbJgbooDxoikjcJncFLf8hl4=" /></div>
        <div class="input-append">
            <input class="box" id="input" name="comment[body]" type="text" value="Hello there" />
            <button type="submit" class="btn" id="illuminate">submit</button>
        </div>
    </form> 
</div>

However, the submit button won't illuminate.
I see the error that says e.css(...) is undefined illuminate.js
Why? how can I fix this?

so you've included jQuery, jQuery UI and Illuminate in that order? — omma2289, Aug 04 '13 at 06:26
@Shebo That would not be a problem. It is at least a warning... — Ionică Bizău, Aug 04 '13 at 06:40
Probably unrelated, but there's a rogue `` on the line with ` — Sumurai8, Aug 04 '13 at 06:44
@MKK, when i first loaded the question, there was no HTML code displayed. Disregard — John, Aug 04 '13 at 07:01
@OptimusPrime It doesn't matter. because everything else except illuminating is working — MKK, Aug 04 '13 at 07:03
Seems to me you are using selectors wrong. When you have a unique id, use id only to select element. `#illuminate` and '#input' — Optimus Prime, Aug 04 '13 at 07:04
@MKK What happens if you use `$(document).ready(function () { ... });` instead of `window.onload = function () { ... }`? — Ionică Bizău, Aug 04 '13 at 07:04
This is weird. Everything is working except illuminating part but in this jsfiddle nothing happens http://jsfiddle.net/b82fW/ — MKK, Aug 04 '13 at 07:07
working now : http://jsfiddle.net/b82fW/1/ added jquery and added the illuminate code BEFORE the code uve typed — krishwader, Aug 04 '13 at 07:09

score 2 · Accepted Answer · edited May 23 '17 at 11:50

Other users above already mentioned that a few selectors could be changed so instead of using $(".box#input"); you could use $("#input"); since an id wihtin a page must be unique and therefore the additional class selector .box is not needed. I tested in the chrome dev tools if the selector was the cause for the error but at least in chrome 30 it does not matter.

I copied your html unchanged and ran it locally - it worked as expected the button glows.

Then i created an online demo plunk at plnkr.co and changed only a few things:

nesting of divs
removal of document.URL.indexOf("mode=1") >= 0 so that it works with any url

So this is the html

<div>
<form accept-charset="UTF-8" action="/comments" class="new_comment" 
    data-remote="true" 
    id="new_comment" method="post">
    <div class="chat">
      <input name="utf8" type="hidden" value="&#x2713;" />
      <input name="authenticity_token" type="hidden" 
          value="GujuDnihu2UXCbJgbooDxoikjcJncFLf8hl4=" />
    </div>
    <div class="input-append">
        <input class="box" id="input" name="comment[body]" 
               type="text" value="Hello there" />
        <button type="submit" class="btn" 
               id="illuminate">submit</button>
    </div>
</form> 
</div>

And it seems to work just fine. Let me know if it does not work as expected. The error mus lie somewhere else.

What version of jquery, jquery-ui and illuminate are you using?

Update: Information from our chat

I understood the following:

you are using jquery v1.9.1
bootstrap 2.2.2
jQuery UI CSS Framework 1.8.24 (may be this one?)
currently you are not including any version of jquery-ui.js

The next step is to include a reference to jquery-ui.min.js and the see if this works together with bootsrap.

Update 2: jQuery illuminate in use with jQuery 1.9.1

Using the illuminate 0.7 plugin with jQuery 1.9.1 requires a modified version of illuminate 0.7

I'm using bootstrap. and the button and text field are shown with that. Does it matter??? — MKK, Aug 04 '13 at 07:19
You didn't change any from my codes right? including javascript. If so, there should be something wrong with other code in the same page:( — MKK, Aug 04 '13 at 07:20
This could very well be. I do not know if there is a naming or function conflict between the two. Which version of bootstrap are you using? — surfmuggle, Aug 04 '13 at 07:20
If possible could you do that with jsfiddle? so that I can paste my whole bootstrap css — MKK, Aug 04 '13 at 07:22
I added bootstrap css. http://jsfiddle.net/b82fW/5/ Please see this. It doesn't illuminate:( I use FireFox and it's working on official website. I see it illuminating. but not on this fiddle:( — MKK, Aug 04 '13 at 07:29
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/34783/discussion-between-threefouronesixonethree-and-mkk) — surfmuggle, Aug 04 '13 at 07:36

jQuery illuminate in use with bootstrap 2.2.2 won't work together: e.css(...) is undefined illuminate.js

1 Answers1

Update: Information from our chat

Update 2: jQuery illuminate in use with jQuery 1.9.1