CODEWITHSUNDEEP
javascriptjquery
riverecho
riverecho

Reputation: 95

Apply properties to multiple objects

I'm having trouble figuring out the best way to use jQuery to apply changes to multiple input fields after a change is made to another input field. The code below is working if there is only 1 Campaign id. Yet, when there are more than one campaigns present, my code simply applies the last instance to all campaigns. How can I change this to apply to each Campaign id individually?

GOALS

Organization Status is switched from 'Active' to 'Paused'.

For Each Campaign id:

Organization Status is switched from 'Paused' to 'Active'.

For Each Campaign id:

Here is the code (please ignore the tables!):

var campaign_status = function () {
    // If the Organization Status is set to 'Paused' and the Campaign is 'Active', make the campaign status 'Paused' and disable the drop down.
    if ($('#orgautorenewstatus').val() == "Pause" && $('.autorenewstatus').val() == "Active") {
        $('.autorenewstatus').prop('disabled', 'disabled');
        $('.autorenewstatus').val("Pause");
    }
    // If the Organization Status is set to 'Paused' and the Campaign is 'Paused' or 'Renewed', leave the Campaign Status and disable the drop down.
    else if ($('#orgautorenewstatus').val() == 'Pause') {
        $('.autorenewstatus').prop('disabled', 'disabled');
    }
    else {
        $('.autorenewstatus').prop('disabled', false);
    }
};
$(campaign_status);
$("#orgautorenewstatus").change(campaign_status);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Organization Status</h3>
<select id="orgautorenewstatus" name="orgautorenewstatus">
    <option value="Active" selected="selected">Active</option>
    <option value="Pause">Paused</option>
</select>

<br />
<br />

<h4>Campaign Status</h4>
<table>
    <tbody>
        
        <tr>
            <td>#1</td>
            <td>
                <select class="autorenewstatus" name="autorenewstatus_48622">
                    <option value="Pause">Paused</option>
                    <option value="Active" selected="selected">Active</option>
                    <option value="Renewed">Renewed</option></select>
            </td>
        </tr>

        <tr>
            <td>#2</td>
            <td>
                <select class="autorenewstatus" name="autorenewstatus_48884">
                    <option value="Pause">Paused</option>
                    <option value="Active">Active</option>
                    <option value="Renewed" selected="selected">Renewed</option>
                </select>
            </td>
        </tr>
        
        <tr>
            <td>#3</td>
            <td>
                <select class="autorenewstatus" name="autorenewstatus_49000">
                    <option value="Pause">Paused</option>
                    <option value="Active" selected="selected">Active</option>
                    <option value="Renewed">Renewed</option>
                </select>
            </td>
        </tr>
        
    </tbody>
</table>

There has to be an easier and more straightforward way. New to jQuery, but picking it up as fast as possible Thank you for your help!

See Fiddle: http://jsfiddle.net/riverecho/40087wdb/8/

Upvotes: 6

Views: 524

Answers (3)

user4639281
user4639281

Reputation:

First, cache your jQuery objects. You don't need to create a new jQuery object every time you need to interface with an element.

However, there are two reasons why your code behaves badly when used with multiple campaigns:

  1. You've used an id instead of a class for #orgautorenewstatus.
  2. Each campaign should reside in its own scope in the HTML.

To fix this issue, wrap each campaign in a separate div element, and change the id's to classes. Then iterate through the campaigns and apply script to each campaign.

Make sure that when you are selecting elements that you are only referencing elements contained within the campaign that the script is currently operating on.

