By JoeRobertsPhotography on

Drupal core 7.8

I am writing a new module and I am trying to pass form information into a .js file and have it load as the setting for a jQuery plugin that I found.

Here is what I have so far in my module:

  $script = '$j("#rotation").galleryView({ panel_width: ' . variable_get('rotation_main_width', '700') . ' });';

drupal_add_js(drupal_get_path('module', 'rotation_main') .'/js/rotation_main.js', 'file');

drupal_add_js(array('rotation_main' => array('script_js' => $script)), 'setting');

Here is what I have in the rotation_main.js file:

var $j = jQuery.noConflict();

 (function ($j) {

     $j(document).ready(function(){
		
		Drupal.settings.rotation_main.script_js;	
});
              
  }(jQuery));

My page loads and the above rotation_main.js just loads as is when I really want it to load like the following:

var $j = jQuery.noConflict();

 (function ($j) {

     $j(document).ready(function(){
		
		$j("#rotation").galleryView({ 
                       panel_width: 700 
                });. 
});
              
  }(jQuery));

I need to have the Drupal.settings.rotation_main.script_js variable show up in the javascirpt file as $j("#rotation").galleryView({ panel_width: 700 });.

When I go the page after everything is loaded and put in the Drupal.settings.rotation_main.script_js into firebug it does display the proper info back as a string.

I want the user to be able to enter in different widths for the panel_width in the javascript so they have more control over how big the roation is.

Please help I have been looking into this for ever. I am so stuck but I feel so close.

⋅ Categories: Drupal 7.x

Comments

sebto’s picture

sebto commented

Read documentations of 'drupal_add_js'. You have to pass the variables to js using this function. For example:

 drupal_add_js(array('myModule' => array('key' => 'value')), 'setting');

---
Drupalika | دروپال فارسی

JoeRobertsPhotography’s picture

JoeRobertsPhotography commented

I think that is what I am doing in the this line from above.

drupal_add_js(array('rotation_main' => array('script_js' => $script)), 'setting');

Module Name: rotation_main
Key: script_js
Value: $script

Any more help you can offer is much appreciated.

JoeRobertsPhotography’s picture

JoeRobertsPhotography commented

I actually figured out that Drupal extends jquery at the very end of the head tag. I was calling the Drupal.settings.rotation_main.script_js; in my .js file just before that so it didn't exist yet. There for nothing was working. Once I switched the drupal_add_js to load in the footer as well as placed it into a and placed into "function rotation_main_page_build(){" function (Code below) and updated the rotation_main.js below to print it to the page after the variable is available it worked great.

Updated Drupal_add_js and placed into "function rotation_main_page_build(){" function:

drupal_add_js(drupal_get_path('module', 'rotation_main') .'/js/rotation_main.js', array('type' => 'file', 'scope' => 'footer', 'weight' => 100));

Updated rotation_main.js:

var $j = jQuery.noConflict();

 (function ($j) {
 
     $j(document).ready(function(){
		
	$j('head').append(Drupal.settings.rotation_main.script_js);
	
    });
          
}(jQuery));

Hope this helps. Oh and if there is a more elegant way to do this please help I am all hears.

Thanks,
Joe

jaypan’s picture

jaypan
Location Victoria, BC
commented

Drupalizing it, and cleaning it up a little:

PHP:

drupal_add_js(drupal_get_path('module', 'rotation_main') .'/js/rotation_main.js', 'file');

$settings['width'] = variable_get('rotation_main_width', '700');

drupal_add_js(array('rotationMain' => $settings), 'setting');

JS:

(function ($) {
  Drupal.settings.behaviors.rotationMain = {
    $("#rotation").galleryView({panel_width:Drupal.settings.rotationMain.width});
  };
}(jQuery));

Contact me to contract me for D7 -> D10/11 migrations.

JoeRobertsPhotography’s picture

JoeRobertsPhotography commented

I am trying to Drupalizing it. Here is what I have and I keep running into an error with my roation_main.js file.

rotation_main.module file snippet

    $settings['rotation_main_width'] = variable_get('rotation_main_width', '700');
    $settings['rotation_main_height'] = variable_get('rotation_main_height', '300');
    $settings['rotation_main_transition_interval'] = variable_get('rotation_main_transition_interval', '1200');
    $settings['rotation_main_background_color'] = variable_get('rotation_main_background_color', '#000000');
    $settings['rotation_main_border'] = variable_get('rotation_main_border', 'none');
    $settings['rotation_main_overlay_width'] = variable_get('rotation_main_overlay_width', '200');
    $settings['rotation_main_overlay_height'] = variable_get('rotation_main_overlay_height', '100');
    $settings['rotation_main_overlay_position'] = variable_get('rotation_main_overlay_position', 'bottom');
    $settings['rotation_main_overlay_text_color'] = variable_get('rotation_main_overlay_text_color', '#ffffff');
    $settings['rotation_main_overlay_color'] = variable_get('rotation_main_overlay_color', '#425F78');
    $settings['rotation_main_overlay_opacity'] = variable_get('rotation_main_overlay_opacity', '0.8');
    $settings['rotation_main_frame_height'] = variable_get('rotation_main_frame_height', '50');
    $settings['rotation_main_filmstrip_border_color'] = variable_get('rotation_main_filmstrip_border_color', '#ffffff');
    $settings['rotation_main_filmstrip_arrow_color'] = variable_get('rotation_main_filmstrip_arrow_color', '#ffffff');
    $settings['rotation_main_filmstrip_position'] = variable_get('rotation_main_filmstrip_position', 'bottom');
    $settings['rotation_main_rounded_corners'] = variable_get('rotation_main_rounded_corners', 'no');
  
