Welcome, Guest
Username: Password: Remember me

TOPIC: Duplicate buttons in multiple Array workaround example

Duplicate buttons in multiple Array workaround example 2 years 6 months ago #73479

  • jsmello
  • jsmello's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 32
  • Karma: 0
Hi,

I'm using the following solution in my survey.
 
$(document).ready(function() {
 
        // A function to add or remove rows of an Array (Multi Flexible)(Text) question
        function varLengthArray(qID) { 
 
            if ($('#question'+qID+'').length > 0 ) {
 
                // The HTML content of the Add/Remove elements - modify as you wish
                var addContent = '[+]';
                var removeContent = '[-]';
 
                // Create the Add and Remove elements & insert them
                var el1 = document.createElement('div');
                el1.setAttribute('id','addButton'+qID);
                document.body.appendChild(el1);
                var el2 = document.createElement('div');
                el2.setAttribute('id','removeButton'+qID);
                document.body.appendChild(el2);
 
                // Move them to after the array
 
                $( 'div#addButton'+qID ).appendTo( $( '#question' + qID + ' table.question').parent() );
                $( 'div#removeButton'+qID ).appendTo( $( '#question' + qID + ' table.question').parent() );
 
                // Insert their HTML
                $( 'div#addButton'+qID ).html( addContent );
                $( 'div#removeButton'+qID ).html( removeContent );
 
                // Style the elements - you can modify here if you wish
                $( 'div#addButton'+qID ).css({
                    'margin':'10px 0 0 10px',
                    'padding':'1px',
                    'text-align':'center',
                    'font-weight':'bold',
                    'width':'auto',
                    'cursor':'pointer',
                    'float':'left'
                });
 
                $( 'div#removeButton'+qID ).css({
                    'margin':'10px 0 0 10px',
                    'padding':'1px',
                    'text-align':'center',
                    'font-weight':'bold',
                    'width':'auto',
                    'cursor':'pointer',
                    'float':'left'
                });
 
                // Initially hide the Remove element
                $( 'div#removeButton'+qID ).hide();
 
                // Call the functions below when clicked
                $( 'div#addButton'+qID ).click(function (event) {
                    addRow(qID);
                });
 
                $( 'div#removeButton'+qID ).click(function (event) {
                    removeRow(qID);
                });
 
                // Function to add a row, also shows the Remove element and hides the 
                //Add element if all rows are shown
                function addRow(qID) {
                    var arrayRow = '#question' + qID + ' table.question tbody';
                    /*I changed here to  - 2*/
                    var rowCount = $( arrayRow ).size() - 2; 
                    $( arrayRow + '[name="hidden"]:first' ).attr('name', 'visible').show();
                    $( 'div#removeButton'+qID ).show();
                    if ( $( arrayRow + ':eq(' + rowCount + ')' ).attr('name') == 'visible' )  {
                        $( 'div#addButton'+qID ).hide();
                    }
                }
                // Function to remove a row, also clears the contents of the removed row, 
                // shows the Add element if the last row is hidden and hides the Remove 
                // element if only the first row is shown
                function removeRow(qID) {
                    var arrayRow = '#question' + qID + ' table.question tbody';
                    $( arrayRow + '[name="visible"]:last input[type="text"]' ).val('');
                    $( arrayRow + '[name="visible"]:last' ).attr('name', 'hidden').hide();
                    $( 'div#addButton'+qID ).show();
                    /*I changed here to :eq(3)*/
                    if ( $( arrayRow + ':eq(3)' ).attr('name') == 'hidden' )  {
                        $( 'div#removeButton'+qID ).hide();
                    }
                }
 
                // Just some initialization stuff
                var arrayRow = '#question' + qID + ' table.question tbody';
                var rowCount = '';
 
                // Initially hide all except first row or any rows with populated inputs
                $( arrayRow ).each(function(i) {
                    /* I changed here to 2*/
                    if ( i > 2 ) {
                        // We also need to give the hidden rows a name cause IE doesn't 
                        // recognize jQuery :visible selector consistently
                        $( this ).attr('name', 'hidden').hide();
                        $('input[type=text]', this).each(function(i) {
                            if ($(this).attr('value') != '') {
                                $(this).parents('tbody:eq(0)').attr('name', 'visible').show();
                                $( 'div#removeButton'+qID ).show();
                            }
                        });
                        rowCount = i;
                    }
                });
            }
        }
 
        // Call the function with a question ID
        varLengthArray(2557);
    });
 

It was working very well in Firefox, IE and Chrome until I changed to the basic template and, after that, I needed to change some parts of the code to it works.

However, the buttons appear duplicated in Firefox 8.0 and Chrome 16.0, but in IE 6.0 it works well!

duplicate_buttons.PNG


Since now I thanks,
Jefferson Mello.
Last Edit: 2 years 6 months ago by jsmello.
The administrator has disabled public write access.

Re: Duplicate buttons in multiple Array workaround example 2 years 6 months ago #73480

  • Mazi
  • Mazi's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 5324
  • Thank you received: 293
  • Karma: 248
Those templates probably use a different layout/structure which causes the problem.
Can you post a link so we can have a look at the HTML source?

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
The administrator has disabled public write access.

Re: Duplicate buttons in multiple Array workaround example 2 years 6 months ago #73483

  • jsmello
  • jsmello's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 32
  • Karma: 0
What HTML source do you want?

I'm using the basic template of the 1.91+ Build 10951.
The administrator has disabled public write access.

Re: Duplicate buttons in multiple Array workaround example 2 years 6 months ago #73517

  • Mazi
  • Mazi's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 5324
  • Thank you received: 293
  • Karma: 248
Just a link to a sample survey demonstrating this problem.

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
The administrator has disabled public write access.

Re: Duplicate buttons in multiple Array workaround example 2 years 6 months ago #73520

  • jsmello
  • jsmello's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 32
  • Karma: 0
Last Edit: 2 years 6 months ago by jsmello.
The administrator has disabled public write access.

Re: Duplicate buttons in multiple Array workaround example 2 years 6 months ago #73588

  • Mazi
  • Mazi's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 5324
  • Thank you received: 293
  • Karma: 248
That problem is probably related to the different template layout which uses lots of tables. It seems that the [+] sign is added to two of these tables (while at the default template maybe only 1 table exists).
I would need to have a look at all the code details which will take some time and is a little beyond the usual free support. So if you are interested in advanced (paid) coding help, you can drop me a note at This email address is being protected from spambots. You need JavaScript enabled to view it..

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.151 seconds
Donation Image