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

Question

Question

Classic Designer JavaScript changed/broken in Update 4

Forms
Updated January 2, 2023
asked on December 28, 2022 • Show version history

I have updated our DEV Forms server to Update 4. I have found that JavaScript in Classic Designer forms no longer work. 

For example...

$('#FieldLabel10\\(2\\).cf-label').text('Resident2 First Name').change();
$('#Field10\\(2\\).cf-medium').removeAttr('required');

This used to change the field label to "Resident2 First Name" and it would no longer be a required field. Note, these fields are in a collection.

The Google Address lookup JavaScript no longer works too. Amongst many other JavaScripts that no longer work. **Google Address JavaScript works okay in a newly created Classic Form. Something else in the JavaScript section is breaking it in my original form.**

I know update 4 is new, but I would have thought that the Classic Designer interface would not have changed so much that JavaScript is broken.

0 0

Answer

SELECTED ANSWER
replied on January 2, 2023

Again, thanks, Rui. I figured out what I had done wrong just after I posted above. I removed the extra document ready in the middle.

$(document).ready(function(){
  // create container for cloned nav tabs
  let container = $('<div style="display:none !important;"></div>');
  
  // pagination tabs
  $('.cf-pagination-tabs li').each(function(){
    // clone tab to hidden container
    var c = $(this).clone(true, true);
    container.append(c);
    
    // remove/replace event handlers
    $(this).off().on('click',function(){
      // get results of page validation
      if (pageValid()) {
        $(c).click(); // trigger click on hidden tab
        if ($(this).is('li')) $(this).addClass('active'); // make tab active
      }
    });
  });
  $('.cf-pagination-tabs').parent().append(container);
  
  // navigation buttons
  $('.cf-pagination-btn').each(function(){
    // create container for nav buttons
    var box = $('<div style="display:none !important;"></div>');
    
    $(this).find('input').each(function(){
      // clone button to hidden container
      var c = $(this).clone(true,true);
      box.append(c);
      
      // remove/replace event handlers
      $(this).off().on('click',function(e){
        if (pageValid()) $(c).click(); // trigger click on hidden btn
      });
    });
    
    $(this).append(box);
  });
  

// page validation function
function pageValid(flagErrors = true){
  var valid = true; // default output
  
  // validate fields on active page
  $('.cf-page.active :input:not([readonly]):visible').each(function(){
    // show validation errors
    $(this).parsley().validate();
    
    // change output for invalid field if none detected
    if (valid && !$(this).parsley().isValid()) {
      $(this).focus(); // focus on first error
      valid = false; // flag error
    }
  });

  return valid;
}
});

 

0 0

Replies

replied on December 29, 2022

Hi Jonathan,

Did you mean Forms 11 Update 3?

And can you give more detail on how you configured the form and where you got the issue? The classic form designer itself has some big changes but when fill form there is no breaking change.

The custom script still works on fill form:

0 0
View 1 previous reply
replied on January 2, 2023

Hi Rui, 

After further work on this issue, tidying up my amateur JavaScript, most of it works again. 

However, there is one section of my JavaScript that still "breaks". This JavaScript basically prevents a user from proceeding to the next tab without filling all required fields.

//Resident2 Address Details
$(document).ready(function () {
    // create container for cloned nav tabs
    let container = $('<div style="display:none !important;"></div>');

    // pagination tabs
    $('.cf-pagination-tabs li').each(function () {
        // clone tab to hidden container
        var c = $(this).clone(true, true);
        container.append(c);

        // remove/replace event handlers
        $(this).off().on('click', function () {
            // get results of page validation
            if (pageValid()) {
                $(c).click(); // trigger click on hidden tab
                if ($(this).is('li'))
                    $(this).addClass('active'); // make tab active
            }
        });
    });
    $('.cf-pagination-tabs').parent().append(container);

    // navigation buttons
    $('.cf-pagination-btn').each(function () {
        // create container for nav buttons
        var box = $('<div style="display:none !important;"></div>');

        $(this).find('input').each(function () {
            // clone button to hidden container
            var c = $(this).clone(true, true);
            box.append(c);

            // remove/replace event handlers
            $(this).off().on('click', function (e) {
                if (pageValid())
                    $(c).click(); // trigger click on hidden btn
            });
        });

        $(this).append(box);
    });

});

With Update 3, this script now prevents the user from proceeding to the next tab completely. 

