jquery - studio - ¿Cómo puedo clonar el complemento elegido?
visual studio installer (1)
.chz-select una condición al área de entradas claras para verificar selecciones con la clase .chz-select y realizar la reinicialización como en la respuesta que vinculó:
ACTUALIZAR
Ya que está clonando usando el parámetro verdadero, necesita eliminar los datos del elemento antes de reiniciarlo, también encontré un problema con el complemento elegido que no obtiene el ancho calculado del elemento después de agregar display:inline-block; así que tuve que usar un tiempo de espera para introducir un retraso mínimo antes de la reinicialización
//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(''chzn-select'')) {
$(this).next(''.chzn-container'').remove();
$(this).css({display: "inline-block"}).removeClass("chzn-done");
var that = $(this);
setTimeout(function () {
that.removeData(''chosen'').chosen();
}, 0);
}
});
};
Quería usar http://harvesthq.github.com/chosen/ witch jquery clone function:
<script type="text/javascript">
$(function(){
var removeLink = '' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>'';
$(''a.add'').relCopy({ append: removeLink});
});
</script>
<form method="post" action="">
<div id="cloner">
<p class="clone">
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".chzn-select").data("placeholder","Search...").chosen();
});
</script>
<select data-placeholder="Search..." name="actor_name[]" class="chzn-select" style="width:350px;" tabindex="2">
<option value=""></option>
<?php
require_once ''../engine/db.php'';
$rezultat_url = mysql_query("SELECT `id`, `actor_name` FROM `actors` ORDER BY `id` DESC");
while($row=mysql_fetch_array($rezultat_url)){
$id = $row[id];
$aktor = $row[actor_name];
echo''<option value="''.$id.''">''.$actor.''</option>'';
}
?>
</select>
<input type="text" name="role_name[]" value="" />
<input type="text" name="epi_count[]" value="" />
</p>
</div>
<p><a href="#" class="add" rel=".clone">Add More</a></p>
<script src="chosen.jquery.js" type="text/javascript"></script>
<script src="prism.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../administrator/js/reCopy.js"></script>
</form>
Este es mi script de clonación de formularios:
/**
* 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("");
}
});
};
$(parent).find(rel+'':last'').after(clone);
return false;
}); // end click action
}); //end each loop
return this; // return to jQuery
};
})(jQuery)
El problema es que cuando cloné el formulario del complemento Chosen, solo el primero funciona y todos los clonados muestran un menú desplegable desde el primero.
Encontré un problema similar con alguna solución aquí -> ¿Cómo agregar Chosen Plugin a din / CSS creado dinámicamente?
Pero no tengo idea de cómo adaptarlo a mi script. ¿Alguien puede ayudar a adaptarlo a mi script y puede mostrarme dónde debo copiarlo?