CODEWITHSUNDEEP
jqueryhtml
jason dancks
jason dancks

Reputation: 1142

Jquery: cloned elements not attaching to DOM?

I'm in the process of learning jquery with the book JQuery in Action by Bear Bibeault et al.I'm trying to create the DVD advanced search page where you click a button "apply filter, and a selection mini form appears to help you search.

basically it clones the div#templates and puts it in a new div under div#selected along with a button to delete it if desired. So far I can only get the delete button to show up. javascript console in chrome shows no errors. So its simply not attaching. alert() tells me at least the each() function is cycling through the elements, and they all appear there.

jquery:

$(function() {
    $('div#templates').hide();
    $('#addFilterButton').click(function(event) {
        var uniq = Math.random().toString(36).substr(0,10);
        var nnew = $('<div id="div'+uniq+'" class="selected"></div>');
        var button = $('<button type="button" class="filterRemover" title="Remove this filter">X</button>');
        button.click(function(event) {
            $(this).parent('div.selected').remove();
        });
        nnew.append(button);
        var add = $('div#templates').clone().addClass('container'+uniq);
        $(add).children().each(function(){
            $(this).addClass('input'+uniq);
        });
        add.insertAfter(button);
        $('div#selected-filters').append(nnew);     
    });
});

html:

<body>
<fieldset id="field">
<legend>Use this form to do an advanced search for DVDs</legend>
    <div id="selected-filters" class="selected">
    </div>
    <div id="templates">

        <div class="template filterChooser">
            <button type="button" class="filterRemover" title="Remove this filter">X</button>
            <select name="filter" class="filterChooser" title="Select a property to filter">
                <option value="" data-filter-type="none" selected="selected">-- choose a filter --</option>
                <option value="title" data-filter-type="stringMatch">DVD Title</option>
                <option value="category" data-filter-type="stringMatch">Category</option>
                <option value="binder" data-filter-type="numberRange">Binder</option>
                <option value="release" data-filter-type="dateRange">Release Date</option>
                <option value="viewed" data-filter-type="boolean">Viewed?<option>
            </select>
        </div>

        <div class="template stringMatch">
            <select name="stringMatchType">
                <option value="*">contains</option>
                <option value="^">starts with</option>
                <option value="$">ends with</option>
                <option value="=">is exactly</option>
            </select>
            <input type="text" name="term" />
        </div>

        <div class="template numberRange">
            <input type="text" name="numberRange1" class="numeric" size="3" /> <span>through</span>
            <input type="text" name="numberRange2" class="numeric" size="3" />
        </div>

        <div class="template dateRange">
            <input type="text" name="dateRange1" class="dateValue" />
            <span>through</span>
            <input type="text" name="dateRange2" class="dateValue" />
        </div>

        <div class="template boolean">
            <input type="radio" name="booleanFilter" value="true" checked="checked" />
            <span>yes</span>
            <input type="radio" name="booleanFilter" value="false" />
            <span>no</span>
        </div>
    </div>

    <div id="pageContent">
        <h1>DVD Ambassador</h1>
        <h2>Disc Locator</h2>

        <form id="filtersForm" action="/fetchFilteredResults" method="post">
            <fieldset id="filtersPane">
            <legend>Filters</legend>
                <div id="filterPane"></div>
                <div class="buttonBar">
                    <button type="button" id="addFilterButton">Add Filter</button>
                    <button type="submit" id="applyFilterButton">Apply Filter</button>
                </div>
            </fieldset>

            <div id="resultsPane">
                <span class="none">No results displayed</span>
            </div>
        </form>
    </div>
</fieldset>

</body>

Upvotes: 0

Views: 67

Answers (1)

Caner Akdeniz
Caner Akdeniz

Reputation: 1862

It seems like your cloned element is set to hide on this line:

$('div#templates').hide();

So when it gets cloned, it appears hidden. You can set it visible again by doing:

add.show().insertAfter(button);

Upvotes: 2

Related Questions