We Keep Coding

Button not showing in Plone, onclick also not working

I am editing a plone page to open an Excel document on a specific sheet. I created two buttons to see if either would appear as actual buttons and use the JS function I reference. With this code the exact part of the page looks like the image below.
Why is only text showing instead of the button and why is the onclick attribute not working?
Note: I have changed to links to the spreadsheet for posting it on here but the link has been tested on other webpages
<script type="text/javascript">
function Open_Excel_File(path,sheet)
{
fso = new ActiveXObject("Scripting.FileSystemObject");
if (!fso.FileExists(path))
alert("Cannot open file.\nFile '" + path + "' doesn't exist.");
else
{
var myApp = new ActiveXObject("Excel.Application");
if (myApp != null)
{
myApp.visible = true;
Book = myApp.workbooks.open(path);
var excel_sheet = Book.Worksheets(sheet).Activate;
myApp.range(f_range).Select;
}
else {
alert ("Cannot open Excel application");
}
}
}
</script>
<div>
<button onclick='Open_Excel_File("file://///fs-01\Departments\Underwriting\Statistical%20Data%20and%20Medical%20Information\Statistics\Cancers\Cancer%20Statistics%\Cancer%20Statistics%.xlsx", "Vulvar Ca");'>Open File</button>
<input type="button" onclick="Open_Excel_File('file://///fs-01\deps\uw\stat%20Data%20and%20Medical%20Information\Statistics\Cancers\Cancer%20Statistics%202018\Cancer%20Statistics%.xlsx', 'VCA');'>OPEN FILE</input>
</div>

your onclick value is not a function, it is the result of a function call. Try to change that to onclick="Open_Excel_File"; You'll have to provide the file path at some point
Accessing file system from browser is super restricted for security matters, the only way I see fit is to have a file input and using what user provides

Also Plone filter out a bounce of potential "nasty" tags through a specific configurable tool.
It seems to me that you have injected the in the source HTML of a Page (document) type.
If so, you will see in your browser that in, the page source code, the script tag has been totally stripped away.
So,
a correct way to inject some js in your page, is to load it as portal_javascript resource (plone<=4) or in resource_registry (plone>=5).
tha nasty way is to access, in the ZMI, at https://yourseite:8080/Plone/portal_transforms/safe_html/ and configure it to accept script tags inside a document (all document in your site actually).
If this answer does not satisfy you try to ask in the official community:
http://community.plone.org
hth,
alessandro

Trying to use jQuery to trigger an anchor click after the page loads

So this has been asked a number of times on here, and while I've read all of the threads I can find, this still isn't working for me.
A little background: I'm working on a Wordpress site with a grid plugin, and I'm trying to trigger a filter when the page loads, depending on a url parameter. For the purpose of this thread I've just hardcoded a url parameter (the category variable) as an example because that functionality is working fine.
The anchor tag I'm trying to trigger:
Tarps and Covers
The broken code I'm trying to use to trigger the click event:
<script type="text/javascript">
$(document).ready(function() {
var hash = window.location.hash;
var category = '55';
var anchor = $("[data-category=" + category + "]");
anchor.click();
});
</script>
A console log returning the anchor variable confirms that I'm selecting the correct jQuery object, and I've also tried anchor[0].click() to trigger it with no success. Does anyone see any problems that I'm overlooking?

I tried it :
$(document).ready(function() {
var hash = window.location.hash;
var category = '55';
var anchor = $("[data-category=" + category + "]");
anchor.click();
anchor.on('click',()=>{
alert();
})
});
Everything is working

TinyMCE disappears after save Widget in Wordpress

first of all, sorry for my bad english, I'm from Germany.
I just created my first widget. It's a widget that creates automatically a grid out of a list.
I can add a new list-item and every form field will be duplicated.
But after 3 days of searching the internet without a result I decided to ask by myself...
So here is my first problem, when I add a new item, the TinyMCE in the new item is disabled, I can't click on the buttons or type text into it.
There are no errors in the console log.
My second problem is when I save the widget, all TinyMCE-Editors disappear and leave the textareas, with the html code.
Here also: no errors... but I've seen, that the TinyMCE isn't loading after save. There is no iframe, nothing but the textarea.
After reload the widget page, everything is fine again for both problems.
So I have to add new items and save the page and then reload it to edit and edit the content, but that don't solve the problem.
I think I have to reinitialize the TinyMCE but I don't know how.
I had problems with adding the wordpress editor to my widget so I integrated the jQuery TinyMCE from the website.
Here is the code snippet of my add-function:
$("body").on('click.sgw','.sgw-add',function() {
var sgw = $(this).parent().parent();
var num = sgw.find('.simple-grid .list-item').length + 1;
sgw.find('.amount').val(num);
var item = sgw.find('.simple-grid .list-item:last-child').clone();
var item_id = item.attr('id');
item.attr('id',increment_last_num(item_id));
$('.toggled-off',item).removeClass('toggled-off');
$('.number',item).html(num);
$('.item-title',item).html('');
$('.custom_media_image',item).attr('src','');
$('textarea',item).val('');
$('img.custom_media_image',item).each(function() {
var class_val = $(this).attr('class');
$(this).attr('class',increment_last_num(class_val));
});
$('textarea',item).each(function() {
var id_iframe = $(this).attr('id');
tinymce.EditorManager.execCommand('mceRemoveEditor',true, id_iframe);
tinymce.EditorManager.execCommand('mceAddEditor',true, id_iframe);
});
$('label',item).each(function() {
var for_val = $(this).attr('for');
$(this).attr('for',increment_last_num(for_val));
});
$('input',item).each(function() {
var id_val = $(this).attr('id');
var name_val = $(this).attr('name');
$(this).attr('id',increment_last_num(id_val));
$(this).attr('name',increment_last_num(name_val));
if($(':checked',this)){
$(this).removeAttr('checked');
}
if($(this).hasClass('custom_media_button') || $(this).hasClass('custom_media_url')){
var class_val = $(this).attr('class');
$(this).attr('class',increment_last_num(class_val));
}
if($(this).hasClass('button-primary')){
var number_val = $(this).attr('number');
$(this).attr('number',increment_last_num(number_val));
}
$(this).not('#custom_media_button').val('');
});
sgw.find('.simple-grid').append(item);
sgw.find('.order').val(sgw.find('.simple-grid').sortable('toArray'));
});
I hope this is understandable and someone can help me.
You can download the zip here: https://www.dropbox.com/s/22b8q29v94n7mdj/simple-grid-widget.zip?dl=0

