I have this in my code:
function getInput(id) {
var html = "<input id='" + id + "'/>";
return $(html);
}
function getControlUploadWrapper(id) {
var html = '<div class="input-group">' +
' <div class="input-group-prepend">' +
' <span class="input-group-text" id="inputGroupFileAddon01" style="height: 29px;">Upload</span>' +
' </div>' +
' <div class="custom-file">' +
' <input id="' + id + '" type="file" class="custom-file-input" id="inputGroupFile01"' +
' aria-describedby="inputGroupFileAddon01">' +
' <label class="custom-file-label"
for="inputGroupFile01">Choose file</label>' +
' </div>' +
' </div>';
return $(html);
}
function setupBackgroundControls(jObj, key, sT, type, val, targetEl) {
var sKey = "tab" + type + getStyleKey(sT);
var id = type + sT.replace("-", "");
$("#" + sKey).append($(getControlColsWrapper(12, "height:30px;").append($(getControlColsLabelWrapper()).append(getInput(id)))));
setColorPickerControlEvents(jObj, sT, type, val, id, targetEl);
$("#" + sKey).append($(getControlColsWrapper(6, "height:30px;").append($(getControlUploadWrapper("control_" + id)))));
$('#control_' + id).change(function () {
var input = this;
var url = $(this).val();
var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
if (input.files && input.files[0] && (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) {
var reader = new FileReader();
reader.onload = function (e) {
var guid = uuidv4().replace("-", "") + "." + ext;
AjaxResult(function (obj, data) {
$("#" + id).spectrum("set", null); <-- this is where the $("#" + id) keeps returning null so i cannot set the spectrum value
}, "UploadComponentImage", { projectId: projectId, src: e.target.result, guid: guid, oldImage: getComponentDataAllStyleValueByResponsiveIndex(jObj, sT, type, getResponsiveIndex())}, methodRequestR.POST);
}
reader.readAsDataURL(input.files[0]);
}
});
}
function setColorPickerControlEvents(jObj, sT, type, val, id, targetEl) {
$("#" + id).spectrum({
allowEmpty: true,
color: val == null || val == "unset" ? null : val,
change: function (color) {
if (color == null) {
} else {
$("#control_" + id).parent().parent().parent().show(); <-- also here, the $("#control_" + id) selector is null or empty
}
}
});
}
So this part of the code:
$("#" + id).spectrum("set", null);
Keeps returning null or the selector is empty:
$("#" + id)
But Spectrum has been set here:
$("#" + sKey).append($(getControlColsWrapper(12, "height:30px;").append($(getControlColsLabelWrapper()).append(getInput(id)))));
setColorPickerControlEvents(jObj, sT, type, val, id, targetEl);
So why do i keep getting null or empty selector here?
$("#" + id).spectrum("set", null);
Also at this point:
$("#control_" + id).parent().parent().parent().show();
The $(“#control_” + id) selector keeps returning null or empty
But i have set this here:
$("#" + sKey).append($(getControlColsWrapper(6, "height:30px;").append($(getControlUploadWrapper("control_" + id)))));
Just to get an idea I have a screenshot, part of the UI where these functions are in use: