Primefaces - Datatable Widget for var ... not available - javascript

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.

Related

interact.js drag/drop referencing div

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/

live code examples: cytoscape.js initialization -- incomplete?

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.

replacing page content with .html(content) is not working

I have a weird problem in jQuery. The problem is that I can smoothly use $('#container').html(content) to replace the page content but to specific page. It is not working all around. Gives 'TypeError' message in console. Is there any probability that using SlickGrid can cause such error. Because error is thrown only in that pages where I have used SlickGrid.
Any suggestion would be highly appreciated.
It's hard to tell what's going on with your page, but my guess is that you may have a conflict with the $ between jQuery and SlickGrid. Look at the noConflict function in jQuery - it may help you out.
Call $.noConflict(); before SlickGrid's javascript <script> tag is added, and then refer to jQuery functions by using jQuery(selector) instead of $(selector).
Hope this helps!

jQuery call followed by clicking accordion control fires Ms Jscript error

I have jquery modal that works perfectly fine.
But after closing this modal and clicking on accordion control(MS ajax) fires
Jscript runtime error
Microsoft JScript runtime error:
Sys.ArgumentTypeException: Object of
type
'AjaxControlToolkit.AccordionSelectedIndexChangeEventArgs'
cannot be converted to type
'Sys.CancelEventArgs'. Parameter name:
instance
I have done days of searching. But I couldn't find a solution to this.
I have tried scriptmode="Release". Single reference call to the jquery file.
I read some parts saying that some it helped some people to turn of smart navigation but I couldn't find how to do so.
If anyone has any idea on this it will be much appreciated.
Please.. Help~!
I've solved this issue by putting this
var $j = jQuery.noConflict();
at the end of my jquery.js file and referencing all jquery functions with a $j, instead of $
Ok I found the problem. One of the controls inside the container(div) which is loaded by jquery was throwing an error. So in this case, the error message did not help much to track that particular control down.
Thanks a lot for your effort guys!.

jQuery SO Vote-Object and Scope

This is a javascript question. The fact that it mentions this website is irrelevant. This does not belong on meta.
I'm working on a Greasemonkey script to auto-load additional pages of answers onto the first page of answers here at Stackoverflow as you scroll. This is working well. I want to maintain the ability to up-vote/down-vote the loaded items, so I'm using $.live(), which is also working fine.
My problem is that the vote-object, used by SO, is not found within the scope of the $.live() method, or atleast I think that is the problem.
$(".vote-up").live("click", function(D){
vote.up($(D.target));
});
$.get("/questions/1151074", function(data){
$("div.answer", data).insertAfter(".answer:last");
});
That's bit of sample code you can paste into your firebug console to test. You can see that vote, in the context of the .live() call is not accessible. How can I fix this?
Try unsafeWindow.vote.up().
See the docs. It's a security measure of sorts. Annoying when you forget though.

Categories