3

Me and Javascript/jQuery don't get along well ...

What I want to do is show the first 200 or so characters of a user's "about me" text and then expand it when you click the "more" link.

I added to my template.php

function bartik_preprocess_user_profile(&$variables){
  drupal_add_js('themes/bartik/js/moreless.js');

}

The moreless.js code is:

jQuery(document).ready( function ($) {    
    $(".moreLess").hide();

    $(".moreLessSwitch").toggle(function() {             
        $(this).html("<a href=#>Less</a>");            
        $(this).prevAll(".moreLess").slideDown();         
    }, function() {            
        $(this).html("<a href=#>More...</a>");            
        $(this).prevAll(".moreLess").slideUp();        
    }); 
}(jQuery));

in user-profile.tpl.php I have:

stuff to always show
<div class="moreLess">stuff to hide...</div><br>
<div class="moreLessSwitch">[+] more</div>​

This is the working jfiddle sample.

When I load a user profile nothing happens, I had all caches flushed. No js errors. When i copy the jquery code into the console it works. This has to be something dumb simple ;-)

Also, is this really the correct way to add conditional js to some pages?

2
3

The code you should use is the following one:

(function ($) {
  $(function ($) {    
    $(".moreLess").hide();

    $(".moreLessSwitch").toggle(function() {             
        $(this).html("<a href=#>Less</a>");            
        $(this).prevAll(".moreLess").slideDown();         
    }, function() {            
        $(this).html("<a href=#>More...</a>");            
        $(this).prevAll(".moreLess").slideUp();        
    }
  ); 
})(jQuery);

In Drupal 7, JavaScript using jQuery should be wrapped between (function ($) { and })(jQuery);. You should also use Drupal behaviors, similarly to what done in the batch.js file used from Drupal.

(function ($) {

/**
 * Attaches the batch behavior to progress bars.
 */
Drupal.behaviors.batch = {
  attach: function (context, settings) {
    $('#progress', context).once('batch', function () {
      var holder = $(this);

      // Success: redirect to the summary.
      var updateCallback = function (progress, status, pb) {
        if (progress == 100) {
          pb.stopMonitoring();
          window.location = settings.batch.uri + '&op=finished';
        }
      };

      var errorCallback = function (pb) {
        holder.prepend($('<p class="error"></p>').html(settings.batch.errorMessage));
        $('#wait').hide();
      };

      var progress = new Drupal.progressBar('updateprogress', updateCallback, 'POST', errorCallback);
      progress.setProgress(-1, settings.batch.initMessage);
      holder.append(progress.element);
      progress.startMonitoring(settings.batch.uri + '&op=do', 10);
    });
  }
};

})(jQuery);

The code in the JSFiddle works fine for me. It just be only a problem of wrapping the code correctly.

0
0

I came across an article "Painless collapsible Divs in Drupal". The irony for me is that I went through a lot of pain to get this simple feature working.

Ctools has a built in feature to do it with 1 line of code, ouch!

print theme('ctools_collapsible', array('handle' => 'Click me and you will see collapsed content', 'content' => $collapsed_content, 'collapsed' => TRUE));

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.