Skip Navigation

[Resolved] Further Issues with Conditional Groups in Tables and/or Modals

This support ticket is created 2 years, 10 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 8 replies, has 2 voices.

Last updated by Dave 2 years, 10 months ago.

Assisted by: Waqar.

Author
Posts
#2264615

Tell us what you are trying to do?
Replicate the solution provided in this thread:
https://toolset.com/forums/topic/cred-conditional-groups-dont-seem-to-work-in-modals/#post-2191613

After raising the fact that forms conditional groups don't seem to work with modals, I was told that the issue was related to the archive tables and the AJAX calls rather than the modals. But I've tried to replicate the solution provided by copying the code and changing the checkbox field that should call it as it's only affecting the conditional generically so the trigger should be all that needs to change. It is now a generic field called "class-advanced-settings".

However, originally it would flash open and shut instantly, and now it won't even open. The code provided seems to make sense but I cannot figure out how it's working in the original place and not this one. Here is the new implementation:

Form:

[credform]
[cred_field field='form_messages' class='alert alert-warning']
<div class="form-group">
  <label for="%%FORM_ID%%_post_title">[cred_i18n name='post_title-label']Class Title (Optional)[/cred_i18n]</label>
  [cred_generic_field type='textfield' field='class-name']
  {
  "required":0,
  "default":""
  }
  [/cred_generic_field]
</div>
<div class="form-group">
  <label for="%%FORM_ID%%_class-day">[cred_i18n name='class-day-label']Day[/cred_i18n]</label>
  [cred_field field='class-day' force_type='field' class='form-control' output='bootstrap' select_text='Please select a Day' required='true']
</div>
<div class="form-group">
  <label for="%%FORM_ID%%_@class-type-class.parent">[cred_i18n name='@class-type-class.parent-label']Class Type[/cred_i18n]</label>
  [cred_field field='@class-type-class.parent' class='form-control relationship-select-styling' output='bootstrap' select_text='Please select Class Type' required='true']
</div>
<div class="form-group">
  <label for="%%FORM_ID%%_@term-class.parent">[cred_i18n name='@term-class.parent-label']Terms Classes[/cred_i18n]</label>
  [cred_field field='@term-class.parent' class='form-control relationship-select-styling' output='bootstrap' select_text='Please select a Term' required='true']
</div>
<div class="form-group">
  <label for="%%FORM_ID%%_@gym-class.parent">[cred_i18n name='@gym-class.parent-label']Gyms Classes[/cred_i18n]</label>
  [cred_field field='@gym-class.parent' class='form-control relationship-select-styling' output='bootstrap' select_text='Please select a Gym' required='true']
</div>
<div class="form-group">
  <label for="%%FORM_ID%%_class-start-time">[cred_i18n name='class-start-time-label']Start Time[/cred_i18n]</label>
  <div class="row">
    <div class="col-md-6">
      <label for="%%FORM_ID%%_class-start-time-hours">[cred_i18n name='class-start-time-hours-label']Hours[/cred_i18n]</label>
      [cred_generic_field type='select' class='form-control' field='class-start-time-hours']
      {
      "required":0,
      "default":["00"],
      "options":[{"value":"00","label":"00"},{"value":"01","label":"01"},{"value":"02","label":"02"},{"value":"03","label":"03"},{"value":"04","label":"04"},{"value":"05","label":"05"},{"value":"06","label":"06"},{"value":"07","label":"07"},{"value":"08","label":"08"},{"value":"09","label":"09"},{"value":"10","label":"10"},{"value":"11","label":"11"},{"value":"12","label":"12"},{"value":"13","label":"13"},{"value":"14","label":"14"},{"value":"15","label":"15"},{"value":"16","label":"16"},{"value":"17","label":"17"},{"value":"18","label":"18"},{"value":"19","label":"19"},{"value":"20","label":"20"},{"value":"21","label":"21"},{"value":"22","label":"22"},{"value":"23","label":"23"},{"value":"24","label":"24"}]
      }
      [/cred_generic_field]
    </div>
    <div class="col-md-6">
      <label for="%%FORM_ID%%_class-start-time-minutes">[cred_i18n name='class-start-time-minutes-label']Minutes[/cred_i18n]</label>
      [cred_generic_field type='select' class='form-control' field='class-start-time-minutes']
      {
      "required":0,
      "default":["00"],
      "options":[{"value":"00","label":"00"},{"value":"05","label":"05"},{"value":"10","label":"10"},{"value":"15","label":"15"},{"value":"20","label":"20"},{"value":"25","label":"25"},{"value":"30","label":"30"},{"value":"35","label":"35"},{"value":"40","label":"40"},{"value":"45","label":"45"},{"value":"50","label":"50"},{"value":"55","label":"55"}]
      }
      [/cred_generic_field]
    </div>
  </div>
