Welcome, Guest
Username: Password: Remember me

TOPIC: Duplicate buttons in multiple Array workaround example

Duplicate buttons in multiple Array workaround example 3 years 5 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!



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

Duplicate buttons in multiple Array workaround example 3 years 5 months ago #73480

  • Mazi
  • Mazi's Avatar
  • Online
  • LimeSurvey Team
  • Posts: 5692
  • Thank you received: 329
  • Karma: 255
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.

Duplicate buttons in multiple Array workaround example 3 years 5 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.

Duplicate buttons in multiple Array workaround example 3 years 5 months ago #73517

  • Mazi
  • Mazi's Avatar
  • Online
  • LimeSurvey Team
  • Posts: 5692
  • Thank you received: 329
  • Karma: 255
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.

Duplicate buttons in multiple Array workaround example 3 years 5 months ago #73520

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

Duplicate buttons in multiple Array workaround example 3 years 5 months ago #73588

  • Mazi
  • Mazi's Avatar
  • Online
  • LimeSurvey Team
  • Posts: 5692
  • Thank you received: 329
  • Karma: 255
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.347 seconds