Question

I am adding a row using the clone() function and then am having to rename all of the divs in the newly cloned row. I was trying to do that this way:

// Add button for new TOEFL entry
        $("#add-TOEFL").button().click(function( event ){
                event.preventDefault();

                var tag = 'TOEFL',
                    testDate = $("#TOEFLtestDate-0").val(),
                    reading = $("#readingTOEFLScore-0").val(),
                    listening = $("#listeningTOEFLScore-0").val(),
                    speaking = $("#speakingTOEFLScore-0").val(),
                    writing = $("#writingTOEFLScore-0").val(),
                    applicantId = $("#applicantId").val(),
                    dataString = 'applicantId=' + applicantId + '&dateTaken=' + testDate + '&listeningScore=' + listening + '&readingScore=' + reading + '&speakingScore=' + speaking + '&writingScore=' + writing;

                // Insert New Record
                $.ajax({
                    type: "POST",
                    url: "ajax/insertEntry.cfm?xAction=TOEFL",
                    data: dataString,
                    success: function(newIdx){

                        // Make sure returned value is a number
                        newId = jQuery.trim(newIdx) * 1;

                        // clone new row
                        newDivId = tag + '-Entry-' + newId;
                        newRow = $('#' + tag + '-Entry-0').clone().attr('id', newDivId);
                        console.log('New row cloned. DivId: ' + newDivId);

                        // get all ids
                        $("#" + newDivId).find("[@id$='-0']").each(function(){
                            selectedDivId = $(this).attr("id");
                            alert(selectedDivId);   
                        })  

                    }
                })

Here is the HTML markup:

<div id="TOEFL-Entry-0" style="display: none" >          
        <p style="margin:5px 0 0 0">
            Taken  <input name="TOEFLtestDate-0" type="text" id="TOEFLtestDate-0" class="inputDateField" style="margin-left:5px; margin-right:15px;"/>
            Reading <input name="readingTOEFLScore-0" type="text" id="readingTOEFLScore-0" class="inputTinyScoreField" style="margin:0 8px 0 5px"/>
            Listening <input name="listeningTOEFLScore-0" type="text" id="listeningTOEFLScore-0" class="inputTinyScoreField" style="margin:0 8px 0 5px"/>
            Speaking <input name="speakingTOEFLScore-0" type="text" id="speakingTOEFLScore-0" class="inputTinyScoreField" style="margin:0 8px 0 5px"/>
            Writing <input name="writingTOEFLScore-0" type="text" id="writingTOEFLScore-0" class="inputTinyScoreField" style="margin:0 8px 0 5px"/>
            <button id="add-TOEFL-0">Add</button>
        </p>
    </form>
</div>

Even thought there should be a bunch of ids that match this criteria, I am not seeing the alert.

What am I doing wrong?

Josh

Answer 1

Thanks for all the help.

The problem was actually that the cloned row was not shown yet and needed to be referenced as ‘newRow’ instead of as $(“#” + newDivId).

Once I changed that, it works like a champ.

Not quite sure why that is the case, but that makes it worse.