X-Cart: shopping cart software

X-Cart forums (https://forum.x-cart.com/index.php)
-   Dev Questions (X-Cart 5) (https://forum.x-cart.com/forumdisplay.php?f=56)
-   -   onclick propery of button being scrubbed out. (https://forum.x-cart.com/showthread.php?t=77578)

The Knotty Celt 01-30-2020 04:12 PM

onclick propery of button being scrubbed out.
 
I am trying to customize the design of my store. Specifically, I am trying to use a combination of styles, html, and script to change the way terms of use are displayed. Each section of the document is to be listed on a tab. Clicking that tab loads the relevant section. I have tested my styles, html, and script at w3schools.com, and everything works fine. Here is how I am trying to accomplish the task.


Custom CSS

Code:

/* Style the tab */

termtab {
  overflow: hidden;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f1f1f1;

}


/* Style the buttons inside the tab */
.termtab button {
  background-color: #fff;
  border: 1px solid #044105;
  color: #044105;
  border-radius: 5px;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.termtab button:hover {
  text-decoration: underline;
}

/* Create an active/current tablink class */
.termtab button.active {
  background-color: #044105;
  color: #fff;
}

/* Style the tab content */
.termtab-content {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  border-top: none;
}



HTML
Code:

<div class="termtab">
  <button class="termtab-links" onclick="openSection(event, 'section1')">Section 1</button>
  <button class="termtab-links" onclick="openSection(event, 'section2')">Section 2</button>
...
...
  <button class="termtab-links" onclick="openSection(event, 'section17')">Section 17</button>
</div>


<div id="section1" class="termtab-content">
  <h2>Section 1 Title</h2>
  <p>Section 1 contents</p>
</div>


<div id="section2" class="termtab-content">
  <h2>Section 2 Title</h2>
  <p>Section 2 contents</p>
</div>


...
...


<div id="section17" class="termtab-content">
  <h2>Section 17 Title</h2>
  <p>Section 17 contents</p>
</div>



Script
Code:

function openSection(evt, sectName) {
  var i, tabcontent, tablinks;
  tabcontent = document.GetElementsByClassName("termtab-content");
  for (i = 0; i < tabcontent.length; i++) {

    tabcontent[i].style.display = "none";
  }
  tablinks = document.GetElementsByClassName("termtab-links");
  for (i=0; i < tablinks.legnth; i++ {
    tablinks[i].className = tablinks[i].className.replace(" active","");
  }
  document.GetElementById(sectName).style.display = "block";
  evt.currentTarget.className += " active";
}



In the BO, with the affected page loaded for editing at Content -> Pages -> [page], the onclick property of my button tags is scrubbed after saving the page. By scrubbed, I mean that after saving the page, when I return to edit the page script, this is what is displayed...


Code:

<button class="termtab-links">Section 1</button>



Why is the onclick property being dropped? Without being able to use this method for controlling button click events, how else am I to control the behaviour of the buttons?

The Knotty Celt 02-06-2020 10:40 AM

Re: onclick propery of button being scrubbed out.
 
I resolved the issue by inserting the HTML elements into the database directly rather than using the HTML editor in the BO.
Code:

UPDATE `xc_page_translations`
SET `body` = '[html]'
WHERE `id` = [id of page]
AND `code` = [language code];

It is important to note that I also had to remove all carriage returns and new lines (\r and \n) from the HTML before pasting it into my UPDATE query.


All times are GMT -8. The time now is 10:29 AM.

Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.