</div>
[cred_generic_field type='checkbox' field='class-advanced-settings']
{
"required":0,
"default":"",
"label":"Edit Advanced Settings?"
}
[/cred_generic_field]
[cred_show_group if="( $(class-advanced-settings) eq '1' )" mode="fade-slide"]
<div class="form-group">
  <label for="%%FORM_ID%%_class-start-date">[cred_i18n name='class-start-date-label']Start Date[/cred_i18n]</label>
  [cred_field field='class-start-date' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="form-group">
  <div class="row">
    <div class="col-md-6">
      <label for="%%FORM_ID%%_class-recurring">[cred_i18n name='class-recurring-label']Recurring[/cred_i18n]</label>
      [cred_field field='class-recurring' force_type='field' class='form-check-input' output='bootstrap']
    </div>
    <div class="col-md-6">
      <label for="%%FORM_ID%%_class-make-ups-allowed">[cred_i18n name='class-make-ups-allowed-label']Make Up's Allowed?[/cred_i18n]</label>
      [cred_field field='class-make-ups-allowed' force_type='field' class='form-check-input' output='bootstrap']

    </div>
  </div>
</div>
<div class="form-group">
  <label for="%%FORM_ID%%_class-cost">[cred_i18n name='class-cost-label']Cost (Advanced)[/cred_i18n]</label>
  [cred_field field='class-cost' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="form-group">
  <label for="%%FORM_ID%%_class-capacity">[cred_i18n name='class-capacity-label']Capacity (Advanced)[/cred_i18n]</label>
  [cred_field field='class-capacity' force_type='field' class='form-control' output='bootstrap']
</div>
[/cred_show_group]
<div class="row">
  <div class="col-md-6">
    [cred_field field='form_submit' output='bootstrap' value='Save' class='btn btn-primary btn-lg btn-block']
  </div>
  <div class="col-md-6">
    <button type="button" class="btn btn-secondary btn-lg btn-block" data-dismiss="modal">Cancel</button>
  </div>
</div>
[/credform]

Javascript:

// define our handler in the global scope.
function handleConditionalGroupDisplay(modal){
    var $modal = jQuery(modal);
    $modal.find('input[data-wpt-name="class-advanced-settings"]').off('change').on('change', function(){
      var checkbox = jQuery(this);
      var form = jQuery(this.form)
      var group = form.find('.cred-group')

      // reset forms styles
      group.find('.js-wpt-field-items').removeAttr('style');

      // test checkbox value
      if ( checkbox.is(':checked') ){
        // show the group
        group.removeClass('wpt-conditional-hidden').addClass('wpt-conditional-visible').show()
        // enable the checkboxes
        group.find('input').removeAttr('disabled')
      } else {
        // hide the group
        group.removeClass('wpt-conditional-visible').addClass('wpt-conditional-hidden').hide()
        // disable the checkboxes
        group.find('input').attr('disabled', "")
      }
    }).trigger('change')
  }
/*
(function($){
  function handleModalShow(){
    $('.modal').off('show.bs.modal').on('show.bs.modal', function (e) {
      handleConditionalGroupDisplay(e.currentTarget);
    })
  }
  setInterval( handleModalShow, 2 * 1000)
})( jQuery )*/

I'd really appreciate it if someone could shed some light on why this isn't working please.

#2264773

Sorry, ignore the commented JS code, that's an error in my upload and not representative of how it actually is but the website won't let me edit my original post.

#2265275

Hi,

Thank you for contacting us and I'd be happy to assist.

I can see the modal window on the Gym post type archive page from your other ticket, but there is no edit form inside the modal. Most probably, that is because I'm not logged in.

Can you please share temporary admin login details, in reply to this message?
( access details are removed from a ticket when it is resolved/closed )

If this generic field in question is on some different page, please also include its link.

Note: Your next reply will be private and it is recommended to make a complete backup copy, before sharing the access details.

regards,
Waqar

#2267103

Thank you for sharing these details.

During troubleshooting, I noticed that script from Jamal was working correctly in the "Edit Class" form.
( I've added the script in this form's "JS editor" )

But, the conditional field group in the "New Class" form was not showing correctly
( even though it shouldn't need the custom script at all, since it is not inside the view and is not affected by the AJAX )

Then I noticed that the generic field "class-advanced-settings" in this form was set without any value:


[cred_generic_field type='checkbox' field='class-advanced-settings']
{
"required":0,
"default":"",
"label":"Edit Advanced Settings?"
}
[/cred_generic_field]

I've set it to have a default value '1' and it started working too:
( and this will continue to work even if you remove the custom script )


[cred_generic_field type='checkbox' field='class-advanced-settings']
{
"required":0,
"default":"1",
"label":"Edit Advanced Settings?"
}
[/cred_generic_field]

Note: You may wonder why the same generic field works in the form "Edit Class" without any value. The reason for that is that by default the Toolset's conditional field group evaluation relies on the field value ( e.g. [cred_show_group if="( $(class-advanced-settings) eq '1' )" mode="fade-slide"] ), but in that form we are manipulating the display though the custom script that detects checked/unchecked state and not the value.

#2269443

Hi Waqar,

Thanks for taking a look into this, I can confirm that it is indeed working now, but could I ask a few follow-up questions to try and help avoid this in the future, as I still don't quite understand why this has been an issue.

You say that the "New Class" form should work out of the box as it is not on a View and as such shouldn't be affected by the AJAX which we are thinking is the source of the issues here. But both of these forms are on the Archive page in this instance and loaded in modals, so surely that means you'd expect them both to work naturally? The only difference between the two is that the "New Class" form is outside of the archives "wpv-loop tags" and the "Edit Class" forms are within the loop content template. Could this be relevant?

I still don't understand why the two forms behave differently as the "New Class" form works without the JS, and yet the "Edit Class" form requires it even if I set the default value. I get that the value is needed for the script to work for whatever reason, but what is the difference between the two forms that is causing the script to be necessary in the first place? Is it because the "Edit Class" form is within the Table as I suggested above?

Finally, the generic field default value is confusing me. Why is the value of "1" required? Surely with a checkbox, this is setting the state to checked and zero is unchecked, but on the front end, the checkbox is starting unchecked even though it has a default value of 1. This doesn't seem to make sense, I've tried it with a zero and it definitely doesn't work.

Once again, many thanks for helping me with this, but I'd really appreciate it if you could elaborate on these points please.

#2270277

Thanks for the update and glad that it is working now.

For clarity, I'll explain both the concerns in separate points:

1. When a page loads, Toolset forms associate certain event/listener with the form input field, which is set as a source/trigger for a conditional field group.

But, if the HTML for that input field is reloaded through an AJAX request or changed through some other script, that association is broken and the conditional field group no longer responds to the changes to that triggering input field.

This is why you need the custom script from Jamal for the edit form that is loaded inside the archive loop, but not for the add new form, that is outside the archive loop.

A quick test will make this more clear:

a). From the JS editor of the "Class Archive" remove or comment out the following script line:


$('.table').footable();

As a result, the "footable" script won't initialize on the table of the archive's loop.

b). From the JS editor of the "Edit Class" form, remove or comment out the script that Jamal provided.

c). Lastly, fix the generic field "class-advanced-settings" in this form, by setting the default value to "1":
( you should keep this change even after this test is completed and more on this in the next point )


