JCycle and Drupal 7 not working correctly - jcycle

I have a problem with the jQuery Cycle plugin in Drupal 7...
I use the following jQuery code to insert the div's and than the functionality of the cycle plugin :
var $ = jQuery.noConflict();
$(document).ready(function(){
$("#homepage_pics").append('<div id="slideshowContainer">');
$("#homepage_pics").append('<div class="slideshow">');
$("#homepage_pics").append('<img src="images/image1.png" width="600" height="300"/>');
$("#homepage_pics").append('<img src="images/image2.png" width="600" height="300"/>');
$("#homepage_pics").append('<img src="images/image3.png" width="600" height="300"/>');
$("#homepage_pics").append('<img src="images/image4.png" width="600" height="300"/>');
$("#homepage_pics").append('<img src="images/image5.png" width="600" height="300"/>');
$("#homepage_pics").append('</div>');
$("#homepage_pics").append('<ul id="nav">');
$("#homepage_pics").append('<li id="prev">Previous</li>');
$("#homepage_pics").append('<li id="next">Next</li>');
$("#homepage_pics").append('</ul>');
$("#homepage_pics").append('</div>');
$('.slideshow').cycle({fx: 'fade', pause: 1, prev: '#prev', next: '#next'});
})
He shows the pictures but the cycle plugin does not work.
I use Drupal 7 with artisteer 4. I don't use the View module and the version of JQuery is 1.8.2
Can anyone help me ?
Thanks

Related

Upgrade TinyMCE to 5, one form does not show the editor on a textarea control

I'm using Bootstrap 4.5, and have several forms all using the exact same setup to call TinyMCE 5, but one form (the most complex of course) is not showing it. I can find nothing wrong, or anything different between the way the textarea control is created. The code to load TinyMCE is being loaded in a PHP program and is therefore identical in all cases. This is the code being streamed out:
<!-- Jquery -- required for interactive parts of bootstrap and other code to function -->
<script src="../../Awards/jscode/jquery.min.js"></script>
<!-- Bootstrap core JavaScript, popper.js required for tooltips and such -->
<script src="../../Awards/jscode/popper.min.js"></script>
<script src="../../Awards/jscode/bootstrap.js"></script>
<!-- TinyMCE -->
<script src="../../Awards/jscode/tinymce/tinymce.min.js"></script>
<script language="JavaScript">
// TinyMCE, set for all textarea controls, with specific toolbar items, no menubar, etc.:
tinymce.init(
{
selector: 'textarea',
menubar: false,
branding: false,
plugins: 'code lists',
toolbar: 'undo redo | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | code',
lists_indent_on_tab: true,
content_css: '<?php echo $Award_html_RootPath; ?>css/AwardList.css'
}); // end of TinyMCE code
</script>
This works for other forms with the same code being streamed out for each. I am stumped as to why this one form doesn't display TinyMCE. The textarea control in question is:
<div class="form-group">
<textarea name="Notes" id="Notes"
class="form-control"
style="height: 250px;"></textarea>
</div> <!-- / form-group -->
Thanks in advance for any suggestions that might point me to where the problem lies. There is a lot of JavaScript for this form but it all seems to work, it's just the TinyMCE code that doesn't want to load ... it displays as a standard textarea, no overlay for TinyMCE.
Okay, so now I feel really sheepish. I was outputting at the top of the page some styles before the header information was loaded properly, so TinyMCE wasn't seeing "standards" mode, which includes the first line of the HTML file needing to be:
<!DOCTYPE HTML>
Moved the script tags to below the code that streams the header into the page so that, among other things, the doctype tag above is the first line, and all is well. Sorry for wasting anyone's time on this.

Issue playing a video on Jenkins HTML Publisher

