I'm working on a site where a user can create however many domains he wishes on a server. Each domain can belong to a group(this overall does nothing to the domain itself it's there for easier sorting).
A user can add/delete/modify each group separately.
I'm using a jQuery plugin called Spectrum so that a user can assign a color to each of his groups. See here.
I'm doing some ajax to dynamically update the groups(change the color/name). Everything is working great, except for one thing: the above mentioned plugin doesn't work properly for appended html(which I suppose is to be expected).
Normally for such a thing I'd reload the plugin, however I don't see any method in the documentation that would allow me to do that.
Is there some other way that I could reload it? Maybe some jQuery method? Bind to some event? Something?
Any help is appreciated.
function ajaxAddDomainGroup(group_color_add, group_name_add) {
$.ajax({
url: "<?= URL::route('domains_ajax_add_group'); ?>",
type: 'POST',
data: 'data[group_name]=' + group_name_add + '&data[group_color]=' + group_color_add,
success: function (data)
{
if(data.status == 'OK') {
$.notify('Group added successfully.', {
type: 'info',
delay: 120000
});
$('#js--groups_table tr:first').before(
'<tr>' +
'<td class="ccs-table__label" style="background-color: ' + data.data.group_color + '!important;"' + '>' + data.data.group_name + '</td>' +
' <td class="ccs-table__action js--groups_edit">' +
'<a href="#"><span class="icon-edit-ccs icon-ccs"></span></a>' +
'</td>' +
'<td class="ccs-table__action"><a id="delete_' + data.data.id + '" class="ccs-groups_delete" href="#"><span class="icon-delete-ccs icon-ccs"></span></a></td>' +
'</tr><tr><td colspan="3"><div class="js--edit_info css-hide_edit_info box__controls">' +
'<div class="col-md-6"> <input class="input--block js--input_group_name_edit" type="text" placeholder="New group name">' +
'</div><div class="col-md-6"><a class="btn btn--action btn--default js--group_edit btn__text" id="js--edit_' + data.data.id + '" href="#">Modify</a>' +
'<input class="js--spectrum-color-edit"/> <input type="hidden" class="js--group_color_edit" value="#000000"/> </div> </div> </td> ' +
'</tr>'
);
}
else {
$.notify('An error has occurred when trying to add the group.', {
type: 'info',
delay: 120000
});
}
}
});
}
function ajaxEditDomainGroup(group_name_edit, group_color_edit, group_id_edit) {
$.ajax({
url: "<?= URL::route('domains_ajax_edit_group'); ?>",
type: 'POST',
data: 'data[new_group_name]=' + group_name_edit + '&data[new_group_color]=' + group_color_edit + '&data[group_id]=' + group_id_edit,
success: function (data)
{
if(data.status == 'OK') {
$.notify('Group edited successfully.', {
type: 'info',
delay: 120000
});
$('#js--edit_' + group_id_edit).closest('tr').prev('tr').find('td:first-child').replaceWith(
'<td class="ccs-table__label" style="background-color: ' + group_color_edit + '!important;">' + group_name_edit + '</td>'
);
}
else {
$.notify('An error has occurred when trying to edit the group.', {
type: 'info',
delay: 120000
});
}
}
});
}
$('body').on('click','.js--group_edit', function() {
var group_name_edit = $(this).closest('td').find('.js--input_group_name_edit').val();
var group_color_edit = $(this).closest('td').find('.js--group_color_edit').val();
var group_id_edit = parseInt($(this).attr('id').replace(/[^\d]/g, ''), 10);
if($.trim(group_color_edit) == '') {
alert('The group color is required.');
return false;
}
else if( $.trim(group_name_edit) == '') {
alert('The group name is required.');
return false;
}
ajaxEditDomainGroup(group_name_edit, group_color_edit, group_id_edit);
});
Relevant html:
@foreach($domain_groups as $key => $domain_info)
<tr>
<td class="ccs-table__label"
@if(isset($domain_info['color']) && $domain_info['color'] != ''))
style="background-color: {{ $domain_info['color'] }}!important;"
@endif
>{{ $domain_info['group_name']; }}
</td>
<td class="ccs-table__action js--groups_edit">
<a href="#"><span class="icon-edit-ccs icon-ccs"></span></a>
</td>
<td class="ccs-table__action"><a id="delete_{{ $domain_info['id'] }}" class="ccs-groups_delete" href="#"><span class="icon-delete-ccs icon-ccs"></span></a></td>
</tr>
<tr>
<td colspan="3">
<div class="js--edit_info css-hide_edit_info box__controls">
<div class="col-md-6">
<input class="input--block js--input_group_name_edit" type="text" placeholder="New group name">
</div>
<div class="col-md-6">
<a class="btn btn--action btn--default js--group_edit btn__text" id="js--edit_{{ $domain_info['id'] }}" href="#">Modify</a>
<input class="js--spectrum-color-edit"/>
<input type="hidden" class="js--group_color_edit" value="#000000"/>
</div>
</div>
</td>
</tr>
@endforeach
Spectrum init and such:
$(".js--spectrum-color-edit").spectrum({
color: '#000',
showAlpha: true,showInput: true,
// Set the hext value of the color to a hidden input
move: function(color){
$(this).closest('td').find('.js--group_color_edit').val(color.toHexString());
}
});
I realize this isn't the most easy-on-the-eyes code. Odds are it's gonna be refactored in the future using angular or something like that.
You need to apply spectrum to any newly created matching elements within the dynamically loaded rows:
var $newtr = $('<tr>' +
'<td class="ccs-table__label" style="background-color: ' + data.data.group_color + '!important;"' + '>' + data.data.group_name + '</td>' +
' <td class="ccs-table__action js--groups_edit">' +
'<a href="#"><span class="icon-edit-ccs icon-ccs"></span></a>' +
'</td>' +
'<td class="ccs-table__action"><a id="delete_' + data.data.id + '" class="ccs-groups_delete" href="#"><span class="icon-delete-ccs icon-ccs"></span></a></td>' +
'</tr><tr><td colspan="3"><div class="js--edit_info css-hide_edit_info box__controls">' +
'<div class="col-md-6"> <input class="input--block js--input_group_name_edit" type="text" placeholder="New group name">' +
'</div><div class="col-md-6"><a class="btn btn--action btn--default js--group_edit btn__text" id="js--edit_' + data.data.id + '" href="#">Modify</a>' +
'<input class="js--spectrum-color-edit"/> <input type="hidden" class="js--group_color_edit" value="#000000"/> </div> </div> </td> ' +
'</tr>');
$('#js--groups_table tr:first').before($newtr)
$(".js--spectrum-color-edit", $newtr).spectrum({
color: '#000',
showAlpha: true,
showInput: true,
// Set the hext value of the color to a hidden input
move: function (color) {
$(this).closest('td').find('.js--group_color_edit').val(color.toHexString());
}
});