Question

This following code snippet works fine using jQuery1.2.3, but it doesn’t work with latest version of jQuery:

$.getJSON(url,{str: $$.val() }, function(j){
   if (j.length > 0) {
      var options = '<option value="">' +params.firstOption+ '</option>';
      for (var i = 0; i < j.length; i++) {
         options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
      }
   }
   $dest.removeAttr('disabled')
        .html(options)
        .find('option:first')
        .attr('selected', 'selected');
});

Please note that this above code is actually part of a jQuery plugin for cascading drop down list. It produces desired result if I use jQuery1.2.3. The full plugin code is as follows:

(function($){

   $.fn.linkedSelect = function(url,destination,params) {


       var params = $.extend({

         firstOption : 'Please Select',

         loadingText : 'Loading...'

      },params);

      var $dest = $(destination);

      return this.each(function(){

         $(this).bind('change', function() {

            var $$ = $(this);

            $dest.attr('disabled','false')
                 .append('<option value="">' +params.loadingText+ '</option>')
                 .ajaxStart(function(){

                    $$.show();

            });

            $.getJSON(url,{str: $$.val() }, function(j){
               alert('User clicked on this.'); 
               if (j.length > 0) {

                  var options = '<option value="">' +params.firstOption+ '</option>';

                  for (var i = 0; i < j.length; i++) {

                     options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';

                  }

               }

               $dest.removeAttr('disabled')
                    .html(options)
                    .find('option:first')
                    .attr('selected', 'selected');

            }); // end getJSON

         });  // end change

      }); // end return each

   };  // end function

})(jQuery);

Please note that it can’t generate the following alert message

alert('User clicked on this.');

what is written inside the getJSON function for debugging purpose if I use latest version of jQuery. And I have also traced using JS debugger, it can’t step into the getJSON function if I use latest version of jQuery. But, it shows this alert message if I use jQuery1.2.3.

In error console, warning messages are:

Warning: reference to undefined property b.p.height
Source File: http://localhost//js/jquery.jqGrid.min.js Line: 99
Warning: reference to undefined property b.p.serializeGridData
Source File: http://localhost/js/jquery.jqGrid.min.js Line: 62
Warning: reference to undefined property jQuery.event.triggered
Source File: http://localhost/js/jquery1.7.js Line: 2924
Warning: reference to undefined property elem[jQuery.expando]
Source File: http://localhost/js/jquery1.7.js Line: 1719

What should I change to adapt with latest version of jQuery. Thank you.

Answer 1

Most likely your server is producing invalid JSON.