Question

I am in the process of migrating my Drupal 6 site to Drupal 7. As a result i am facing some issues with the code.
The calling of javascript laced with jquery etc is different in Drupal 7 is what i have read.
This is the image of the page i had in Drupal 6.
On change of the dropdown box, the table above it gets populated with projects belonging to that
status. This works fine in Drupal 6.
But in Drupal 7 i see this javascript error.

This is the form element for the Dropdown in my php file.

<? php
 $form['status_list'] = array(
'#type' => 'select',
'#title' => t('Freeway Project Statuses'),
'#options' => array(
  0 => t('-Select Status-'),
  1 => t('Draft'),
  2 => t('NotSpecified'),
  3 => t('Quote'),
  4 => t('Forecasted'),
  5 => t('InEvaluation'),
  6 => t('Cancelled'),
  7 => t('Booked'),
  8 => t('InProduction'),
  9 => t('Completed'),
  10 => t('Closed'),
 ),
 '#default_value' => array('0' => 'Select Status'),
 '#weight' => 0,
);

And this is the JavaScript
I have modified it with the additional tags for Drupal 7

 (function$){ .. })(jQuery); . 

These tags were not needed in Drupal 6.

      (function$){
    $(document).ready(function () {
     $("#edit-status-list").change(function() {
     var selectedStatus = $(this).find(":selected").text();
     var charExists = ((window.location.href).indexOf('?') >= 0) ? true : false;

    if(charExists){
    var split = (window.location.href).split('?');
    var loc = split[0];

      loc = loc+"?status="+selectedStatus;  
    self.location.href= loc;

    }

    else{
     var locf = window.location.href+"?status="+selectedStatus;   
     self.location.href= locf;

     }

     });

     $("#create-freeway-project").submit(function() {
      $(":submit", this).attr("disabled", "disabled");

     });

    $(".common_link_class").click(function() {
          //alert("Hello");

       var count = ($(this).data("clicks") || 0) + 1;
       $(this).data("clicks", count);


        if ($(this).data("clicks") >= 1) {

       }


       if ($(this).data("clicks") >= 2) {

         return false;
       }
     });


      $("#edit-analysis-code-one").change(function () {
        // Get the configs and split them.
        var cfgs = _get_configs("edit-custRef");
        var split_cfgs = cfgs.split('/');

        // Create some new configs and put it back into the configs  textfield.
        //var new_cfgs = $(this).val() +"/"+ cfgs[1];
        var new_cfgs = $("#edit-analysis-code-one option:selected").text() +"/"+ cfgs[1];

        $("#edit-custRef").val(new_cfgs);
      });

      $("#edit-analysis-code-two").change(function () {
        // Get the configs and split them.
        var cfgs = _get_configs("edit-custRef");
        var split_cfgs = cfgs.split('/');

        // Create some new configs and put it back into the configs textfield.
        //var new_cfgs = cfgs[0] +"/"+ $(this).val();
        var new_cfgs = cfgs[0] +"/"+ $("#edit-analysis-code-two option:selected").text()
        $("#edit-custRef").val(new_cfgs);
     });


   });

 })(jQuery); 


(function$){
function _get_configs(id) {

  return $("#"+ id).val();

}   
})(jQuery); 

#edit_status_list is the dropdown of our interest.

Would like to have your suggestions as to what additional change needs to be done for proper javascipt calling in Drupal 7

Answer 1

It should be

(function($) {

Not

(function$ {

What you’ve got is a syntax error. The first one instantiates a function such that its first argument will be available via the symbol $ in its body code. The function is invoked after the body:

  // ...
})(jQuery);

and the global “jQuery” object is passed in as the argument. This setup assures your code access to the correct framework (that is, to jQuery) via the common “$” symbol without having to worry about another external binding for “$”.