I am using Testcafe for my project tests and I am generating a HTML report with screenshot and video in my project.
When I am trying to publish the report using HTML publisher, the video is not playing.
When I open the generated HTML file in the Jenkins agent via browser, the video is playing fine. not sure, why it is not playing on the Jenkins HTML publisher plugin.
MY HTML video code looks like below
<div class="row">
<div class="column">
<img id="myImg" class="errImage" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAABAAAA" style="width:100%;">
</div>
<div class="column">
<video autoplay muted loop controls id="errorVideo" style="width:99%">
<source src="C:\Program Files (x86)\Jenkins\workspace\Free style node test\e2e\artifacts\videos\Getting Started\My First Test\1.mp4" type="video/mp4">
</video>
</div>
</div>
I tried configuring following content security policy
System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "")
System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "sandbox; default-src '';")
not sure what policy is blocking the video from playing on the Jenkins publisher.
Can someone help to resolve this issue? Thanks in advance.
The policy which blocking your video from playing is media-src == "none", derived from default-src == 'none' (see https://wiki.jenkins.io/display/JENKINS/Configuring+Content+Security+Policy)
Take a look at the solution in https://github.com/jenkinsci/screenrecorder-plugin/blob/master/src/main/java/org/jenkinsci/plugins/screenrecorder/ScreenRecorderBuildWrapper.java, it could work for you:
String curCsp = System.getProperty("hudson.model.DirectoryBrowserSupport.CSP","");
if (!curCsp.contains("media-src"))
{
System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", curCsp + ";media-src 'self';");
}

Dojo Uploader with Drag and Drop

I am trying to recreate this example in my project, to add the drag and drop feature to the dojo uploader:
http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/form/tests/test_Uploader.html
Copying the exact same code in jsfiddle or in my application the line
if(uploader.addDropTarget && uploader.uploadType=='html5'){
returns undefined for addDropTarget and iframe for the uploadType.
I tried it with various browsers, and even added force: html5 in the uploader but nothing changed.
Please, note that everything works ok except from the dnd.
I am using dojo 1.8.1.
In dojo 1.8, the uploader is not yet fully AMD compliant. So, in order to make the example from the trunk tests work in 1.8, you need to create the uploader programmatically using the dojox.form.Uploader constructor rather the required AMD module. As follows :
<form method="post" action="UploadFile.php" id="myForm" enctype="multipart/form-data" >
<fieldset>
<legend>DnD Test</legend>
<input class="browseButton" id="uploader"/>
<input type="submit" label="Submit" data-dojo-type="dijit/form/Button" />
<div id="files" data-dojo-type="dojox/form/uploader/FileList" data-dojo-props='uploaderId:"uploader"' ></div>
</fieldset>
</form>
<div id="dropTarget">Drop files here !</div>
And in the javascript :
require([
'dojo/parser',
'dojo/dom',
'dijit/registry',
'dojox/form/Uploader',
'dojox/form/uploader/FileList',
'dojox/form/uploader/plugins/HTML5',
'dojo/domReady!'
], function(parser, dom, registry, ready){
var dropTarget = dom.byId('dropTarget'), uploader;
parser.parse().then(function(){
// You need to use dojox.form.Uploader, as in dojo 1.8,
// the module is not fully AMD compliant yet.
uploader = new dojox.form.Uploader({
name:'uploadedfile',
label:'Select Some Files',
multiple:true,
force:'html5'
}, 'uploader');
uploader.startup();
if(require.has('file-multiple')){
console.debug("Adding a new drop target");
registry.byId('uploader').addDropTarget(dropTarget);
}
});
});
See http://jsfiddle.net/psoares/6r2jZ/

DOJO 1.8 /dojo/request/iframe is deleting <form></form> when uploading a file

I'm seeing a really strange behavior under DOJO 1.8.0. I'm trying to asynchronously upload a file. The file is uploading just fine and I'm getting the payload as expected, but when clicking the submit button the tags and everything in between is inexplicably deleted! It just vanishes. (NOTE: I've isolated this testing to a test page, so there's nothing else at play that would account for it. You're looking at the entirety of the code.)
require(['dojox/form/Uploader',
"dojo/request/iframe",'dojo/dom','dojo/on',
'dojox/form/uploader/plugins/IFrame', 'dojo/domReady!'],
function(Uploader,iframe,dom,on){
on(dom.byId("myButton"), "click", function(){
iframe.post("UploadFile.php",{
form: dom.byId("myForm"),
handleAs: "json"
}).then(function(data){
console.log(data);
}, function(err){}
);
});
<form method="post" id="myForm" enctype="multipart/form-data" >
<input name="uploadedfile" type="file" data-dojo-type="dojox.form.Uploader"
label="Select Some Files" id="uploader" />
<input id="myButton" type="button" value="Submit" />
</form>
Any ideas from anyone with DOJO 1.8 experience? I've been using /dojo/io/iframe just fine with versions 1.6 thru 1.7. This started happening only with 1.8 using the new /dojo/request/iframe code.
See http://jsfiddle.net/seeds/XD4Dc/1/
The form element is set to have target of dojo's injected iframe. Then form gets like, 'dijitHidden' with abs position -1000 top/left. Cant see why tbh.
There's a fix in the fiddle, add to your callback:
with(dom.byId("myForm").style) {
position = "";
left = "";
top = "";
}
I took this issue to the DOJO-Interest group and it was found to be bug with DOJO 1.8.0. It'll be fixed with the upcoming 1.8.1 release.
http://bugs.dojotoolkit.org/ticket/15939
From the bug report:
The form wasn't getting "eaten", but rather the position was getting set on it and moved out of the viewport because of some faulty logic to check if the form was in the DOM. This has been fixed and should be in 1.8.1.

Dijit combobox not rendering in custom widget

I am trying to use the combobox provided by Dijit inside of a custom-made widget. I have been using Dojo's tutorial on comboboxes to guide me.
When I implement a stand-alone webpage similar to their tutorial examples, everything worked fine; but when I ported the code into my custom-made widget, it just renders the combobox as a plain HTML text box.
Here's what my custom widget's template looks like:
<div class='customWidget'>
...
<div dojoAttachPoint="mainDiv" class="mainDiv">
<div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore" url="states.txt"></div>
<input dojoType="dijit.form.ComboBox"
store="stateStore"
value="California"
searchAttr="name"
name="state2" />
<button dojoAttachEvent="onclick:chooseState">OK</button>
</div>
...
</div>
In the widget code, I require the combobox and read store:
dojo.require("dijit.form.ComboBox");
dojo.require("dojo.data.ItemFileReadStore");
I also tried putting these includes in a <script/> within the custom widget (similar to the way they do it in the tutorial), but it didn't work (in fact, it appears as if the script tag wasn't even evaluated, since I couldn't reference a function I declared inside of it!)
Do you have widgetsInTemplate in your widget declaration?
dojo.declare('my.widget.Cool',[ dijit._Widget, dijit._Templated ], {
widgetsInTemplate: true,
// rest of widget JS here
});
Here's an article about including other widgets in your template.
Have you tried adding:
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.addOnLoad(function(){
dojo.parser.parse();
});
</script>
(from Dojocampus) to ensure Dojo is parsing the page? Are there any errors in your Javascript console? Is the page rendering any normal Dojo widgets?