Выбранные параметры плагина не передаются в клонированную строку

0

SETUP Я использую Chosen plugin (http://harvesthq.github.com/chosen/) и клонирование с использованием сценария relCopy

ПРОБЛЕМА Я могу успешно клонировать строки, но такие параметры, как "max_selected_options", не передаются клонированным строкам. Пожалуйста, сообщите, что я делаю неправильно?

Файл скрипта: http://jsfiddle.net/KjNb5/

Код HTML

<label>Select Options</label>
<select data-placeholder="You may select upto Two options" name="Opt_1" id="Opt_1" class="chosen-select" multiple tabindex="6" style="width: 280px; ">
<option value=""></option>
    <optgroup label="NFC EAST">
        <option>Dallas Cowboys</option>
        <option>New York Giants</option>
        <option>Philadelphia Eagles</option>
        <option>Washington Redskins</option>
    </optgroup>
    <optgroup label="NFC NORTH">
        <option>Chicago Bears</option>
        <option>Detroit Lions</option>
        <option>Green Bay Packers</option>
        <option>Minnesota Vikings</option>
    </optgroup>
</select>

<p><a href="#" class="copy" rel=".addMoreFiles">Add More</a></p>

Файлы JS

/**
 * jQuery-Plugin "relCopy"
 * 
 * @version: 1.1.0, 25.02.2010
 * 
 * @author: Andres Vidal
 *          [email protected]
 *          http://www.andresvidal.com
 *
 * Instructions: Call $(selector).relCopy(options) on an element with a jQuery type selector 
 * defined in the attribute "rel" tag. This defines the DOM element to copy.
 * @example: $('a.copy').relCopy({limit: 5}); // <a href="example.com" class="copy" rel=".phone">Copy Phone</a>
 *
 * @param: string   excludeSelector - A jQuery selector used to exclude an element and its children
 * @param: integer  limit - The number of allowed copies. Default: 0 is unlimited
 * @param: string   append - HTML to attach at the end of each copy. Default: remove link
 * @param: string   copyClass - A class to attach to each copy
 * @param: boolean  clearInputs - Option to clear each copies text input fields or textarea
 * 
 */

(function($) {

    $.fn.relCopy = function(options) {
        var settings = jQuery.extend({
            excludeSelector: ".exclude",
            emptySelector: ".empty",
            copyClass: "copy",
            append: '',
            clearInputs: true,
            limit: 0 // 0 = unlimited
        }, options);

        settings.limit = parseInt(settings.limit);

        // loop each element
        this.each(function() {

            // set click action
            $(this).click(function(){
                var rel = $(this).attr('rel'); // rel in jquery selector format             
                var counter = $(rel).length;

                // stop limit
                if (settings.limit != 0 && counter >= settings.limit){
                    return false;
                };

                var master = $(rel+":first");
                var parent = $(master).parent();                        
                var clone = $(master).clone(true).addClass(settings.copyClass+counter).append(settings.append);

                //Remove Elements with excludeSelector
                if (settings.excludeSelector){
                    $(clone).find(settings.excludeSelector).remove();
                };

                //Empty Elements with emptySelector
                if (settings.emptySelector){
                    $(clone).find(settings.emptySelector).empty();
                };                              

                // Increment Clone IDs
                if ( $(clone).attr('id') ){
                    var newid = $(clone).attr('id') + (counter +1);
                    $(clone).attr('id', newid);
                };

                // Increment Clone Children IDs
                $(clone).find('[id]').each(function(){
                    var newid = $(this).attr('id') + (counter +1);
                    $(this).attr('id', newid);
                });

                //Clear Inputs/Textarea
                if (settings.clearInputs){
                    $(clone).find(':input').each(function(){
                        var type = $(this).attr('type');
                        switch(type)
                        {
                            case "button":
                                break;
                            case "reset":
                                break;
                            case "submit":
                                break;
                            case "checkbox":
                                $(this).attr('checked', '');
                                break;
                            default:
                              $(this).val("");
                        }
                         if ($(this).hasClass('chosen-select')) {

                            $(this).next('.chosen-container').remove();

                            $(this).css({display: "inline-block"}).removeClass("chosen-done");
                            var that = $(this);

                            setTimeout(function(){ that.removeData('chosen').chosen();},0);                       

                        }

                    });                 
                };

                $(parent).find(rel+':last').after(clone);

                return false;

            }); // end click action

        }); //end each loop

        return this; // return to jQuery
    };

})(jQuery);


$(function(){
var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>';
$('a.copy').relCopy({append: removeLink});
});

$(document).ready(function(){
    $(".chosen-select-deselect").chosen({allow_single_deselect:true});
    $(".chosen-select").chosen({max_selected_options: 2});
    $(".chosen-select").bind("chosen:maxselected", function () { alert("Maximum limit reached"); });
    $(".chosen-select").trigger('chosen:activate'); 
    });
Теги:
clone
jquery-chosen

1 ответ

0
Лучший ответ

Я думаю, что события не привязаны к новым клонированным элементам, хотя атрибут "истина" указан в методе клонирования.

Во всяком случае, она быстро обходится для обеспечения того, чтобы события всегда были привязаны.

Новая скрипка: http://jsfiddle.net/KjNb5/4/

Старый скрипт: http://jsfiddle.net/KjNb5/1/

HTML

<div class="more-files-template hidden">
    <label>Select Options</label>
    <select data-placeholder="You may select upto Two options" multiple tabindex="6" style="width: 280px; ">
        <option value=""></option>
        <optgroup label="NFC EAST">
            <option>Dallas Cowboys</option>
            <option>New York Giants</option>
            <option>Philadelphia Eagles</option>
            <option>Washington Redskins</option>
        </optgroup>
        <optgroup label="NFC NORTH">
            <option>Chicago Bears</option>
            <option>Detroit Lions</option>
            <option>Green Bay Packers</option>
            <option>Minnesota Vikings</option>
        </optgroup>
    </select> <a class="remove" href="#">remove</a>

</div>
<form id="form" action="/" method="post">
    <div class="files"></div>
</form>
<p><a href="#" class="copy-link">Add More</a>
</p>
<p><a href="#" class="form-submit-button">Submit form</a>
</p>

JS

$( main );

function main() {

    var fieldNumber = 0;
    var fieldNameAndID = "Opt_";
    var maxFieldsAllowed = 5;

    addField(fieldNumber);

    $(".copy-link").on("click", function (e) {
        e.preventDefault();

        addField(fieldNumber);
    });

    $(".files").on("click", "a", function (e) {
        e.preventDefault();

        fieldNumber = fieldNumber - 1;

        $(this)
            .parent()
            .slideUp(function () {
            $(this).remove();
        });
    });

    $(".form-submit-button").on("click", function (e) {
        e.preventDefault();

        alert($("#form").serialize());
    });


    function addField(index) {

        fieldNumber = index + 1;

        if (fieldNumber > maxFieldsAllowed) {
            fieldNumber = fieldNumber - 1;
            alert("Sorry! cannot add more than " + maxFieldsAllowed + " fields.");
            return false;
        }

        var newFieldNameAndID = fieldNameAndID + fieldNumber;

        var $new = $(".more-files-template")
            .clone(true)
            .removeClass("more-files-template hidden")
            .addClass("another-field");

        if (fieldNumber == 1) {
            $new.find(".remove").remove();
        }

        $(".files").append($new);

        $new.find("select")
            .attr({
            name: newFieldNameAndID,
            id: newFieldNameAndID
        })
            .chosen({
            max_selected_options: 2
        })
            .bind("chosen:maxselected", function () {
            alert("Maximum limit reached");
        });
    }

};

CSS

.hidden {
    display:none; /* to hide template */
}

Это не префект, но поставит вас в правильном направлении :)

Надеюсь, это поможет.

Varinder

  • 0
    Спасибо Вариндер, Твой код хорош, у меня есть несколько вопросов. А) можно ли избежать ссылки "Удалить" в первом ряду? так как я не хочу, чтобы кто-то удалял все строки. Б) Можем ли мы ограничить максимум 5 строк для клонирования? C) Можно ли передать все эти клонированные параметры для загрузки Формы? Спасибо.
  • 0
    Эй, Кевин, конечно, вы можете делать все, что захотите :) Обновленная скрипка: jsfiddle.net/KjNb5/4 A) Да, нужно немного изменить код, чтобы убедиться, что он удаляет ссылку «удалить» при вставке первого поле. См. Строку JS: 53 B) Да, строку JS: 40 C) Да, вновь добавленные поля теперь получают атрибут id и name в формате «Opt_1», «Opt_2» ... и т. Д., Я быстро добавил тег формы вокруг него с поддельной кнопкой отправки, которая просто предупреждает выбранные параметры. JS линия: 32 Надеюсь, что помогает, Cheers Varinder

Ещё вопросы

Сообщество Overcoder
Наверх
Меню