Are you trying to run several editors at once? There's a limitation with Wordpress and TinyMCE where you can basically one editor at a time. I've gotten around that but it was very difficult.
To load a new editor you may have to remove the old one:
tinymce.remove();

Change Twitter Widget appearance on-the-fly

I have the following code in my document:
<a class="twitter-widget" href="url" data-widget-id="138843679974442730">Twitter Timeline</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
data-widget-id is connected to one style. Right now if there is a theme change on the website (I replace all responsible stylesheets and images) everything changes but the Twitter widget.
Since the widget itself is an iframe, I can't change any stylesheets attached to it.
Is there an easy way to change the style of the widget without reloading it (deleting the tag, creating the tag, running js)?

You can style elements in the Twitter widget iframe using JavaScript.
First, you need the active document in the iframe's nested browsing context:
var doc = document.getElementById("twitter-widget-0").contentDocument;
Then, you can apply styles (e.g.):
doc.querySelector(".timeline-header").style["background-color"] = "black";
doc.querySelector(".timeline-header a").style["color"] = "white";
Example: http://codepen.io/smockle/pen/IJHnj

There is no straight forward way of doing this, so I've decided to bring in another dependency that will be delaying the onload event..
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
And here is the code that did the job:
var twitterBox = document.getElementsByClassName("twitterBox");
if (!twitterBox || twitterBox.length == 0) { return true; }
var twitterTimeline = document.createElement('a');
twitterTimeline.className = 'twitter-timeline';
twitterTimeline.href = 'url';
twitterTimeline.innerHTML = 'Twitter Timeline';
twitterTimeline.setAttribute('data-widget-id', '388742673974046720');
twitterBox[0].removeAttribute('data-twttr-id');
twitterBox[0].innerHTML = '';
twitterBox[0].appendChild(twitterTimeline);
twttr.widgets.load();

CKEditor cannot remove toolbar until I click it

I'm currently using CKEditor and I'm having some trouble removing my toolbar when I click away. Currently I want to create CKEditor instances dynamically as users click on it.
However the trouble comes up when I try to click away without clicking on the toolbar. When I try to click away on the toolbar stays there and it does not run any of my onBlur code. It's only when I click on a button the toolbar or click away and then click back to the text area will it remove the toolbar and run my onBlur code.
Right here is a small snippet of code that I wrote to create the instance when clicked. Am I doing something wrong here or am I missing a piece of focus code?
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="ckeditor\ckeditor.js"></script>
<script>
$(document).ready(function(){
CKEDITOR.disableAutoInline = true;
$("#abc").on('click', function(){
var ck = CKEDITOR.inline(CKEDITOR.document.getById('abc'));
});
});
</script>
</head>
<body>
<div id="abc" contenteditable="true" >
Edit this
</div>
</body>
</html>

Try removing the jquery on click and simply allow ckeditor to handle it
$(document).ready(function () {
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline('abc');
});
OR
var abcEditor = CKEDITOR.inline('abc');

So instead of making it on click I did it so that on page load it will find all content editable areas and create ckeditor instances.
Originally I wanted to use on click to create an instance dynamically as I will be populating things dynamically. However, I found it easier to just create a ckeditor instance as I create the dynamic content.
Using this function I am able to create new ckeditor instance as the dynamic content is created and also use the onblur function to write everything to my database.
If any one has any solutions to getting the raw html from ckediter, please let me know. This method has to get the parent and then find the element and then save it, which to me doesnt sound right. So if you have any suggestions on how to do this I'm all open ears! thanks!
if(CKEDITOR.instances[this.id] == undefined){
console.log("creating new instance");
var ck = CKEDITOR.inline(CKEDITOR.document.getById( this.id ));
ck.on('blur', function(e){
var id = e.editor.name;
var html = $("#"+id).parent()[0].outerHTML;
console.log(html);
$.ajax({
type: 'POST',
url: "saveHtml",
data: { content : html}
}).done(function(data) {
console.log(data);
console.log("finished sending data");
});
});
}else{
console.log("no instance created");
}