$('.campaign').each(function(){
    var oars = $('.orgautorenewstatus', this);
    var ars  = $('.autorenewstatus', this);
    var campaign_status = function() {
        ars.prop('disabled', oars.val() === "Pause");
        if (oars.val() === "Pause") ars.each(function(){
            if(this.value === "Active") this.value = 'Pause';
        });
    };
    campaign_status();
    oars.change(campaign_status);
});
/* For cosmetic purposes only */
.campaign { display: inline-block; width: 33%; } * { margin: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- The HTML has been minified to save space -->
<div class="campaign"><h3>Organization Status</h3><select class="orgautorenewstatus" name="orgautorenewstatus"><option value="Active" selected="selected">Active</option><option value="Pause">Paused</option></select><h4>Campaign Status</h4><table><tbody><tr><td>#1</td><td><select class="autorenewstatus" name="autorenewstatus_48622"><option value="Pause">Paused</option><option value="Active" selected="selected">Active</option><option value="Renewed">Renewed</option></select></td></tr><tr><td>#2</td><td><select class="autorenewstatus" name="autorenewstatus_48884"><option value="Pause">Paused</option><option value="Active">Active</option><option value="Renewed" selected="selected">Renewed</option></select></td></tr><tr><td>#3</td><td><select class="autorenewstatus" name="autorenewstatus_49000"><option value="Pause">Paused</option><option value="Active" selected="selected">Active</option><option value="Renewed">Renewed</option></select></td></tr></tbody></table></div><div class="campaign"><h3>Organization Status</h3><select class="orgautorenewstatus" name="orgautorenewstatus"><option value="Active" selected="selected">Active</option><option value="Pause">Paused</option></select><h4>Campaign Status</h4><table><tbody><tr><td>#1</td><td><select class="autorenewstatus" name="autorenewstatus_48622"><option value="Pause">Paused</option><option value="Active" selected="selected">Active</option><option value="Renewed">Renewed</option></select></td></tr><tr><td>#2</td><td><select class="autorenewstatus" name="autorenewstatus_48884"><option value="Pause">Paused</option><option value="Active">Active</option><option value="Renewed" selected="selected">Renewed</option></select></td></tr><tr><td>#3</td><td><select class="autorenewstatus" name="autorenewstatus_49000"><option value="Pause">Paused</option><option value="Active" selected="selected">Active</option><option value="Renewed">Renewed</option></select></td></tr></tbody></table></div><div class="campaign"><h3>Organization Status</h3><select class="orgautorenewstatus" name="orgautorenewstatus"><option value="Active" selected="selected">Active</option><option value="Pause">Paused</option></select><h4>Campaign Status</h4><table><tbody><tr><td>#1</td><td><select class="autorenewstatus" name="autorenewstatus_48622"><option value="Pause">Paused</option><option value="Active" selected="selected">Active</option><option value="Renewed">Renewed</option></select></td></tr><tr><td>#2</td><td><select class="autorenewstatus" name="autorenewstatus_48884"><option value="Pause">Paused</option><option value="Active">Active</option><option value="Renewed" selected="selected">Renewed</option></select></td></tr><tr><td>#3</td><td><select class="autorenewstatus" name="autorenewstatus_49000"><option value="Pause">Paused</option><option value="Active" selected="selected">Active</option><option value="Renewed">Renewed</option></select></td></tr></tbody></table></div>

Upvotes: 2

blurfus
blurfus

Reputation: 14031

For a multiple campaigns, this would be my take on it. Wrap all your campaigns in its own div like this

<div class="campaignStatus">...</div>

Assign a class to the dropdown box (since ids are to be unique)

<select id="orgautorenewstatus" name="orgautorenewstatus" class="campaignBox">...</select>

VERSION 2 (improved: see updated fiddle)

Affects only those items in a given campaign div (instead of looping through all campaigns)

  $(".campaignBox").on('change', function () {
      // If the Organization Status is set to 'Paused' and the Campaign is 'Active', 
      // make the campaign status 'Paused' and disable the drop down.
      if ($(this).val() === "Pause") {

          //for each autorenew status within the campaign
          $(this).closest('.campaignStatus').find('.autorenewstatus').each(function (i, box) {
              if ($(box).val() == "Active") {
                  $(box).val("Pause");
              }
          });
          $(this).closest('.campaignStatus').find('.autorenewstatus').prop('disabled', 'disabled');
      } else {
          // If the Organization Status is set to 'Paused' and the Campaign is 'Paused' or 'Renewed', 
          // leave the Campaign Status and disable the drop down.
          $(this).closest('.campaignStatus').find('.autorenewstatus').prop('disabled', false);
      }
  });

Upvotes: 0

Andika Tanuwijaya
Andika Tanuwijaya

Reputation: 191

I have simplify your logic a little bit, here is my working sample

var campaign_status = function () {
      var newStatus = $('#orgautorenewstatus').val() == "Pause"? 'disabled' : false;
      $('.autorenewstatus').each(function(){
        if($(this).val() == "Active") {        
            $('.autorenewstatus').prop('disabled', newStatus);
            $('.autorenewstatus').val("Pause");
        } else {
            $('.autorenewstatus').prop('disabled', newStatus);
        }
      });

  };
  $(campaign_status);
  $("#orgautorenewstatus").change(campaign_status);

http://jsfiddle.net/wx5ksfkk/1/

Upvotes: 0

Related Questions