3

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.autocomplete.js:219)
    at HTMLUListElement.<anonymous> (jquery.autocomplete.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 hideAutocompleteBox() {
  $('#ajax_choose_product')
    .fadeOut('fast')
    .find('#product_autocomplete_input').val('');
}

function onSelectEnd(img, selection) {
  selectionCurrent = selection;
  showAutocompleteBox(selection.x1, selection.y1 + selection.height);
}

function undoEdit() {
  hideAutocompleteBox();
  $('#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 showAutocompleteBox(x1, y1) {
  $('#ajax_choose_product:hidden')
    .slideDown('fast');
  $('#product_autocomplete_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_autocomplete_input').val($fixedZoneElement.find('p').text());
  showAutocompleteBox(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_autocomplete_input').val('');
}

$(window).load(function () {
  /* function autocomplete */
  $('#product_autocomplete_input')
    .autocomplete('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: hideAutocompleteBox,
    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();
  }
});
Jack
  • 69
  • 1
  • 1
  • 11
  • 1
    Without resource, only posting the error is meaningless.... – Mamun Oct 24 '18 at 08: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 Oct 24 '18 at 08: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 Oct 24 '18 at 08: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 Oct 24 '18 at 08:26
  • Try opening Developer tools (F12) in Chrome or IE, then browse for the `scenes.js` file (`Sources` tab in Chrome, `Debugger` tab 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 Oct 24 '18 at 08:35
  • @Jack then there might be issues with your file sourcing and publishing. if you open your website, go to inspector > sources, and then try to find the scenes.js file, does it show you any code? – Dennis Lukas Oct 24 '18 at 08:35
  • Yes that shows the code! @DennisLukas – Jack Oct 24 '18 at 08:38
  • @AndyS Yep, that showes the code, thanks. – Jack Oct 24 '18 at 09:56

1 Answers1

3

I saw the same error once i am trying to use and access object properties, but the object is coming as null. that why can't use remove properties nor any other properties.

Fahd Allebdi
  • 354
  • 4
  • 7