Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

onclick propery of button being scrubbed out.

 
Reply
   X-Cart forums > X-Cart 5 > Modifying the design and features (X-Cart 5)
 
Thread Tools Search this Thread
  #1  
Old 01-30-2020, 04:12 PM
  The Knotty Celt's Avatar 
The Knotty Celt The Knotty Celt is offline
 

Member
  
Join Date: Jan 2020
Posts: 10
 

Default 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?
__________________
X-Cart version 5.4.0.9
Reply With Quote
  #2  
Old 02-06-2020, 10:40 AM
  The Knotty Celt's Avatar 
The Knotty Celt The Knotty Celt is offline
 

Member
  
Join Date: Jan 2020
Posts: 10
 

Default 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.
__________________
X-Cart version 5.4.0.9
Reply With Quote

The following user thanks The Knotty Celt for this useful post:
Ed B. (02-07-2020)
Reply
   X-Cart forums > X-Cart 5 > Modifying the design and features (X-Cart 5)


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 03:25 AM.

   

 
X-Cart forums © 2001-2020