Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi all,
Vanilla are planning an update to the site on April 24th (next Wednesday). It is a major PHP8 update which is expected to boost performance across the site. The site will be down from 7pm and it is expected to take about an hour to complete. We appreciate your patience during the update.
Thanks all.

Dynamic Drop Downs

  • 10-02-2014 12:02pm
    #1
    IamtheWalrus
    Closed Accounts Posts: 6,075 ✭✭✭


    I have a drop down that holds a number from 0-8. It is used to allow a user to select the number of children they have. When the user selects, say 4, 4 drop downs appear below the child number drop down. They appear in banks of 2. So if I select 8, I get 4 rows of 2. If I select 3, I get 2 rows but the second row will only have 1 drop down.

    If the user selects 4, I get 2 rows x 2. If the user then selects, 5, I want another drop down to appear - the values in the first 4 must remain.

    Can anyone suggest a way of implementing this? I am able to make the initial selection work but not the adding more scenario above.

    I'm using jQuery, Javascript and HTML.


Comments

  • #2
    IamtheWalrus
    Closed Accounts Posts: 6,075 ✭✭✭IamtheWalrus


    Please?


  • #3
    oscarBravo
    Technology & Internet Moderators Posts: 28,791 Mod ✭✭✭✭oscarBravo


    If you select a number of children that's greater than the number shown, then you just need to add more dropdowns in the same way you added the initial number - so if you initially selected (say) 3, you initially added three dropdowns dynamically to the DOM; so if you now select (say) 5, you dynamically add two more.

    Of course, you also need to deal with the possibility of selecting a smaller number, and having to remove the last n dropdowns, but that's a similar process.

    Given that you've already figured out how to add the initial dropdowns, where are you getting stuck adding more?


  • #4
    ChRoMe
    Registered Users Posts: 2,021 ✭✭✭ChRoMe


    IamtheWalrus wrote: »
    Please?

    Posting some code would be a good start to be honest.


  • #5
    IamtheWalrus
    Closed Accounts Posts: 6,075 ✭✭✭IamtheWalrus


    I will post some code later when I've it tidied up but for now my issue is as follows:

    I have done what oscarBravo has suggested. The issue is when the user adds say 3 drop downs (they're printed), then adds 5 (adding 2 to the existing 3). My plan is to iterate through the existing 3 and only start printing to the screen from 4 onwards. BUT I don't know how to get a hold of the existing html (that has 3 drop downs in it). I need a handle on this HTML to be able to check what's already been printed, using the method below:

    [HTML]function doesExists(element) {
    if ($('.' + element).length > 0) {
    return true;
    }
    return false;
    }[/HTML]


  • #6
    IamtheWalrus
    Closed Accounts Posts: 6,075 ✭✭✭IamtheWalrus


    [HTML]function addChildAgesvv(row, roomNumber, childageArr) {
    var roomCount = roomNumber;
    var childCount = selectedValue(row);
    if (childCount == 0) {
    for ( var i = 1; i <= 8; i++) {
    deleteChildRoom('childRoomAgeRow_' + roomCount + '_' + i); //TODO: fix this
    }
    } else if (childCount > 0) {
    var new_row = '';
    var rowCounter = 1;

    for ( var i = 1; i <= childCount; i++) {
    var rowNumber = getTableRowForChildCount(i);

    if(doesExists('childRoomAgeRow_' + roomCount + "_" + rowNumber) ||
    new_row.indexOf('childRoomAgeRow_' + roomCount + "_" + rowNumber)>=0) {

    if(!doesExists('childRoomAge_' + roomCount + "_" + rowNumber + "_2") ||
    new_row.indexOf('childRoomAge_' + roomCount + "_" + rowNumber + "_2")<0) {
    new_row+=appendToExistingRow(roomCount, rowCounter++) ;
    }
    }else{
    new_row+=newRow(roomCount, i) ;
    }
    }
    $(".roomChoice_" + roomCount).after(new_row);
    }

    return false;
    }[/HTML]

    [HTML]function newRow(roomCount, rowCounter) {
    var rowIndex = roomCount + '_' + rowCounter;

    var newRow = '<tr class="childRoomAgeRow_' + rowIndex + '">'
    +'<td colspan="2" align="right">' + gChildAge + '</td>'
    + '<td class="childRoomAge_' + rowIndex + '_1" >'
    + '<select class="childRoom_' + rowIndex + '_1"' + '></select>'
    +'</td>';

    return newRow;
    }[/HTML]

    [HTML]function appendToExistingRow(roomCount, rowCounter) {
    var rowIndex = roomCount + '_' + rowCounter + '_2';

    var appendedRow = '<td class="childRoomAge_' + rowIndex + '" >'
    + '<select class="childRoom_' + rowIndex + '"' + '></select>'
    +'</td>';

    return appendedRow;
    }[/HTML]

    [HTML]function deleteChildRoom(element) {
    if (doesExists(element)) {
    $("." + element).remove();
    }
    return false;
    }[/HTML]

    [HTML]function getTableRowForChildCount(childCount){
    var tableRow;

    if(childCount>6){
    tableRow = 4;
    } else if(childCount>4) {
    tableRow = 3;
    } else if(childCount>2) {
    tableRow = 2;
    } else{
    tableRow = 1;
    }

    return tableRow;
    }[/HTML]


  • Advertisement
  • #7
    IamtheWalrus
    Closed Accounts Posts: 6,075 ✭✭✭IamtheWalrus


    I can explain it if you want but hopefully it's explanatory.


  • #8
    IamtheWalrus
    Closed Accounts Posts: 6,075 ✭✭✭IamtheWalrus


    I'm ready to take questions.


  • #9
    IamtheWalrus
    Closed Accounts Posts: 6,075 ✭✭✭IamtheWalrus


    I figured it out.

    [HTML]function addChildAges(row, rowNumber, childageArr) {
    var counter = rowNumber;
    var val = selectedValue(row);
    if (val == 0) {
    deleteChildRoom('childRoomAgeRow_' + rowNumber);// Deleting the complete Child Ages row when one element exists
    } else if (val > 0) {
    // check if the Child Room exists .
    if (!doesExists('childRoomAgeRow_' + counter)) {
    var new_row = '';
    for ( var i = 1; i <= val; i++) {
    var addnewrow = (i%2==1);
    var showlabel = (i==1);
    new_row += (addnewrow ? newRow(counter, showlabel) : '') + addChildAgesDropDown(counter + "_" + i);// passing number child rooms to be created
    }
    $(".roomChoice_" + counter).after(new_row);
    for ( var i = 1; i <= val; i++) {
    buildSelectionJQuery(" |2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18","00|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18",childageArr==null?null:childageArr[i-1],true,"childRoom_" + counter + "_" + i);
    }
    } else {
    for ( var a = 1; a <= val; a++) {
    if (!doesExists('childRoomAge_' + counter + "_" + a)) {
    var addnewrow = (a%2==1);
    var showlabel = (a==1);
    // check if the room two needs to be created
    if (addnewrow) {
    var new_child_room = newRow(counter, showlabel) + addChildAgesDropDown(counter + "_" + a);
    $(".childRoomAgeRow_" + counter + ":last").after(new_child_room); // Creating the next child record on a new row
    } else {
    var new_child_room = addChildAgesDropDown(counter + "_" + a);
    $(".childRoomAgeRow_" + counter + ":last").append(new_child_room); // Creating the next child record in the same row
    }
    buildSelectionJQuery(" |2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18","00|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18",0,true,"childRoom_" + counter + "_" + a);
    }
    } // a for add
    for ( var d = 8; d > val; d--) {
    if (doesExists('childRoomAge_' + counter + "_" + d)) {
    var deleterow = (d%2==1);
    if (deleterow) {
    $('.childRoomAge_' + counter + "_" + d).parent().remove();
    } else {
    deleteChildRoom('childRoomAge_' + counter + "_" + d);
    }
    }
    } // d for delete
    }
    }
    return false;
    }

    function newRow(counter, showlabel) {
    return '<tr class="childRoomAgeRow_' + counter + '">'
    +'<td colspan="2" align="right">' + (showlabel?gChildAge:' ') + '</td>';
    }[/HTML]


Advertisement