I've made some java script logic, saved it to a file named 'blake.js', and:

  • added scripts[] = blake.js to the theme's .info file
  • added <?php drupal_add_js( drupal_get_path('theme', 'agregado') . '/blake.js', 'theme', 'footer' );?> at the top of my node's content
  • and made sure the node's input filter is 'php' for the page I did the drupal_add_js().

The java script logic gives me resizable divs, that I can grow and shrink with some hovers and clicks... yet, the java script does not seem to run unless I have firebug activated, and the console window open too.

Am I not calling drupal_add_js() correctly? The java script file lives inside the theme directory's root.

Also, I am always seeing:
<script type="text/javascript" src="/cms6_13/sites/all/themes/agregado/blake.js?i"></script>
inside my page headers, even when the java script does not appear to be working...

And, I want this java script on every page, but because it's not seeming to work, I've resorted to trying the drupal_add_js() method to see if I can force it...

(FWIW, the drupal_add_js() documentation is not really helpful. And searching 'drupal_add_js' yields many pages from prior versions of drupal with a different drupal_add_js syntax, and not real clear indicator of which version they are discussing...)

A working example for java script for a theme would be the best documentation... (for me)

Comments

bsenftner’s picture

geeze... been working in drupal full time for 6+ weeks, and I just now find the actual java script docs for drupal.

http://drupal.org/node/121997

we gotta do something about the quality of the search on drupal.org!

bsenftner’s picture

After a few variations, I still have the java script only running when firebug's console is open. Yet, in Safari (on OS X) the java script always runs...

Above I describe using drupal_add_js() at the top of my node content, but that caused my script to be loaded twice, and all java scripted interactions to occur twice (only when the firebug console was open; when firebug console is closed my java script does not run.)

So I tried creating a template.php file (the Agregado theme does not supply one) and put the drupal_add_js() there... same behavior as using drupal_add_js() inside a node's content - I get no java script in the normal case, and it get it doubled up when firebug's console is open...

Now, in all cases, I am seeing my blake.js file correctly referenced in the page source...

So now I'm thinking that perhaps my java script is not properly being executed after the DOM is loaded?!?
Following this possibility, I changed my after-the-DOM is loaded wrapper from this:

$(function() {   
    my logic here
});

to this:

Drupal.behaviors.initBlakeLogic = function() {
   my logic here
};

but I am still getting the same behavior...

I'm running out of things to try... not wanting to post a direct link to the site, because it's my personal resume, I feel like I've got to if I want to get this solved:
http://www.popdigitaltech.com/cms6_13

Upon load, to you see blocks of content (2nd half of page) fade away and shrink?
Clicks on the "show/hide details" links should make these areas toggle their display...
If you do not see these effects, does a "view source" on the page have a script tag loading "blake.js" ?
If so, why is it's logic not running?

bsenftner’s picture

Just tried changing to a theme I'd previously used that java script successfully, and it works perfectly...

Something in the Agregado theme kills my java script...

spoke too soon... it does not work on both themes now. I probably forgot to clear my cache or something...

Frustrating...

thewhiteafrican’s picture

Try commenting out, or simply removing, all your console.* statements from your Javascript, then try loading your page without Firebug... What I found is that whenever my code got to those lines it would break if Firebug wasn't open with a place for the Javascript to execute the console. commands. Hope this helps!

bsenftner’s picture

Thanks for your suggestion. Yet the issue still persists...

See anything suspect with this?

// msg = "loaded 40";
// console.log( msg );

// an after-the-DOM is loaded wrapper,
// this makes the menus slide up and disappear as soon as the page is visible,
// as well as holds conditional slide up/down logic for correctly configured content (see comments below):
// $(function() {  <- this is the jquery after-the-DOM style, while below is the Drupal method:
Drupal.behaviors.initBlakeLogic = function() {

  // console.log( "inside initBlakeLogic!" );
  
  // upon page render, slide the menus up to show the user that there is stuff hidden:
  $('.menu').fadeOut();
    
  // This logic makes the menus slide down upon mouseover of their sidebar:
  $( '#sidebar-last' ).bind( "mouseenter", function() {
                             $('.menu').fadeIn();
                            });
  
           
  // links with a class of "content-hideable" have a "rel" attribute equal to the id of content
  // that should be 'hidden' or 'revealed' upon a mouse click, accomplished via an animated toggle: 
  $('.content-hideable').each( function() {
                              
                              // the content is originally visible, and this will make it
                              // disappear in front of the user upon 1st page render:
                              var rel = $(this).attr('rel');
                              if (rel) {
                                 $('#'+rel).animate( { opacity: "hide", height: "hide" }, 3000 );
                              }
                                
                              // and attaches a callback to toggle the elements visibility:
                              $(this).click( function() {
                                               var rel = $(this).attr('rel');
                                               if ( rel ) {
                                                  $('#' + rel).animate( { opacity: "toggle", height: "toggle" }, 1000 );
                                               }  
                                               return false;
                                           });
                          });

// this is the ending of the jquery wrapper insuring the DOM is loaded:
// }); <- old jquery logic, new Drupal below:
};
entrigan’s picture

This worked for me, and I had the exact symptoms the OP had (works in safari, in ff w/ firebug open, but not in ff with firebug closed).

Removed all console.log's and it works!

kenitech’s picture

Yes! I've been plagued with this issue over and over again and I'm NOT using drupal. Removing console.log calls from your code seems to resolve this issue. Also if you're using IE you will generally get javascript alert warnings when console.log calls are present so you should remove these anyway. Thankfully I found this post before banging my head against a wall for another 2 hours.

doingmorestuffonline’s picture

did you get this resolved? I'm having the same issue with FF3.6.15 with FB1.6.2 - everything fires fine with the panel open, but not when it's closed.
I've got inline JS but also external JS files - I'm using prototype and an AJAX extension for cross-domain JSON - jsonp. I suspect that it's jsonp that is failing, but have no idea how to trouble shoot since if FB is open, it works...

doingmorestuffonline’s picture

nevermind - got it solved - if you have 'console.log($variable)' anywhere, if throws an error - just removed the line, and works fine in FF.

bsenftner’s picture

Yes, like you, I found that even having a console.log() in unexecuted code causes the issue...

I ended up writing up a tutorial after my trials with this:
http://www.missingubercartmanual.com/The-Basics-of-using-Java-Script-in-...