Full error:
scenes.js:131
Uncaught TypeError: Cannot read property 'remove' of null
at HTMLInputElement.afterTextInserted (scenes.js:131)
at HTMLInputElement.dispatch (jquery-1.11.0.min.js:3)
at HTMLInputElement.r.handle (jquery-1.11.0.min.js:3)
at Object.trigger (jquery-1.11.0.min.js:3)
at Object.e.event.trigger (jquery-migrate-1.2.1.min.js:2)
at HTMLInputElement.<anonymous> (jquery-1.11.0.min.js:3)
at Function.each (jquery-1.11.0.min.js:2)
at e.fn.init.each (jquery-1.11.0.min.js:2)
at e.fn.init.trigger (jquery-1.11.0.min.js:3)
at selectCurrent (jquery.autoplete.js:219)
at HTMLUListElement.<anonymous> (jquery.autoplete.js:581)
at HTMLUListElement.dispatch (jquery-1.11.0.min.js:3)
at HTMLUListElement.r.handle (jquery-1.11.0.min.js:3)
I'm working with thirty bees (a fork of PrestaShop) and I'm trying to add an image mapper. (A feature that once you hover over a part of an image you get redirected to a different product).
But when I'm trying to save the image mapper, nothing happens. And I get this error in the console. What does this error mean and how can I fix it?
Thanks!
Edit: found the code. Here's the code at line 131:
function afterTextInserted(event, data, formatted) {
if (typeof data === 'undefined') {
return false;
}
// If the element exist, then the user confirm the editing
// The variable need to be reinitialized to null for the next
if (typeof window.lastEditedItem !== 'undefined') {
window.lastEditedItem.remove(); //line 131
}
window.lastEditedItem = null;
window.zoneCurrent += 1;
var idProduct = data[1];
var nameProduct = data[0];
var x1 = parseInt($('#large_scene_image').css('margin-left').replace('px', ''), 10) + parseInt(window.selectionCurrent.x1);
var y1 = parseInt($('#large_scene_image').css('margin-top').replace('px', ''), 10) + parseInt(window.selectionCurrent.y1);
var width = window.selectionCurrent.width;
var height = window.selectionCurrent.height;
addProduct(window.zoneCurrent, x1, y1, width, height, idProduct, nameProduct);
}
Here is all the code:
zoneCurrent = 0;
selectionCurrent = null;
valueOfZoneEdited = null;
// Last item is used to save the current zone and
// allow to replace it if user cancel the editing
lastEditedItem = null;
/* functions called by cropping events */
function showZone() {
$('#large_scene_image').imgAreaSelect({ show: true });
}
function hideAutopleteBox() {
$('#ajax_choose_product')
.fadeOut('fast')
.find('#product_autoplete_input').val('');
}
function onSelectEnd(img, selection) {
selectionCurrent = selection;
showAutopleteBox(selection.x1, selection.y1 + selection.height);
}
function undoEdit() {
hideAutopleteBox();
$('#large_scene_image').imgAreaSelect({ hide: true });
$(document).unbind('keydown');
}
/*
** Pointer function do handle event by key released
*/
function handlePressedKey(keyNumber, fct) {
// KeyDown isn't handled correctly in editing mode
$(document).keyup(function (event) {
if (event.keyCode === keyNumber) {
fct();
}
});
}
function showAutopleteBox(x1, y1) {
$('#ajax_choose_product:hidden')
.slideDown('fast');
$('#product_autoplete_input').focus();
handlePressedKey('27', undoEdit);
}
function editThisZone(aInFixedZoneElement) {
var $fixedZoneElement = $(aInFixedZoneElement).parent();
var x1 = $fixedZoneElement.css('margin-left');
x1 = x1.substring(0, x1.indexOf('px'));
x1 = parseInt(x1, 10) - parseInt($('#large_scene_image').css('margin-left').replace('px', ''), 10);
var y1 = $fixedZoneElement.css('margin-top');
y1 = y1.substring(0, y1.indexOf('px'));
y1 = parseInt(y1, 10) - parseInt($('#large_scene_image').css('margin-top').replace('px', ''), 10);
var width = $fixedZoneElement.css('width');
width = width.substring(0, width.indexOf('px'));
var x2 = x1 + parseInt(width, 10);
var height = $fixedZoneElement.css('height');
height = height.substring(0, height.indexOf('px'));
var y2 = y1 + parseInt(height, 10);
window.valueOfZoneEdited = $fixedZoneElement.find('a').attr('rel');
window.selectionCurrent = [];
window.selectionCurrent['x1'] = x1;
window.selectionCurrent['y1'] = y1;
window.selectionCurrent['width'] = width;
window.selectionCurrent['height'] = height;
// Save the last zone
window.lastEditedItem = $fixedZoneElement;
$('#product_autoplete_input').val($fixedZoneElement.find('p').text());
showAutopleteBox(x1, y1 + parseInt(height, 10));
$('#large_scene_image').imgAreaSelect({ x1: x1, y1: y1, x2: x2, y2: y2 });
}
/* function called by cropping process (buttons clicks) */
function deleteProduct(indexZone) {
$('#visual_zone_' + indexZone).fadeOut('fast', function () {
$(this).remove();
});
return false;
}
function afterTextInserted(event, data, formatted) {
if (typeof data === 'undefined') {
return false;
}
// If the element exist, then the user confirm the editing
// The variable need to be reinitialized to null for the next
if (typeof window.lastEditedItem !== 'undefined') {
window.lastEditedItem.remove();
}
window.lastEditedItem = null;
window.zoneCurrent += 1;
var idProduct = data[1];
var nameProduct = data[0];
var x1 = parseInt($('#large_scene_image').css('margin-left').replace('px', ''), 10) + parseInt(window.selectionCurrent.x1);
var y1 = parseInt($('#large_scene_image').css('margin-top').replace('px', ''), 10) + parseInt(window.selectionCurrent.y1);
var width = window.selectionCurrent.width;
var height = window.selectionCurrent.height;
addProduct(window.zoneCurrent, x1, y1, width, height, idProduct, nameProduct);
}
function addProduct(zoneIndex, x1, y1, width, height, idProduct, nameProduct) {
$('#large_scene_image')
.imgAreaSelect({ hide: true })
.before('\
<div class="fixed_zone" id="visual_zone_' + zoneIndex + '" style="color:black;overflow:hidden;margin-left:' + x1 + 'px; margin-top:' + y1 + 'px; width:' + width + 'px; height :' + height + 'px; background-color:white;border:1px solid black; position:absolute;" title="' + nameProduct + '">\
<input type="hidden" name="zones[' + zoneIndex + '][x1]" value="' + (x1 - parseInt($('#large_scene_image').css('margin-left').replace('px', ''))) + '"/>\
<input type="hidden" name="zones[' + zoneIndex + '][y1]" value="' + (y1 - parseInt($('#large_scene_image').css('margin-top').replace('px', ''))) + '"/>\
<input type="hidden" name="zones[' + zoneIndex + '][width]" value="' + width + '"/>\
<input type="hidden" name="zones[' + zoneIndex + '][height]" value="' + height + '"/>\
<input type="hidden" name="zones[' + zoneIndex + '][id_product]" value="' + idProduct + '"/>\
<p style="position:absolute;text-align:center;width:100%;" id="p_zone_' + zoneIndex + '">' + nameProduct + '</p>\
<a style="margin-left:' + (parseInt(width) / 2 - 16) + 'px; margin-top:' + (parseInt(height) / 2 - 8) + 'px; position:absolute;" href="#" onclick="{deleteProduct(' + zoneIndex + '); return false;}">\
<img src="../img/admin/delete.gif" alt="" />\
</a>\
<a style="margin-left:' + (parseInt(width) / 2) + 'px; margin-top:' + (parseInt(height) / 2 - 8) + 'px; position:absolute;" href="#" onclick="{editThisZone(this); return false;}">\
<img src="../img/admin/edit.gif" alt=""/>\
</a>\
</div>\
');
$('.fixed_zone').css('opacity', '0.8');
$('#save_scene').fadeIn('slow');
$('#ajax_choose_product:visible')
.fadeOut('slow')
.find('#product_autoplete_input').val('');
}
$(window).load(function () {
/* function autoplete */
$('#product_autoplete_input')
.autoplete('ajax_products_list.php', {
minChars: 1,
autoFill: true,
max: 20,
matchContains: true,
mustMatch: true,
scroll: false
})
.result(afterTextInserted);
$('#large_scene_image').imgAreaSelect({
borderWidth: 1,
onSelectEnd: onSelectEnd,
onSelectStart: showZone,
onSelectChange: hideAutopleteBox,
minHeight: 30,
minWidth: 30
});
/* load existing products zone */
for (var i = 0; i < window.startingData.length; i += 1) {
addProduct(i, window.startingData[i][2] + parseInt($('#large_scene_image').css('margin-left').replace('px', ''), 10),
window.startingData[i][3] + parseInt($('#large_scene_image').css('margin-top').replace('px', ''), 10),
window.startingData[i][4], window.startingData[i][5], window.startingData[i][1], window.startingData[i][0]);
}
window.zoneCurrent = window.startingData.length;
if (window.startingData.length) {
$('#save_scene').show();
}
});
Full error:
scenes.js:131
Uncaught TypeError: Cannot read property 'remove' of null
at HTMLInputElement.afterTextInserted (scenes.js:131)
at HTMLInputElement.dispatch (jquery-1.11.0.min.js:3)
at HTMLInputElement.r.handle (jquery-1.11.0.min.js:3)
at Object.trigger (jquery-1.11.0.min.js:3)
at Object.e.event.trigger (jquery-migrate-1.2.1.min.js:2)
at HTMLInputElement.<anonymous> (jquery-1.11.0.min.js:3)
at Function.each (jquery-1.11.0.min.js:2)
at e.fn.init.each (jquery-1.11.0.min.js:2)
at e.fn.init.trigger (jquery-1.11.0.min.js:3)
at selectCurrent (jquery.autoplete.js:219)
at HTMLUListElement.<anonymous> (jquery.autoplete.js:581)
at HTMLUListElement.dispatch (jquery-1.11.0.min.js:3)
at HTMLUListElement.r.handle (jquery-1.11.0.min.js:3)
I'm working with thirty bees (a fork of PrestaShop) and I'm trying to add an image mapper. (A feature that once you hover over a part of an image you get redirected to a different product).
But when I'm trying to save the image mapper, nothing happens. And I get this error in the console. What does this error mean and how can I fix it?
Thanks!
Edit: found the code. Here's the code at line 131:
function afterTextInserted(event, data, formatted) {
if (typeof data === 'undefined') {
return false;
}
// If the element exist, then the user confirm the editing
// The variable need to be reinitialized to null for the next
if (typeof window.lastEditedItem !== 'undefined') {
window.lastEditedItem.remove(); //line 131
}
window.lastEditedItem = null;
window.zoneCurrent += 1;
var idProduct = data[1];
var nameProduct = data[0];
var x1 = parseInt($('#large_scene_image').css('margin-left').replace('px', ''), 10) + parseInt(window.selectionCurrent.x1);
var y1 = parseInt($('#large_scene_image').css('margin-top').replace('px', ''), 10) + parseInt(window.selectionCurrent.y1);
var width = window.selectionCurrent.width;
var height = window.selectionCurrent.height;
addProduct(window.zoneCurrent, x1, y1, width, height, idProduct, nameProduct);
}
Here is all the code:
zoneCurrent = 0;
selectionCurrent = null;
valueOfZoneEdited = null;
// Last item is used to save the current zone and
// allow to replace it if user cancel the editing
lastEditedItem = null;
/* functions called by cropping events */
function showZone() {
$('#large_scene_image').imgAreaSelect({ show: true });
}
function hideAutopleteBox() {
$('#ajax_choose_product')
.fadeOut('fast')
.find('#product_autoplete_input').val('');
}
function onSelectEnd(img, selection) {
selectionCurrent = selection;
showAutopleteBox(selection.x1, selection.y1 + selection.height);
}
function undoEdit() {
hideAutopleteBox();
$('#large_scene_image').imgAreaSelect({ hide: true });
$(document).unbind('keydown');
}
/*
** Pointer function do handle event by key released
*/
function handlePressedKey(keyNumber, fct) {
// KeyDown isn't handled correctly in editing mode
$(document).keyup(function (event) {
if (event.keyCode === keyNumber) {
fct();
}
});
}
function showAutopleteBox(x1, y1) {
$('#ajax_choose_product:hidden')
.slideDown('fast');
$('#product_autoplete_input').focus();
handlePressedKey('27', undoEdit);
}
function editThisZone(aInFixedZoneElement) {
var $fixedZoneElement = $(aInFixedZoneElement).parent();
var x1 = $fixedZoneElement.css('margin-left');
x1 = x1.substring(0, x1.indexOf('px'));
x1 = parseInt(x1, 10) - parseInt($('#large_scene_image').css('margin-left').replace('px', ''), 10);
var y1 = $fixedZoneElement.css('margin-top');
y1 = y1.substring(0, y1.indexOf('px'));
y1 = parseInt(y1, 10) - parseInt($('#large_scene_image').css('margin-top').replace('px', ''), 10);
var width = $fixedZoneElement.css('width');
width = width.substring(0, width.indexOf('px'));
var x2 = x1 + parseInt(width, 10);
var height = $fixedZoneElement.css('height');
height = height.substring(0, height.indexOf('px'));
var y2 = y1 + parseInt(height, 10);
window.valueOfZoneEdited = $fixedZoneElement.find('a').attr('rel');
window.selectionCurrent = [];
window.selectionCurrent['x1'] = x1;
window.selectionCurrent['y1'] = y1;
window.selectionCurrent['width'] = width;
window.selectionCurrent['height'] = height;
// Save the last zone
window.lastEditedItem = $fixedZoneElement;
$('#product_autoplete_input').val($fixedZoneElement.find('p').text());
showAutopleteBox(x1, y1 + parseInt(height, 10));
$('#large_scene_image').imgAreaSelect({ x1: x1, y1: y1, x2: x2, y2: y2 });
}
/* function called by cropping process (buttons clicks) */
function deleteProduct(indexZone) {
$('#visual_zone_' + indexZone).fadeOut('fast', function () {
$(this).remove();
});
return false;
}
function afterTextInserted(event, data, formatted) {
if (typeof data === 'undefined') {
return false;
}
// If the element exist, then the user confirm the editing
// The variable need to be reinitialized to null for the next
if (typeof window.lastEditedItem !== 'undefined') {
window.lastEditedItem.remove();
}
window.lastEditedItem = null;
window.zoneCurrent += 1;
var idProduct = data[1];
var nameProduct = data[0];
var x1 = parseInt($('#large_scene_image').css('margin-left').replace('px', ''), 10) + parseInt(window.selectionCurrent.x1);
var y1 = parseInt($('#large_scene_image').css('margin-top').replace('px', ''), 10) + parseInt(window.selectionCurrent.y1);
var width = window.selectionCurrent.width;
var height = window.selectionCurrent.height;
addProduct(window.zoneCurrent, x1, y1, width, height, idProduct, nameProduct);
}
function addProduct(zoneIndex, x1, y1, width, height, idProduct, nameProduct) {
$('#large_scene_image')
.imgAreaSelect({ hide: true })
.before('\
<div class="fixed_zone" id="visual_zone_' + zoneIndex + '" style="color:black;overflow:hidden;margin-left:' + x1 + 'px; margin-top:' + y1 + 'px; width:' + width + 'px; height :' + height + 'px; background-color:white;border:1px solid black; position:absolute;" title="' + nameProduct + '">\
<input type="hidden" name="zones[' + zoneIndex + '][x1]" value="' + (x1 - parseInt($('#large_scene_image').css('margin-left').replace('px', ''))) + '"/>\
<input type="hidden" name="zones[' + zoneIndex + '][y1]" value="' + (y1 - parseInt($('#large_scene_image').css('margin-top').replace('px', ''))) + '"/>\
<input type="hidden" name="zones[' + zoneIndex + '][width]" value="' + width + '"/>\
<input type="hidden" name="zones[' + zoneIndex + '][height]" value="' + height + '"/>\
<input type="hidden" name="zones[' + zoneIndex + '][id_product]" value="' + idProduct + '"/>\
<p style="position:absolute;text-align:center;width:100%;" id="p_zone_' + zoneIndex + '">' + nameProduct + '</p>\
<a style="margin-left:' + (parseInt(width) / 2 - 16) + 'px; margin-top:' + (parseInt(height) / 2 - 8) + 'px; position:absolute;" href="#" onclick="{deleteProduct(' + zoneIndex + '); return false;}">\
<img src="../img/admin/delete.gif" alt="" />\
</a>\
<a style="margin-left:' + (parseInt(width) / 2) + 'px; margin-top:' + (parseInt(height) / 2 - 8) + 'px; position:absolute;" href="#" onclick="{editThisZone(this); return false;}">\
<img src="../img/admin/edit.gif" alt=""/>\
</a>\
</div>\
');
$('.fixed_zone').css('opacity', '0.8');
$('#save_scene').fadeIn('slow');
$('#ajax_choose_product:visible')
.fadeOut('slow')
.find('#product_autoplete_input').val('');
}
$(window).load(function () {
/* function autoplete */
$('#product_autoplete_input')
.autoplete('ajax_products_list.php', {
minChars: 1,
autoFill: true,
max: 20,
matchContains: true,
mustMatch: true,
scroll: false
})
.result(afterTextInserted);
$('#large_scene_image').imgAreaSelect({
borderWidth: 1,
onSelectEnd: onSelectEnd,
onSelectStart: showZone,
onSelectChange: hideAutopleteBox,
minHeight: 30,
minWidth: 30
});
/* load existing products zone */
for (var i = 0; i < window.startingData.length; i += 1) {
addProduct(i, window.startingData[i][2] + parseInt($('#large_scene_image').css('margin-left').replace('px', ''), 10),
window.startingData[i][3] + parseInt($('#large_scene_image').css('margin-top').replace('px', ''), 10),
window.startingData[i][4], window.startingData[i][5], window.startingData[i][1], window.startingData[i][0]);
}
window.zoneCurrent = window.startingData.length;
if (window.startingData.length) {
$('#save_scene').show();
}
});
- 1 Without resource, only posting the error is meaningless.... – Mamun Commented Oct 24, 2018 at 8:14
- @Mamun Do you mean all the code of the file(s)? Because the file scenes.js doesn't have any code in it. I do have scenes.tpl though. – Jack Commented Oct 24, 2018 at 8:18
- This error usually means that the object of which the function "Remove" is called is empty. If you have access to the scrpit files, go to line 131 of scenes.js and figure out how it may be possible that the object reference is empty. – Dennis Lukas Commented Oct 24, 2018 at 8:19
- @DennisLukas I do have acces to the script files, however, the file scenes.js is empty. There is no code in it. I think that is because I needed to add custom code from GitHub to my files because it's a hidden feature that was deleted. – Jack Commented Oct 24, 2018 at 8:26
-
Try opening Developer tools (F12) in Chrome or IE, then browse for the
scenes.jsfile (Sourcestab in Chrome,Debuggertab in IE) and look for line 131. Also look for any other error messages in the Console, that might give a clue as to why the object is null. – AndyS Commented Oct 24, 2018 at 8:35
1 Answer
Reset to default 3I saw the same error once i am trying to use and access object properties, but the object is ing as null. that why can't use remove properties nor any other properties.