Check out the LimeSurvey source code on GitHub!

Duplicate buttons in multiple Array workaround example

More
5 years 2 weeks ago - 5 years 2 weeks ago #73479 by jsmello
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!



Since now I thanks,
Jefferson Mello.
Attachments:
Last Edit: 5 years 2 weeks ago by jsmello.

Please Log in to join the conversation.

More
5 years 2 weeks ago #73480 by Mazi
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)survey-consulting.com'"

Please Log in to join the conversation.

More
5 years 2 weeks ago #73483 by jsmello
What HTML source do you want?

I'm using the basic template of the 1.91+ Build 10951.

Please Log in to join the conversation.

More
5 years 2 weeks ago #73517 by Mazi
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)survey-consulting.com'"

Please Log in to join the conversation.

More
5 years 2 weeks ago - 5 years 2 weeks ago #73520 by jsmello
Last Edit: 5 years 2 weeks ago by jsmello.

Please Log in to join the conversation.

More
5 years 2 weeks ago #73588 by Mazi
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)survey-consulting.com'"

Please Log in to join the conversation.

Imprint                   Privacy policy         General Terms & Conditions         Revocation information and revocation form