0 0
replied on January 2, 2023

Hi Jonathan,

The part of code you posted lacked the "pageValid" function; I added one on my side and it worked as expected:

function pageValid(){
    // Target only the active page
    var e = '.cf-page.active';

    // Iterate through all field types to trigger validation
    $.each([' input',' select',' textarea'],function(index,value){
      // Iterate through each visible field
      $(e + value + ':not([readonly]):visible').each(function(index2,value2){
        $(value2).parsley().validate();
      });
    });
  
    if($(e + ' .parsley-errors-list:visible li').length > 0){
        // Place focus on first invalid field
        $(e + ' .parsley-errors-list:visible li').eq(0).closest('.cf-field')
              .find('input,select,textarea').eq(0).focus();
        return false;
    } else {
        return true;
    }
}

Can you post your "pageValid" function so we can check why it won't work?

0 0
replied on January 2, 2023

Thanks Rui,

 

$(document).ready(function(){
  // create container for cloned nav tabs
  let container = $('<div style="display:none !important;"></div>');
  
  // pagination tabs
  $('.cf-pagination-tabs li').each(function(){
    // clone tab to hidden container
    var c = $(this).clone(true, true);
    container.append(c);
    
    // remove/replace event handlers
    $(this).off().on('click',function(){
      // get results of page validation
      if (pageValid()) {
        $(c).click(); // trigger click on hidden tab
        if ($(this).is('li')) $(this).addClass('active'); // make tab active
      }
    });
  });
  $('.cf-pagination-tabs').parent().append(container);
  
  // navigation buttons
  $('.cf-pagination-btn').each(function(){
    // create container for nav buttons
    var box = $('<div style="display:none !important;"></div>');
    
    $(this).find('input').each(function(){
      // clone button to hidden container
      var c = $(this).clone(true,true);
      box.append(c);
      
      // remove/replace event handlers
      $(this).off().on('click',function(e){
        if (pageValid()) $(c).click(); // trigger click on hidden btn
      });
    });
    
    $(this).append(box);
  });
  
});
$(document).ready(function(){
// page validation function
function pageValid(flagErrors = true){
  var valid = true; // default output
  
  // validate fields on active page
  $('.cf-page.active :input:not([readonly]):visible').each(function(){
    // show validation errors
    $(this).parsley().validate();
    
    // change output for invalid field if none detected
    if (valid && !$(this).parsley().isValid()) {
      $(this).focus(); // focus on first error
      valid = false; // flag error
    }
  });

  return valid;
}
});

 

0 0
SELECTED ANSWER
replied on January 2, 2023

Again, thanks, Rui. I figured out what I had done wrong just after I posted above. I removed the extra document ready in the middle.

$(document).ready(function(){
  // create container for cloned nav tabs
  let container = $('<div style="display:none !important;"></div>');
  
  // pagination tabs
  $('.cf-pagination-tabs li').each(function(){
    // clone tab to hidden container
    var c = $(this).clone(true, true);
    container.append(c);
    
    // remove/replace event handlers
    $(this).off().on('click',function(){
      // get results of page validation
      if (pageValid()) {
        $(c).click(); // trigger click on hidden tab
        if ($(this).is('li')) $(this).addClass('active'); // make tab active
      }
    });
  });
  $('.cf-pagination-tabs').parent().append(container);
  
  // navigation buttons
  $('.cf-pagination-btn').each(function(){
    // create container for nav buttons
    var box = $('<div style="display:none !important;"></div>');
    
    $(this).find('input').each(function(){
      // clone button to hidden container
      var c = $(this).clone(true,true);
      box.append(c);
      
      // remove/replace event handlers
      $(this).off().on('click',function(e){
        if (pageValid()) $(c).click(); // trigger click on hidden btn
      });
    });
    
    $(this).append(box);
  });
  

// page validation function
function pageValid(flagErrors = true){
  var valid = true; // default output
  
  // validate fields on active page
  $('.cf-page.active :input:not([readonly]):visible').each(function(){
    // show validation errors
    $(this).parsley().validate();
    
    // change output for invalid field if none detected
    if (valid && !$(this).parsley().isValid()) {
      $(this).focus(); // focus on first error
      valid = false; // flag error
    }
  });

  return valid;
}
});

 

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

Sign in to reply to this post.

Details
Related Posts
Loading ...