You are viewing limited content. For full access, please sign in.

Question

Question

Perform action on radio button in collection

asked on December 18, 2018

What I'm trying to accomplish is add a class to a radio button in a collection based on which button is selected. I can get this to work on the first row of the collection but not on any other ones that are added.

 

Here is my code:

$(document).ready(function(){
  
  $('.rbutton input[type=radio]').change(function(){
  
    var radioValue = $(this).val();
    console.log(radioValue)
    
    if (radioValue == 1){
    
      $("#q136").removeClass('goal');
      $("#q136").removeClass('resource');
      $("#q136").addClass('action');
    }
    else if (radioValue == 2){
    
      $("#q136").removeClass('goal');
      $("#q136").addClass('action');
      $("#q136").addClass('resource');
    }
    else if (radioValue == 0){
    
      $("#q136").removeClass('action');
      $("#q136").removeClass('resource');
      $("#q136").addClass('goal');
    }

    });
  
});

Any help would be appreciated.

0 0

Answer

SELECTED ANSWER
replied on December 18, 2018 Show version history

This comes down to a common problem people run into with collections and tables. You're adding your event handler after the document ready event, which occurs before those additional fields exist.

Basically, this is what's happening

  1. Your form loads
  2. The ready event fires
  3. The existing radio button(s) get the handler
  4. The user adds a new row
  5. The new rows don't work...

 

To fix this, you would need to reassign the handlers each time the user adds a row. So, try the following instead.

  1. Create a separate function outside of document ready that assigns the handlers to the radio button
  2. Create another separate function that handles the actions
  3. Add a call to the event handler function in document ready
  4. Attach the "actions" function instead of putting to code in directly
  5. Add a click event handler to the "add row" link that also calls the separate function

 

Now, the following will happen instead

  1. Your form loads
  2. The ready event fires
  3. Your event handler function is called
  4. The existing row(s) get the handler
  5. User adds a row
  6. Your event handler function is called
  7. The existing row(s) get the handler
  8. Repeat...

 

Now you could run into some issues here. For example, if you call your event handler function multiple times, it could also add the same handler multiple times.

To prevent this, (assuming you use the method above) you could try using the following approach to bind the event

.off('change',classUpdate).on('change',classUpdate);

What this does is unbind the action first (if it is attached) so that you ensure there's only ever one attached.

Your code would then look something like this

$(document).ready(function(){
    // Assign to existing fields
    radioEvents();

    // Run update when rows are added
    $('.yourTableClass .cf-table-add-row').on('click',function(){
        radioEvents();
    });
});

function radioEvent(){
    // Unbind and rebind event handler
    $('.rbutton input[type=radio]').off('change',classUpdate).on('change',classUpdate);
}

// your existing function
function classUpdate(){
    var radioValue = $(this).val();
    console.log(radioValue)
    
    if (radioValue == 1){
        $("#q136").removeClass('goal');
        $("#q136").removeClass('resource');
        $("#q136").addClass('action');
    }
    else if (radioValue == 2){
        $("#q136").removeClass('goal');
        $("#q136").addClass('action');
        $("#q136").addClass('resource');
    }
    else if (radioValue == 0){
        $("#q136").removeClass('action');
        $("#q136").removeClass('resource');
        $("#q136").addClass('goal');
    }
}

You'll need to update the selector for the table row-add event either with the id of the table or a custom class you add.

NOTE: I have not tested this code, so there may be things that need to be fixed/adjusted, but it will point you in the right direction.

0 0
replied on December 27, 2018

This is really helpful! Thanks!

0 0

Replies

You are not allowed to reply in this post.
You are not allowed to follow up in this post.

Sign in to reply to this post.