Multi Select in sortable repeater

[johnnya23]

the read me says: If you want to collect other type of data, such as plain text, simply duplicate this control and modify as necessary.

problem is that the jquery needs to be altered to make this work. I have worked thru everything accept for adding a new row. I can't simply hardcode the new row text for the multi-button so I am using jquery clone to get the new row added. Problem is if I .clone(false) I get a dead multi-box... if I .clone(true) when I try to select the new box the box I cloned gets selected. any ideas? thanks, john

[maddisondesigns]

I'm not exactly sure what you're trying to do, sorry. If you to want a new control that's similar to my Sortable Repeater, then you'll want to duplicate the PHP code for the repeater, as well as the JavaScript (jQuery). The Sortable Repeater control will automatically add 'https://' to the front of any text entered into one of the fields, if it doesn't already have it. If you want to use the control to collect other types of date (i.e. not URL's), then you'll simply need to remove that bit of jQuery code.

[johnnya23]

Thanks for the reply. I'm trying to create a sortable multi-select field(s), so the hardcoded newRow in the customizer.js won't work for this purpose. thx, john

[maddisondesigns]

If you're creating a new control, then you'd need to duplicate the js as well, as I mentioned above.

My control has the class .sortable_repeater_control. In the js, I have the following functions for my sortable repeater.

// Update the values for all our input fields and initialise the sortable repeater
$('.sortable_repeater_control').each(function() {
   ...
});

// Make our Repeater fields sortable
$(this).find('.sortable_repeater.sortable').sortable({
   ...
});

// Remove item starting from it's parent element
$('.sortable_repeater.sortable').on('click', '.customize-control-sortable-repeater-delete', function(event) {
   ...
});

// Add new item
$('.customize-control-sortable-repeater-add').click(function(event) {
   ...
});

// Refresh our hidden field if any fields change
$('.sortable_repeater.sortable').change(function() {
   ...
})

// Add https:// to the start of the URL if it doesn't have it
$('.sortable_repeater.sortable').on('blur', '.repeater-input', function() {
   ...
});

// Append a new row to our list of elements
function skyrocketAppendRow($element, defaultValue = '') {
   ...
}

// Get the values from the repeater input fields and add to our hidden field
function skyrocketGetAllInputs($element) {
   ...
}

If you're creating a new control, then you should also be giving it new class names, duplicating the relevant js code and also using new function names. So you'd end up with something like the following:

// Update the values for all our input fields and initialise the sortable repeater
$('.mycustom_sortable_repeater_control').each(function() {
   ...
});

// Make our Repeater fields sortable
$(this).find('.mycustom_sortable_repeater.sortable').sortable({
   ...
});

// Remove item starting from it's parent element
$('.mycustom_sortable_repeater.sortable').on('click', '.mycustom_customize-control-sortable-repeater-delete', function(event) {
   ...
});

// Add new item
$('.mycustom_customize-control-sortable-repeater-add').click(function(event) {
   ...
});

// Refresh our hidden field if any fields change
$('.mycustom_sortable_repeater.sortable').change(function() {
   ...
})

// Add https:// to the start of the URL if it doesn't have it
$('.mycustom_sortable_repeater.sortable').on('blur', '.repeater-input', function() {
   ...
});

// Append a new row to our list of elements
function mycustom_skyrocketAppendRow($element, defaultValue = '') {
   ...
}

// Get the values from the repeater input fields and add to our hidden field
function mycustom_skyrocketGetAllInputs($element) {
   ...
}

Once you've duplicated all the code, you can then change it to do whatever you want, including changing the newRow variable to make your own custom row, however you want it.