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

CKEditor - Upload URL is not called by plugin uploadimage

I tried to search, but no luck for now. I integrated CKEditor 4.5.10 with uploadimage plugin (using Builder). I set the filebrowserUploadUrl and filebrowserBrowseUrl options when using CKEDITOR.replace.
No error (except the one stating I can't use local images that should be fixed when to image is uploaded and changed by the plugin).
I put a breakpoint as my first line in my upload PHP file, but I never get there. Yes, my debuging stuff is working perfectly as I can break using the Uploading tab in the image dialog.
I'm trying to copy/paste from Word an image with text using CTRL-C + CTRL-V.
What could I've missed ?
Code of initialization (I justed forked the imageuploader plugin to ameliorate it, so I have control over it) :
var superAdminPlugins = 'sourcearea,elementspath,forms';
var autoUploadPlugins = ''; //',uploadimage,uploadwidget'; // I already put them in VIA Builder
var toRemovePlugin = ',resize';
var toTestPlugin = ',base64image,ckeditortablecellsselection,autoembed,bgimage,backgrounds,pbckcode,tabletoolstoolbar';
alert(CKEDITOR.getUrl('') + 'plugins/imageuploader/imgupload.php');
ckEditor = CKEDITOR.replace(textareaId, {
language: wee.currentLanguage,
extraPlugins: 'allmedias,imageuploader' + autoUploadPlugins,
removePlugins: superAdminPlugins + toTestPlugin + toRemovePlugin,
toolbarCanCollapse: true,
scayt_sLang: scaytLanguageToUse,
youtube_width: 300,
youtube_height: 300,
filebrowserUploadUrl: CKEDITOR.getUrl('') + 'plugins/imageuploader/imgupload.php',
filebrowserBrowseUrl: CKEDITOR.getUrl('') + 'plugins/imageuploader/imgbrowser.php'
});

I discovered why it doesn't work. And indeed, it's normal, well kind of.
Copying an image from a picture editor creates an image using base64 encoding. So the image is included directly in the content thus accessible by the plugin.
Weirdly, copying only the image from MS Word does exactly the same thing, so it works! Yeah! But unfortunately, copying an image with text, the image is included as a link to a local file in a temporary folder. So, the content not being contained in the clipboard, the plugin can't use it.
I'll then try to create a Java software that will catch a clipboard change and adjust its content with base64 images instead. Hope I'll be able to do so! If yes, I'll post it somewhere.
EDIT :
Here is the Java software I made to support this :
https://github.com/djon2003/ClipboardImageToBase64

Detect if browser disables images

I need to detect if the browser disables images on the current page. Is this possible with JavaScript (jQuery/Modernizr)?
Problem: The project uses image sprites for icons and displays them like <i class="icon-user"></i>. The app is partially used by mobile users and some of them disable images if they're surfing with edge. As a result some buttons disappear.
The only thing I need is to display something (a gray square, circle…) if images are blocked. Via CSS class on the <html> element or so (class="no-images" e.g.). Writing alternative text between <i>…</i> is unhappily no option.
Thanks for your thoughts! I hope it exists a simple solution.

You can use the following script:
function noimage()
{
if ((document.getElementById('flag').offsetWidth==1
&& document.getElementById('flag').readyState=='complete')
||(document.getElementById('flag').offsetWidth==1
&& document.getElementById('flag').readyState==undefined))
{
var objHead = document.getElementsByTagName('head');
var objCSS = objHead[0].appendChild(document.createElement('link'));
objCSS.rel = 'stylesheet';
objCSS.href = 'alt.css';
objCSS.type = 'text/css';
}
}
And you need the following html markup:
<body onload="noimage();">
<img id="flag" src="clear.gif" alt="">
Just add it to the body. What this does is check the offsetWidth property to look for a 1x1 pixel image at the top of the browser. If it returns true it means that images are enabled.
If you need more info go here.

onmouseover fails in chrome when posting or leaving page

I have onmouseover and onmouseout attributes on pictures on page. When submitting onmouseover and onmouseout cause images to fail (returns image source not found icon)
<input type="image" src="../../Content/Resources/save.png" onmouseover="mouseOverForImage('save', '../../Content/Resources/save_mouse_over.png')"
onmouseout = "mouseOverForImage('save', '../../Content/Resources/save.png')" id="save"
title = "Save" />
And Javascript:
function mouseOverForImage(imgId, imgSrcs) {
document.getElementById(imgId).src = imgSrcs;
}

I've made a page on jsfiddle to test your issue (note that you need to run the page in order to see the images with relative paths, that's a jsfiddle issue happening in all browsers).
Hover the [+] image button (it will turn into [?]) and click it. While the page is being loaded you can mouseover/out/over/out/over... as many times as you want and it will work: the image will change and no 404 will occur.
I am using Chrome 20.
This leads me to the following questions:
What's your Chrome version and can you reproduce the issue in Safari? I recall Webkit had a bug that displayed images quite randomly...
Have you posted the code exactly? Are you 100% sure that there's no missing quote, or "0" instead of "o", or some issue with letter case?
When you submit the form, does your page's (or iframe's) URL change at the same time? If so - your relative paths won't work anymore and you'll get your 404. Can you test it by setting a full path to the image's src? Maybe also log the current url?
Can some other code (onsubmit event?) interfere with your form? Can you post more code or create a jsfiddle that reproduces your issue?
Do we/I understand your problem correctly? :)
Thanks.

