Uncaught TypeError: Can not set property 'display' of undefined (...)

0

I have a store that displays the products and that by clicking on it you would have to open a modal showing the details of that product.

I have several JavaScript libraries like jQuery, Prototype and script.aculo.us.

Before it worked correctly, however I do not know why it does not work now, the only thing that is that the console I get the following error:

Uncaught TypeError: Cannot set property 'display' of undefined(…)

The composition of my files is like this, I have the following tag that executes the show_window function with a JavaScript onclick:

<img src="<?echo($m_PRODUCTO['IMAGEN'] . "?SID=" . generateRandomString(20))?>" width="160" height="120" <?if($_SESSION['SES_SYSTEM']['B2C']['CLIENTE']['CLI_ID']){?> onclick="show_window('index.php?ACTION=APLICACION.B2C.OTROS.LOAD_ACTION&SUBACTION=DETALLE_PRODUCTO&PRODUCTO=<?echo($e_PRO_ID)?>', '&nbsp;', 590, 490);" style="cursor:pointer"<?}?>/> 

The show_window function is as follows:

function show_window(URL, TITULO, ANCHO, ALTO, PARENT)
{
  if(PARENT == undefined)
  {
    PARENT = 'LISTADO_PRODUCTOS';
  }

  windowDetalleProducto = new Window
  (
   'windowModal',
   {
     className: "modalWindow",
     title: "<FONT FACE='verdana' COLOR='#000000'>" + TITULO + "</FONT>",
     width: ANCHO,
     height: ALTO,
     top: 0,
     minimizable: false,
     maximizable: false,
     resizable: false,
     recenterAuto: false,
     showEffect: Element.show,
     hideEffect: Element.hide,
     parent: document.getElementById(PARENT)
    }
  );

  windowDetalleProducto.setHTMLContent("<div id='loading'><div class='cargando'><img src='./b2c/3pesos/img/estructura/loading.gif'><br>Cargando... Por favor espere</div></div>");
  windowDetalleProducto.showCenter(true, 60, 0);
  windowDetalleProducto.setDestroyOnClose();

  windowDetalleProducto.setAjaxContent(URL);
}

And if it works, this is what the Chrome console throws at me:

    
asked by Hoose 24.11.2016 в 22:30
source

1 answer

1

I have found the solution to my problem.

The problem was that I was using different Javascript frameworks like jQuery, Prototype and script.aculo.us, since these libraries usually use the alias $ and when this happens, a conflict or duplication of functions may arise.

The only thing I did was change the alias $ in jQuery by j with noConflict () as follows:

  var j = jQuery.noConflict();

  j(document).ready(function(){
    j('#myModal').modal('hide');

    j('#preventa').click(function(e){
      j('#myModal').modal('show');
      e.preventDefault();
      /*setTimeout(function(){
        window.location.href = "index.php?ACTION=APLICACION.B2C.CATALOGO.GOTO_CATEGORY&OPC=1&CAT=1&ROW=32&SID=5a8evc7yfqUYdaEVlFTDVmbVFL4WHey4hkIl6abZ&PRECIO=37&TEMPLATE=3pesos";
      }, 5000);*/
    });

    j('button.close').click(function(){
      window.location.href = "index.php?ACTION=APLICACION.B2C.CATALOGO.GOTO_CATEGORY&OPC=1&CAT=1&PRECIO=68&TEMPLATE=3pesos";
    });

    j('#myModal .modal-content').click(function(){
      window.location.href = "index.php?ACTION=APLICACION.B2C.CATALOGO.GOTO_CATEGORY&OPC=1&CAT=1&PRECIO=68&TEMPLATE=3pesos";
    });
  });

In this way, the alias $ is replaced by me as j, and I will not have problems with the other libraries. I hope you can serve someone.

    
answered by 25.11.2016 / 00:32
source