So, this is maybe just a question for interact.js users or I am missing something completely..
I was looking for a javascript library that provides me with drag/drop/scale/rotate and touch functionality for all those given functionalities. So, I stumbled upon interact.js, yet I seem to have a problem referencing elements while using the onDrop method:
I'll just take the code of the interact.js page, which I'm providing you here: http://jsfiddle.net/Zyy2N/2/
The part that is making problems is:
$(event.relatedTarget.id).hide();
which doesn't do anything, yet also doesn't throw any errors. More so:
$('#yes-drop').hide();
works, so does:
console.log(event.relatedTarget.id);
which returns the id as expected. Is this an error?
Solution: One should actually use the correct syntax if one wants code to run correctly...
$('#'+event.relatedTarget.id).hide();
This would actually be a correct and working solution :
http://jsfiddle.net/Zyy2N/3/
Sligthly better:
$(event.relatedTarget).hide();
http://jsfiddle.net/Zyy2N/8/
Related
I am using primefaces 4.0 and jsf 2.2 in my Application. I have created a page where a datatable is nested in a tabview. Now when I want to filter the datatable, it keeps loading and doesn't how a result.
After some time i recognized, that javascript throws the following error: "Widget for var 'test' not available! ".
I guess this should be the issue, but what's the problem or how can i solve this? Does anyone have an idea?
Best Regards!
I am posting my answer here hopefully can help some people out there.
I have the same problem. My case is I want to perform the default filter for my <p:dataTable>, thus, I have to perform the PF('dtWidgetVar').filter(); script in javascript when page load.
This is my initial attemp:
$(document).ready(function()
{
PF('dtWidgetVar').filter();
});
It looks perfectly fine, but just doesn't work. Until I find the error in Chrome console Widget for var 'dtWidgetVar' not available!, and googling it for hours, finally I found this thread. Therefore I add a $(function(){}); to wrap my script as below:
$(document).ready(function()
{
$(function()
{
PF('dtWidgetVar').filter();
});
});
BOOM!, finally it works. From here as well as here both stating that the $(function(){}); and $(document).ready(function(){}); are actually the same, so I have also no clue why it works. I have also try to only use $(function(){}); but it doesn't work. Have to use both functions to make it works, at least in my case. But still, I hope this helps some humans! Sorry for my bad English.
In the absence of posted code it's impossible to say. However, there are a couple of things I can suggest to look for.
Check to see if you have a duplicate widget name in your view.
Obviously you wouldn't intuit that from the message you got, but I
recall in the past getting this same message for duplicate widget
names
Check to see if you have a component where you've given the widget var the same name as the ID. I've read that this is to be avoided.
A very common error is to conflate ids and widget names. That
is, you are trying to use an ID as a widget var
See what in your code is trying to reference "test"
I can't confirm this myself, but I've seen other StackOverflow posts that suggest this is a possible error when you have imported two copies of the jQuery library
I've experienced Widget for var '[widgetVar]' not available when using p:ajax update="#all" inside a p:commandButton. I could avoid the issue by putting content to be updated in a h:panelGroup which I referenced in update and put the element declaring widgetVar outside that panel group.
In this particular case some of the popover functionality needs to be adapted to our particular needs.
The change itself is quite trivial, it's a modification to this function.
I just need to add another placement, but now I'm not exactly sure how to approach this.
One way would be adding a line to the bootstrap.js file in my repository, that works that has the serious disadvantage of having trouble when updating, I may remember now, but the next one to come after me might generate a hard bug to fix.
Another way I've thought of is extending the function but it might not be easy the way bootstrap is setup. As far as I understand since bootstrap functions are preceded with a plus (+function(){}), they're executed immediately and so I can't get in the way of that.
I've tried modifying this function $.fn.tooltip.prototype.getCalculatedOffset but while it does modify it correctly, the modified one never gets called since it's only called once.
It might be possible but I think the complications of this, outweighs how trivial the fix is (Unless I'm missing a more obvious approach).
Another idea would be forking bootstrap, but I'm not sure what would that accomplish, in the end I'm back with the same problem.
What's the most normal way to approach this? What are the best practices?
Similar to the other answer but using the pop over function, just had to catch the right function!
$.fn.popover.Constructor.prototype.getCalculatedOffse
http://jsfiddle.net/59Er7/3/
A reference is saved to Tooltip as $.fn.tooltip.Constructor in line 1472:
$.fn.tooltip.Constructor = Tooltip
Modifying $.fn.tooltip.Constructor.prototype.getCalculatedOffset (of course not in the original file, but somewhere in your code) should affect the original Tooltip, which is "instantiated" in $.fn.tooltip.
I don't know whether this is best practice, but should work.
jsFiddle Demo
Being brand new to cytoscape.js, I may be missing something obvious. Please forgive me if that is so.
I am studying the first example offered here:
reached from this page
Three files are offered -- HTML, CSS, JavaScript -- along with the impression that these three will, when loaded into my browser, create a running example.
But the HTML seems to be incomplete, possibly in two ways:
the JavaScript on the jsbin page needs to be included via a script tag
the variable cy is not defined anywhere that I can see, leading to this error message in the console: Object #cy has no method cytoscape
A stack overflow search on that error message points back to the very fine cy.js documentation, but alas, I am still in the dark: where do I initialize the "cy" object?
And best of all, where can I find a complete working example, useful for such a raw beginner as myself, something I can pore over and study until I begin to grasp the logic of this style of programming, and make use of this very fine library?
Thanks!
Your first example is indeed a fully working example. Just use the menu to the top left. Choose File -> Download. This will download a single HTML-file, that works out of the box.
The file is called jsbin.ravecala.1.html. Open with
firefox jsbin.ravecala.1.html
(I also struggled a while before realizing this.)
I really don't know what's your JavaScript & jQuery knowledge level, but it seems you may need to practice it all a little.
Yes, if you're referring to the following tag:
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
This is indeed necessary, as it is the basis of cytoscape.js, the library itself, wich allows, for instance, add the method cytoscape to the variable #cy, as you mentioned in your second point.
The variable #cy is the div itself. jQuery refers to objects IDs this way, with #. So:
<div id="cy"></div>
Can be referred as $("#cy"). Wich adds the cytoscape function to it is the library itself.
I think that this live example is really good, although the one you linked is more basic and appropriate to get known with the basic structure and initialization of cytoscape.js. I suggest you to get known with jQuery (this course was really clear to me) and read the cytoscape.js documentation, which is full of rich examples.
Uhm, I've got this script but it does not work.
It's all about this line: document.getElementById('thetest').addClass('superspecial');
As soon as the class should be added (but it isn't) the whole script quits...
Does anybody know why?
Should be:
jQuery('#thetest').addClass('superspecial');
or
document.getElementById('thetest').className += ' superspecial';
document.getElementById doesn't return a jQuery element.
That's why you get has no method error.
I know this is a bit of an old post by now, but I ran into it myself and I used a method that wasn't named before to solve it.
Instead of using
document.getElementById("name").className+='superspecial';
I used
document.getElementById("name").classList.add('superspecial');
After some research it seems that this is a fairly new way to do it that isn't supported in a lot of browser versions other than the latest. Browser requirements to use this functionality are as described here:
https://www.w3schools.com/jsref/prop_element_classlist.asp
I don't know the exact difference between the two solutions, but it seems to me that getting the classList and adding to it with an existing function would be the preferable option. Especially as += is a general method of adding things to eachother that doesn't always have to work the way you expect it to.
Hopefully the title is clear. I'm talking about the large image comparison slider on the homepage of JpegMini.
I've managed to identify it as needing three core files (written as they are named on the site):
jquery.min.js
jquery-ui-1.8.14.min.js
scripts-0135.min.js
It's this last one I'm unable to find any information about so it may hold the secrets but I don't know.
Anyone got any ideas?
The .imagePairs elements have a mousemove event bound:
$('.imagePairs').data('events').mousemove[0].handler
is a function.
The code is apparent inside scripts-0135.min.js, but it is minified.
What you can do is parsing it through jsbeautifier and see if you can make something out of it. It will still have variable names which make no sense, so it will not be easy.
Looking at the code, it seems like they initialize it with $('.imagePairs').myBeforeAfter, which is most probably the function that handles the effect.
I never was able to determine the script used, in the end I searched the web and found a suitable alternative which came with good documentation. http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/