You can try something like this
function mouseOverForImage(imgId, imgSrcs) {
var image = new Image();
image.src = imgSrcs;
image.onload = function() {
document.getElementById(imgId).src = imgSrcs;
};
}

In place of using mouseover and mouseout events try using mouseenter and mouseleave. It usually works in these types of problem.

jquery thickbox reference problem

Completely restated my question:
Problem: Losing reference to an iFrame with Mozilla firefox 3.6 and 4.0
More info:
- Works fine in internet explorer 8 64-bit and 32-bit version.
How to reproduce? In Mozilla: Open the editor accordion menu. Click the 'editor openen' link, in the editor fill in some random text, then click 'bestand opslaan'. Fill in a name and click on 'save'. The content of the editor will be downloaded in HTML format.
Close the save file dialog box by clickin outside of it or on the specified buttons. Click on the 'bestand opslaan' button again and try to save your content to a file. You'll see nothing happening.
The problem isn't there in IE8. Try opening it in there.
Firebug tells me this the second time you open the save dialog:
iFrame.document is null
Example Link: http://www.newsletter.c-tz.nl/
More info:
- switched from thickbox to colorbox to try and resolve this issue and because thickbox isn't supported for a long time now.
- colorbox gives me the same problem so I don't think it is this.
- tried googling for iframe reference error and like, found nothing.
- tried putting the iframe code outside of the div that is called by the colorbox script, it retains it reference but not when I put it back inside that div.
Thanks to: JohnP who offered to open a 'hunt' on this.
Edit:
I thought maybe the saveFile.php file was causing trouble to the parent of the iframe but after removing it from the action variable in the editor.php script it still fails with the same error after you open the dialog for a second time.
Can someone maybe write a script that iterates through iframes by name and when the rignt iframe is found reference it to a var? I want to try it but don't know how..

I can't explain why it's work the first time for Firefox, but in Firefox the function to used for get iframe is different of IE : How to get the body's content of an iframe in Javascript?.
So, replace your JavaScript function "saveToFile" to this :
function saveToFile() {
var saveAsFileName = document.getElementById('saveAs_filename').value;
var currentContent = tinyMCE.editors["editor_textarea"].getContent();
var editorFileName = document.getElementById('editor_filename');
var iFrameTag = document.getElementById('saveAs_Iframe');
var iFrame;
if ( iFrameTag.contentDocument )
{ // FF
iFrame = iFrameTag.contentDocument;
}
else if ( iFrame.contentWindow )
{ // IE
iFrame = iFrameTag.contentWindow.document;
}
var inframeEditorFileName = iFrame.getElementById('editor_filename');
var inframeEditorContent = iFrame.getElementById('editor_textarea');
editorFileName.value = saveAsFileName;
inframeEditorFileName.value = saveAsFileName;
inframeEditorContent.value = currentContent;
iFrame.editor_self.submit();
}
I replace the function with Firebug and it's works for me.
Update :
You can also used a crossbrowser solution, more simple, thanks to jQuery :
function saveToFile() {
var saveAsFileName = document.getElementById('saveAs_filename').value;
var currentContent = tinyMCE.editors["editor_textarea"].getContent();
var editorFileName = document.getElementById('editor_filename');
editorFileName.value = saveAsFileName;
$("#saveAs_Iframe").contents().find("#editor_filename").val(saveAsFileName)
$("#saveAs_Iframe").contents().find("#editor_textarea").val(currentContent)
$("#saveAs_Iframe").contents().find("form[name=editor_self]").submit();
}