CODEWITHSUNDEEP
jquerydocument-ready
KieranFJ
KieranFJ

Reputation: 27

jQuery ready() issues - $(this) not usable and code applies only to one element

Im having issues with getting some jQuery to run when the DOM is ready.

I have two forms, each with a <select> which when my code runs should load in other form elements.

When the user first loads the page, I want these selects on ready() to grab certain attributes (form action, load() target etc) and then load that in. Works perfectly fine when using change() and I can get one <select> to work when but not both.

HTML

<form action="php/bagCreate/newBag_bag.php" method="post" id="form1">
  <select id="target" data-target="upForm" class="get" name="bagLevel">
    <option>1</option>   
    <option>2</option>  
    <option>3</option>   
  </select>        
</form>

<form action="php/bagCreate/storeItems_bag.php" method="post" id="form2">      
  <select id="target2" data-target="upFormType" class="get" name="itemName">
    <option>A</option>   
    <option>B</option>  
    <option>C</option>   
  </select>        
</form>

JS

This works for a single form, but the second wont load

$(document).ready(function(){
$('select.get').ready(function() {
    var action = $('select.get').parent().attr('action');
    var target = $('select.get').data('target');
    $('#'+target).load(action, $('select.get').parent().serializeArray());     
});

changing select.get to this inside the ready function causes neither of the forms to load.

Using change() works perfectly fine for both forms, although it is a bit of a repetition

$('select.get').change(function() {        
  var action = $(this).parent().attr('action');  
  var target = $(this).data('target');  
  $('#'+target).load(action, $(this).parent().serializeArray());      
});

Upvotes: 1

Views: 146

Answers (4)

Boaz
Boaz

Reputation: 20230

Use the each() method to apply your code to more than one select element in the jQuery object. Also, as the comments suggest, the ready() method should be reserved to the document object.

For example:

$(document).ready(function() {
    $('select.get').each(function(i) {
        var action = $(this).parent().attr('action');
        var target = $(this).data('target');
        $('#'+target).load(action, $(this).parent().serializeArray());
    });
});

Note how in each iteration of the each() callback function, $(this) refers to the ith element in the $('select.get') object.

Upvotes: 2

nikeaa
nikeaa

Reputation: 1047

Should your first code snippet read as follows: 

$(document).ready(function(){
    $('select.get').each(function() {
        var action = $('select.get').parent().attr('action');
        var target = $('select.get').data('target');
        $('#'+target).load(action, $('select.get').parent().serializeArray());     
    }
);

Changing the ready method to the each method would run the defined function once for each element found with the selector.

Upvotes: 1

r043v
r043v

Reputation: 1869

$(document).ready(function(){
    $('select.get').each(function(){
        var $t = $(this);
        var $p = $t.parent();
        var action = $p.attr('action');
        var target = $t.data('target');
        $('#'+target).load(action, $p.serializeArray());
    });
});

Upvotes: 0

adeneo
adeneo

Reputation: 318182

Just trigger the change event on pageload ?

$('select.get').change(function() {        
  var action = $(this).parent().attr('action');  
  var target = $(this).data('target');  
  $('#'+target).load(action, $(this).parent().serializeArray());      
}).change(); //trigger it on pageload as well ...

Upvotes: 4

Related Questions