CODEWITHSUNDEEP
javascriptjqueryhtml
Abhishek Salian
Abhishek Salian

Reputation: 934

JQuery next class

I need to enable disabled drop downs and change value from json. When my program has <select></select><select></select> I mean continuous select it works fine but when there are elements in between it doesn't.

Code for index page:

<ul>
 <li>
  <label>Item 1</label>
  <select name="item1" id="item1" class="update">
   <option value="">Select Item1</option>
   <option value="1">1</option>
   <option value="2">2</option>
  </select>
 </li>
 <li>
  <label>Item 2</label>
  <select name="item2" id="item2" class="update" disabled="disabled">
   <option value="">Select Item2</option>
   /*output based on item1*/
  </select>
</li>
<li>
 <label>Item 3</label>
 <select name="item3" id="item3" class="update" disabled="disabled">
  <option value="">Select Item3</option>
  /*output based on item2*/
 </select>
</li>

Script loaded in index(as well as jquery):

var formObject = {
    run : function(obj) {
        if (obj.val() === '') {
            obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
        } else {
            var id = obj.attr('id');
            var v = obj.val();
            jQuery.getJSON('/test/mod/update.php', { id : id, value : v }, function(data) {
                if (!data.error) {
                    obj.next('.update').html(data.list).removeAttr('disabled');
                } else {
                    obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
                }
            });
        }
    }
};
$(function() {

    $('.update').live('change', function() {
        formObject.run($(this));
    });

});

I know i need to change 

obj.next('.update').html(data.list).removeAttr('disabled');

but couldnt figure it out.

Also this works with jquery 1.6.4 but not with 1.9.1 which section i need to change to update the code to be compatible with latest jquery?

Upvotes: 0

Views: 280

Answers (3)

John S
John S

Reputation: 21482

The .live() function was deprecated in jQuery 1.7 and removed in jQuery 1.9.

You could use .on() instead:

$(document.body).on('change', '.update', function() {
    formObject.run($(this));
});

When using .on(), it is most efficient to use the closest ancestor of the elements for which the handler is to be invoked. Therefore, instead of using document.body, you could possibly use the <ul> element. It would be easier though if that element had an "id" attribute.

For dealing with the <select> elements not being siblings, I suggest changing occurences of the following:

obj.nextAll('.update').html(...
obj.next('.update').html(...

To this:

obj.closest('li').nextAll().find('.update').html(...
obj.closest('li').next().find('.update').html(...

Of course, you should also use .prop() for enabling/disabling, as suggested by @Explosion Pills.

Upvotes: 1

HaBo
HaBo

Reputation: 14287

you should have it like this

replace obj.next('.update').html(data.list).removeAttr('disabled'); with 

 obj.parent().next().children().removeAttr('disabled');

jsfiddle: http://jsfiddle.net/habo/7vMw8/

Upvotes: 2

Explosion Pills
Explosion Pills

Reputation: 191749

Instead of using .removeAttr('disabled') use .prop('disabled', false). .prop is favored as a method for updating element properties since 1.6, but moreso after 1.7

Upvotes: 3

Related Questions