Jquery ticker in a drupal block isn't working

Question

I'm trying to add this ticker type to my site: http://cektkp.com/twittermarquee/.

I've created a new module to do so, and this is my module dir structure:

 module stocksTicker:
       1. stocksTicker.info
       2. js/
       3. images/
       4. stocksTicker.module

    js/:
       1. marqueeTicker.js

    images/:
       1.fade-trends2.png
       2.trendtip-pointer.gif

• I enabled this module and added css to the block configuration from here: http://cektkp.com/twittermarquee/front.css.

• I copied the .js file from here: http://cektkp.com/twittermarquee/twitmarquee.js to path/to/module/js/ directory.

• Images are in path/to/module/images dir too.

This is my stocksTicker.module file:

/**
 * Declare what blocks are provided
 * by this module.
 */
function stocksTicker_block_info() {
  $blocks['bseTicker'] = array(
    'info' => t('BSE'),
    'cache' => DRUPAL_NO_CACHE,
  );
  return $blocks;
}

/**
 * Return a rendered view of the block.
 */
function stocksTicker_block_view($delta) {
  $block = array();
  switch ($delta) {
    case 'bseTicker':
      $block = getBSETicker();
      break;
  }
  return $block;
}

/**
 * This function does the real work of getting
 * the stocks info and marking it up & produces
 * it in a renderable format.
 */
function getBSETicker() {
  $path = drupal_get_path('module', 'stocksTicker').'/js/marqueeTicker.js';
  $content = "<div id=\"header\"><div id=\"trends\"><div class=\"inner\"><ul class=\"trendscontent\"><li class=\"trend-label\">Trending topics</li>";
  $stockEntry = array("Stock1","Stock2","Stock3", "Stock4", "Stock5", "Stock6", "Stock7", "Stock8", "Stock9", "Stock10");
  foreach ($stockEntry as &$stock) {
       $content = $content . "<li><a href=\"search?q=". $stock. "\" class=\"search_link\" name=\"". $stock. "\" rel=\"nofollow\">" . $stock. "</a><em class=\"description\">This 
is description.</em></li>";
  }     

$content = $content . "</ul></div><span class=\"fade fade-left\">&nbsp;</span><span class=\"fade fade-right\">&nbsp;</span></div></div><div class=\"trendtip\"><div class=\"trendtip-content\"><div>Trending right now:</div><a class=\"trendtip-trend\"></a><div class=\"trendtip-why\">Why?<span class=\"trendtip-desc\"></span><span class=\"trendtip-source\">Source: <span>What the Trend?</span></span></div></div><div class=\"trendtip-pointer\">&nbsp;</div></div><script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js\" type=\"text/javascript\"></script><script type=\"text/javascript\">";

  $content = $content. "//<![CDATA[";
  $content = $content. "var page={};";
  $content = $content. "$(function() {";
  $content = $content. "new FrontPage().init();";
  $content = $content. "});";
  $content = $content. "//]]>";
  $content = $content. "</script>";
  $block['content'] = array('#markup' => $content,
                            '#attached' => array('js'  => array($path),),);'
  return $block;
}

When I try to view the changes, I do get the list and I do see the css working just fine but none of the jquery feature works (scrolling/ tooltip anything..) which is the main aim of this exercise. Please tell me how can I fix this.

I'm new to drupal so please excuse any silly mistake that I might have done.

Answer 1

In your js file, you are depending on the $(document).ready(function () {} ); to initialize your jquery stuff, but your content is being added via ajax ( if I understand correctly ), so this code will never fire, as the document is already loaded at that point.

This is the reason behaviors have been implemented in drupal.

If you change this to initialize your code in a drupal attached behavior, like so:

(function ($, Drupal, window, document, undefined) {
    Drupal.behaviors.stockTicker = {
        attach: function( context, settings ) {
            page.trendDescriptions = {};
            loadTrendDescriptions();
        }
    }
})(jQuery, Drupal, this, this.document);

or something of the sort, that may fix your problem. You'll need to look into the once() function, to prevent the code from running every time any content is added to the page, but for now, try a behavior and see if you get js behavior