Combining Two Javascript from Matrix table vs. Side by Side | XM Community
Skip to main content
Question

Combining Two Javascript from Matrix table vs. Side by Side

  • August 28, 2024
  • 6 replies
  • 107 views

Forum|alt.badge.img+1

Hi!  I’m not very knowledgeable about Javascript, so I’m looking for some help.  I have two scripts I’m trying to combine. 

The first image is the script for inserting slashes to make answers appear as dates (00/00/000).  It is formatted for a side-by-side survey question.

The second is to hide lines but have an Add button so the respondent can add lines in a Matrix table as needed.  

Both of them work fine on their own, but when I try and combine them they don’t both work.  I’m not sure if it’s because the first is formatted for Side-by-Side and the second for a Matrix table and there’s something in the code that is specific for those types of tables, or if there is a problem with variable names?  

Thanks for any recommendations you can make!

~Rebekah

 

Here is my attempt at combining the two, but I know it doesn’t work:

Qualtrics.SurveyEngine.addOnload(function()
{
    jQuery("#"+this.questionId+" tr.ChoiceRow:not(:lt(1))").hide();

});
Qualtrics.SurveyEngine.addOnReady(function(){

jQuery("#" + this.questionId + " .InputText").each(function() {
        new Cleave(jQuery(this), {
            date: true,
            delimiter: '/',
            datePattern: ['m', 'd', 'Y']
var that=this.questionId;
jQuery("#"+this.questionId+"tr.ChoiceRow:not(:lt(1))").hide();
jQuery("<input type='button' id='add' value='Add Deployment' name='+' />").insertAfter("#"+this.questionId+" tr.ChoiceRow:last");
jQuery("#add").on('click',function(){
    var c= jQuery("tr.ChoiceRow:visible").length;
jQuery("#"+that+" tr.ChoiceRow:eq("+c+")").show();
    });
});

Qualtrics.SurveyEngine.addOnUnload(function(){
    /* Place your JavaScript here to run when the page is unloaded */
});
 

 

6 replies

Nam Nguyen
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+29
  • QPN Level 8 ●●●●●●●●
  • 1096 replies
  • August 28, 2024

Both of them work fine on their own, but when I try and combine them they don’t both work.  I’m not sure if it’s because the first is formatted for Side-by-Side and the second for a Matrix table and there’s something in the code that is specific for those types of tables

@rebekahn They are not just formatted for type of table, they are formatted for specific questions.

So what you’re trying to do and what is your question looks like?


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 6084 replies
  • August 28, 2024

@rebekahn,

Is you new question a matrix or side-by-side?


Forum|alt.badge.img+1
  • Author
  • 3 replies
  • August 28, 2024

@rebekahn,

Is you new question a matrix or side-by-side?

The new question is a matrix. It should look like the first image when editing the survey, and look like the second image in the preview. These look correct, but I can’t get the slash marks for the dates to appear.

 

 


Forum|alt.badge.img+1
  • Author
  • 3 replies
  • August 28, 2024

Both of them work fine on their own, but when I try and combine them they don’t both work.  I’m not sure if it’s because the first is formatted for Side-by-Side and the second for a Matrix table and there’s something in the code that is specific for those types of tables

@rebekahn They are not just formatted for type of table, they are formatted for specific questions.

So what you’re trying to do and what is your question looks like?

The new question is a matrix. It should look like the first image when editing the survey, and look like the second image in the preview. These look correct, but I can’t get the slash marks for the dates to appear.

 


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 6084 replies
  • August 28, 2024

@rebekahn,

Change this line:

jQuery("#" + this.questionId + " .InputText").each(function() {

to:

jQuery("#" + this.questionId + " [type=text]").each(function() {

 


Nam Nguyen
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+29
  • QPN Level 8 ●●●●●●●●
  • 1096 replies
  • August 28, 2024

@rebekahn The class of text box in matrix question is not .InputText, so just change your Cleave.js code part to  input[id^='QR~QID']

jQuery("#" + this.questionId + " input[id^='QR~QID']").each(function() {
new Cleave(jQuery(this)[0], {
date: true,
delimiter: '/',
datePattern: ['m', 'd', 'Y']
});
});

Hope this helps