[cred_generic_field type='checkbox' field='class-advanced-settings']
{
"required":0,
"default":"1",
"label":"Edit Advanced Settings?"
}
[/cred_generic_field]

Now, when you'll check the "Classes" archive page on the front-end, you'll see that the conditional field groups in both these forms will be working as expected, even without Jamal's script. That is because "footable" script won't be executing on the archive's loop.
( after the test feel free to revert the changes made in the first two steps )

2. I can understand how the use of the word "default value" for a generic checkbox field can cause some confusion. But actually, in this case, the default value corresponds with the checkbox field's "value" attribute ( ref: hidden link ) and not with its checked or unchecked state.

For this reason, when no default value is passed in the generic field's code, the checkbox input field is generated in the form, but its value attribute is empty.

I hope this explanation will make this more clear.

#2275727

Ah, so the fact that a script is being called that runs on the View / Table that is causing AJAX reloads is breaking the conditional logic. That finally makes sense! Thank you for explaining this for me.

One final question then, is there a "best practice" way of implementing these kinds of multiple scripts to help minimise the need for such workarounds? Just wondering if there's a better way of getting these things working with Toolset's workflow.

#2276049

Thanks for writing back.

When external or third-party scripts are involved, there is no particular "best practice" or "rule of thumb", I'm afraid. Cases like these, need to be handled on a case-to-case basis, depending on the nature of the conflict.

#2277723

My issue is resolved now. Thank you!