Question

I have a page that needs to create dynamic form fields as often as the user needs, and I am trying to use Ajax to tie it in to my database for faster form entry and to prevent user typos.

So, I have put my Ajax returned data into popup div, the user selects, then the form field is filled in. The problem comes on the cloned fields. They don’t seem to want to bring up the popup div when focused. I am thinking it is something to do with when they get created/added to the DOM.

Here is my JS that creates the clones:

$(document).ready(function() {
    var regex = /^(.*)(\d)+$/i;
    var cloneIndex = $(".clonedInput").length;

    $("button.clone").live("click", function(){
        $(this).parents(".clonedInput").clone()
            .appendTo("#course_container")
            .attr("id", "clonedInput" +  cloneIndex)
            .find("*").each(function() {
                var id = this.id || "";
                var match = id.match(regex) || [];
                if (match.length == 3) {
                    this.id = match[1] + (cloneIndex);
                }
        });
        cloneIndex++;
        numClones=cloneIndex-1;
        //alert("numClones "+numClones);
    });

Here is where I expect to be able to get focus on the correct cloned field and call the popup. The baker_equiv0 id is original code, whereas baker_equiv1 is the first clone.

$('#baker_equiv0').focus(function() { \\ THIS CODE WORKS
$('.popup').fadeIn(500);
$('#results').empty();
// document.enter_data.baker_equiv1.value="test"; THIS LINE WORKS
//alert("numClones "+numClones);
                }); 

$('#baker_equiv1').focus(function() { // THIS DOESN'T EVER FIRE
alert("numClones "+numClones);
$('.popup').fadeIn(500);
$('#results').empty();
}); 

Here is the HTML with the form:

<label for="baker_equiv" class="">Baker Equivalent: <span class="requiredField">*</span></label>
<input type="text" class="cinputsa" name="baker_equiv[]" id="baker_equiv0" size="8" ONKEYUP="get_equiv(this.value);">

If I put this in the HTML code above, it works fine: onfocus="alert(this.id)"

I’d also be interested in how to adjust the JS code to work based on the id array created rather than having to copy code for each potential set of fields clones, i.e., baker_equiv[] rather than baker_equiv0, baker_equiv1, etc.

Thanks all!

Answer 1

After making some assumptions about the HTML, I came up with this :

HTML :

<div id="course_container">
    <div class="cloneMe"><!-- wrapper could be any block or inline element eg. <span> or <form> -->
        <label for="input0">Baker Equivalent: <span class="requiredField">*</span></label>
        <input id="input0" type="text" class="cinputsa needsPopup" name="baker_equiv[]" size="8" />
        <button class="clone">Clone</button>
    </div>
</div>

Javascript :

$(function() {
    //*** fixed data ***
    var $$ = { //cache of jQuery objects
            course_container: $("#course_container"),
            popup : $("#popup"), //presumably only one popup, so it gets an id
            results: $("#results")
        },
        cloneIndex = 0, // adjust as required to reflect highest index used in the initial HTML
        input_id_prefix = 'input';

    //*** event handlers ***
    $$.course_container.on('click', 'button.clone', function() {
        var $clone = $(this).closest('.cloneMe').clone(true, true),
            id = input_id_prefix + ++cloneIndex;
        $clone.find('input').attr('id', id).end().find('label').attr('for', id).end().appendTo($$.course_container);
    });
    $$.course_container.on('focus', 'input.needsPopup', function() {
        $$.popup.fadeIn(500);
        $$.results.empty();
    }).on('keyup', get_equiv);
});

DEMO

NOTES

• clone(true,true) clones deep with data and events.
• id generation is simplified.
• The input fields need an id for <label for="..."> to bite on. If you can do without the labels’ for functionality then you should avoid the need for ids completely.
• clone-button click and input-field keyup and input-field focus handing is delegated to #course_container.
• get_equiv() is attached by name and in the demo has a simple dummy statement to deomonstrate that it is called.