I have problem to put my own Javascript in a separate file and use it from JQWicket (testing Drag & drop plugin). Here is myscript.js:
com.mycompany.Test = function() {
return {
test_func: function() {
$('#msg').text('X position = ' + ui.position.left + ', Y position = ' + ui.position.top);
}
}
}
And in the java I want to call test_func:
DraggableOptions drop = new DraggableOptions().dragEvent(
"com.mycompany.Test.test_func()");
But it does not work! I think the problem is that myscript.js is included before jquery.js and I do not know how to reorder include statements.
I'm very grateful if anyone has a working example with a separate javascript file that is called from jqwicket!
Thanks in advance!
Add an JQBehavior instance referencing "myscript.js" to your component/page like this:
JQBehavior behavior = new JQBehavior();
behavior.addJsResourceUrls("myscript.js");
Component comp = .... ;
comp.add(behavior);
Related
This is a long shot.... but I hope someone can help.
I'm using a JackBox - Responsive Lightbox - and it works fine with a static HTML, but I want to change the code to be more flexable.
I use DataTables and use a model to view more details - including photos of the main asset and an image if the area/asset is "excluded" - so there could be 100's of items in the list.
If I use the static link:
<a class="jackbox data-group="text_link" data-title="Text Link"
href="/system/showImage.php?
subFolder=assetPhotos/Legionella/Assets&filename=main121212.jpg">View</a>
Everything works fine...
However, if the global variable exclusion is set to "main121212.jpg" and I change the above to:
<a class="jackbox" data-group="text_link" data-title="Text Link"
href="javascript:showImageForJackBox('assetPhotos/Asbestos/Assets',
'exclusion')">View</a>
and have the function showImageForJackBox declared as to:
showImageForJackBox = function(path,outImageFile) {
switch (outImageFile.toString()) {
case "exclusion":
theFile = exclusion ;
break;
default:
theFile = "" ;
}
location.href = "'/system/showImage.php?subFolder=" + path + "&filename=" + theFile ;
}
I get an error in the debugger console of firebox saying:
referenceError: showImageForJackBox is not defined
javascript:showImageForJackBox('assetPhotos/Asbestos/Assets', 'exclusion'):1:1
Does anyone have any ideas on how I can go about ensuring the function is referenced.
Thank you in advance for any help given
ARGH Idiot!
I just needed to change the "Attributes" - so after the AJAX call to find the filename for the exclusion... I just changed the href and data-thumbnail Attributes!
exclusionPhoto = data.exclusionPhoto ;
if (exclusionPhoto === null ) { exclusionPhoto = "" ;}
var a = document.getElementById('viewExclusionPhoto');
a.setAttribute("href", "/system/showImage.php?subFolder=assetPhotos/Asbestos/Assets&filename=" + exclusionPhoto);
a.setAttribute("data-thumbnail", "/system/showImage.php?subFolder=assetPhotos/Asbestos/Assets&filename=" + exclusionPhoto);
How is it possible to make the JS work in this:
http://jsfiddle.net/JoshSalway/3vVVc/
<script type="text/javascript" id="SCRIPT_12">var arICImages0 = new Array(4); arICImages0[0] = "http://easydealsonline.info/prod/images/281259.jpg";arICImages0[1] = "http://easydealsonline.info/prod/images/281260.jpg";arICImages0[2] = "http://easydealsonline.info/prod/images/281261.jpg";arICImages0[3] = "http://easydealsonline.info/prod/images/281262.jpg"; function swapIC0(n) { document['ICImage0'].src = arICImages0[n]; }
</script>
Like this:
http://www.ebay.com.au/itm/New-Stage-Light-Truss-Tripod-Lighting-Stand-Rack-/261352049121
I copied code with SnappySnippet. Trying to re-create similar JS on this side. what is missing to make "javascript:swapIC0(0);" work?
How do you make JS & CSS work inline?
Here's an updated fiddle that should work - http://jsfiddle.net/3vVVc/1/
I changed the function in your javascript to:
function swapIC0(n) {
document.getElementById('IMG_20').src = arICImages0[n];
}
I want to add functionality when clicking on items in the legend in Rickshaw. I use the standard code to add toggle functionality, which I want to extend to run my own function:
shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
graph: graph,
legend: legend
}
Is there a way add a function of my own here? I also tried looking through and editing the code in Rickshaw.Graph.Behavior.Series.Toggle.js, but I couldn't get anything to run upon clicking items in the legend. (Might it be that the imported js file is cached so that my edits don't take effect?)
As you explicitly asked about what source code to modify, I highlighted it below.
If you modify the source, upgrading to a new version becomes much harder, extending/creating own version would be the preferred way to go.
In Rickshaw.Graph.Behavior.Series.Toggle.js
'Rickshaw.Graph.Behavior.Series.Toggle.js' change the following
Rickshaw.Graph.Behavior.Series.Toggle = function(args) {
...
this._addBehavior = function() {
this.graph.series.forEach( function(s) {
s.disable = function() {
if (self.graph.series.length <= 1) {
throw('only one series left');
}
s.disabled = true;
alert('disabling ' + s.name); //HERE
self.graph.update();
};
s.enable = function() {
s.disabled = false;
alert('enabling ' + s.name); //HERE
self.graph.update();
};
} );
};
...
};
Here I have a code that create a sidebar:
var side_bar_html = "<a href='javascript:google.maps.event.trigger(gmarkers[" + parseInt(gmarkers.length - 1) + "],\"click\");'>" + place.name + "</a><br>" + '<div class="raty" />' + "</br>";
$(side_bar_html).appendTo('#side_bar').filter('.raty').raty({
score : place.rating,
path : 'http://wbotelhos.com/raty/lib/img'
})
How I can create a function from this code to create a sidebar with function ...
So something like that:
function Create_a_sidebar_and_put_it_into_ID#sidebar () {
//for every marker to return html string
return "<div class='element'>"+place.name+"</br>"+place.rating+"</div>" + etc...
Becouse I have a problem with creating html, I dont know what to append where and I dont have contol over that
Is it possible?
If I'm understanding your question correctly, you're asking how you can take your first code block that creates a rating for a certain place, and refactor it so that you can arbitrarily create sidebars for places at will. So that's how I'll approach this answer.
As #Sime Vidas mentioned, you can start by taking the code that creates the sidebar itself and making that a function such as that below. I've modified the function a bit to take the javascript out of the href attribute (which is generally considered a bad practice) and replaced passing an html string into $.fn.init (which I've found steeply degrades performance) with using DOM methods to create elements. You also don't need the <br /> after your a element because divs by default are block elements.
function createSidebar(place) {
var $sidebarLink = $(document.createElement('a'));
var $raty = $(document.createElement('div'));
$sidebarLink.attr('href', '#').text(place.name).click(function(evt) {
evt.stopPropagation();
google.maps.events.trigger(gmarkers[parseInt(gmarkers.length - 1, 10)], 'click');
});
$raty.addClass('raty').raty({
score: place.rating,
path: 'http://wbotelhos.com/raty/lib/img'
});
return $([$sidebarLink, $raty]);
}
Now you can do things like
var $sidebar = $('#side_bar');
places.map(createSidebar).forEach(function($sidebarPart) {
$sidebar.append($sidebarPart);
});
Sorry if I'm off track with answering your question, but I think this is what you were asking. If not feel free to leave a comment and we can talk about it more!
I am quite new with CKEditor (starting to use it 2 days ago) and I am still fighting with some configuration like removing the tag from editor.
So for example, if a user type in source mode the following:
<script type="text/javascript">alert('hello');</script>
I would like to remove it.
Looking the documentation, I found that this can be done using an HTML filter. I so defined it but it does not work.
var editor = ev.editor;
var dataProcessor = editor.dataProcessor;
var htmlFilter = dataProcessor && dataProcessor.htmlFilter;
htmlFilter.addRules(
{
elements :
{
script : function(element)
{
alert('Found script :' + element.name);
element.remove();
},
img : function( element )
{
alert('Found script :' + element.name);
if ( !element.attributes.alt )
element.attributes.alt = 'Cookingfactory';
}
}
});
The img part is working well but not the script one. I guess I missed something. It even does not display the alert message for script.
Any help would be more than welcome :o)
You can use this :
CKEDITOR.replace('editor1', {
on: {
pluginsLoaded: function(event) {
event.editor.dataProcessor.dataFilter.addRules({
elements: {
script: function(element) {
return false;
}
}
});
}
}
});
If you are using CKEditor 4.1 or above, you may use Advanced Content Filter to allow the content you want.
If you are using CKEditor 4.4 or above, there is an easier way. You can use Disallowed Content to filter content you don't like .
config.disallowedContent = 'script';
As I'm having CKEditor 4, I did the next
CKEDITOR.instances.editor1.config.protectedSource.push( /{.*\".*}/g );
It will ignore quotes in smarty curly brackets