drupal_add_js(drupal_get_path('module', 'rotation_main') .'/js/rotation_main.js', array('type' => 'file', 'scope' => 'footer', 'weight' => 100));

drupal_add_js(array('rotationMain' => $settings), 'setting');

rotation_main.js code



	    var $j = jQuery.noConflict();
 


 (function ($j) {
 $j(document).ready(function(){

		Drupal.settings.behaviors.rotationMain = {
			
			
				$("#rotation").galleryView({
					panel_width: Drupal.settings.rotationMain.rotation_main_width,
					panel_height: Drupal.settings.rotationMain.rotation_main_height,
					transition_interval: Drupal.settings.rotationMain.rotation_main_transition_interval,
					background_color: "Drupal.settings.rotationMain.rotation_main_background_color",
					border: "Drupal.settings.rotationMain.rotation_main_border",
					overlay_width: Drupal.settings.rotationMain.rotation_main_overlay_width,
					overlay_height: Drupal.settings.rotationMain.rotation_main_overlay_height,
					overlay_position: "Drupal.settings.rotationMain.rotation_main_overlay_position",
					overlay_text_color: "Drupal.settings.rotationMain.rotation_main_overlay_text_color",
					overlay_color: "Drupal.settings.rotationMain.rotation_main_overlay_color",
					overlay_opacity: Drupal.settings.rotationMain.rotation_main_overlay_opacity,
					frame_width: Drupal.settings.rotationMain.rotation_main_frame_width,
					frame_height: Drupal.settings.rotationMain.rotation_main_frame_height,
					filmstrip_border_color: "Drupal.settings.rotationMain.rotation_main_filmstrip_border_color",
					filmstrip_arrow_color: "Drupal.settings.rotationMain.rotation_main_filmstrip_arrow_color",
					filmstrip_position: "Drupal.settings.rotationMain.rotation_main_filmstrip_position" 
				});
				

		};	
	});
     
  }(jQuery));

The .js file doesn't load. Am I doing something wrong with the .js file.

I am getting an error in firefox something about "missing : after property id" and it is referencing "$j("#rotation").galleryView({".

Thanks so much for you help.

jaypan’s picture

jaypan
Location Victoria, BC
commented

Drupal.behaviors is the Drupalized version of $(document).ready(). You are using both. On top of this, you are setting noconflict, which you don't need to do.

Here is the entire framework of a Drupal js document:

(function($)
{
  // function used by this script
  function f1()
  {

  }

  // another function used by this script
  function f2()
  {

  }

  // put additional functions f3(), f4() etc. here

  // here is the onload code. Anything put inside here
  // where I added the comment will be called onload
  Drupal.behaviors.myModule = {
    attach:function()
    {
      // put your onload code in here
      // ex: 
      f1();
      f2();
    }
  }
}(jQuery));

Nothing goes before the above code, nothing goes after it. You can remove the functions f1() and f2() if you don't have any functions to be used in this script. You don't need to call jQuery.noConflict(). You don't need to call $(document).ready(). Just use the above as your framework. You don't need to use $j, as using $ alone is entirely fine inside this framework.

Contact me to contract me for D7 -> D10/11 migrations.

jaypan’s picture

jaypan
Location Victoria, BC
commented

Here is an example of a js script that would work in Drupal.

PHP:

$settings['backgroundColor'] = '#FF0000';
drupal_add_js(array('myModule' => $settings), 'setting');
drupal_add_js(drupal_get_path('module', 'my_module') . '/js/my_module.js');

my_module.js:

(function($)
{
  function changeBackground()
  {
    $("body").css("background-color", Drupal.settings.myModule.backgroundColor);
  }

  Drupal.behaviors.myModule = {
    attach:function()
    {
      changeBodyBackground();
    }
  }
}(jQuery));

In the above javascript, Drupal.behaviors.myModule is executed on page load, which calls the function changeBackground(), which in turn sets the body background color to the color that was passed from the PHP.

Contact me to contract me for D7 -> D10/11 migrations.