Can anyone tell me why the following line of code throws and error
$('#id').dataset.assoc
and these two do not?
$('#id').data("assoc")
$('#id').dataset.file_id
Is it something to do with the word assoc?
As mentioned in the comments by adeneo and Banana, the first and the last should not work. Attempted both in a jsFiddle and both threw errors. This is because .dataset is not within jQuery. You must have code internally or externally adding dataset to that jQuery object.
the following are similar syntax but should work (where with only the details you gave, your code shouldn't work):
document.getElementById("id").dataset.assoc
$("#id")[0].dataset.assoc
This is due to data-* attributes in HTML5.
Related
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/
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.
We are using the html converter on a lot of our templates that render in jsViews/jsRender. We came across an issue, where jsViews was fumbling on a "Mismatch" error when a tag was in the text it was rendering. We did not notice this, until recently updating to the latest versions. Her is the snippet we were originally using, that is now causing an error:
<div id="Resizable" data-link="html{:Text}"></div>
Now, I noticed on the jsRender APi, it says to handle the tag like the following, and when doing so, it renders the data correctly, encoding the html content as wanted.
<div id="Resizable" data-link="{html:Text}"></div>
My question is this: Was it not setup properly before, and we just never noticed the error, did this change on the latest version, and is the latter way the only correct way to use the html encoder? Any help is greatly appreciated. Thanks!
Here is the documentation topic which explains the syntax for data-linked elements: http://www.jsviews.com/#linked-elem-syntax
See especially the section on Full syntax - multiple targets, multiple tags, multiple bindings... where it says:
The full syntax allows you to bind multiple expressions each to a different target 'attrib', and is written like this: data-link="attrib1{linkExpression1} attrib2{linkExpression2} ..."
And note what it says lower down:
The default target for most elements is innerText, but for inputs and select it is value.
And it gives some examples:
<div data-link="{:name}"></div> (one-way binding to innerText - default target attrib - so automatically HTML encodes).
<div data-link="html{:name}"></div> (one-way binding to innerHTML)
So what this is saying is that the default target for a data-linked div is innerText - which means that if you inject HTML markup it will in effect HTML encode that markup 'for free'. It won't insert HTML tags as inner HTML.
If you did add the HTML converter, you would write it like this <div data-link="{>name}"></div> - but adding HTML encoding when you are inserting as innerText won't change what the user sees.
(An alternative syntax for the same thing would be what you wrote above <div data-link="{html:name}"></div>). See the documentation here on the HTML converter: http://www.jsviews.com/#html.
If you WANT to insert as inner HTML, then you use the HTML target, which the second example above: <div data-link="html{:name}"></div>.
And you could then add encoding as in <div data-link="html{>name}"></div>.
But more likely using the default innerText target and no explicit converter is what you need.
See also this SO response to a similar question How to keep helper function generated HTML tags for JsViews
BTW - no, this should not have changed behavior in the latest version. If you saw a change in behavior, can you add an issue on JsViews GitHub project, ideally with a jsfiddle showing something which rendered differently between the two versions?
After the help from Boris, and looking at the documentation, the answer is clear. It is not syntactically incorrect, but is used in two different ways. One is for encoding the data, and the other is for setting the value to the innerHTML property.
{html:property} ---> encoding
html{:property} ---> use innerHTML at target
html{html:property} ---> This fixed our problem, and was the solution we needed.
I have been looking around for a HTML formatter to incorporate with a project I am doing. I need it to be written in Javascript since I want the formatting done on the client side.
The problem is, the few that I have tried don't work very well... For example:
http://www.davidpirek.com/blog/html-beautifier-jquery-plugin : Has a problem with one of the For loops (in the cleanAsync function). Chrome says "unexpected token ILLEGAL"
JS Beautifier on GitHub : When I have links in the HTML it will put a newline character after it. The problem is, I have a period directly after the link in some cases and it will add a space between the link text and the period in the sentence. I tried poking around to fix it but I could not.
Are there any others, or does anyone have recommendations to fix the above two?
EDIT:
This is for editing code, so I just need something to tab in the lines, etc. The code output will go in a textarea.
A few to look at, all have working demos:
http://alexgorbatchev.com/SyntaxHighlighter/
http://shjs.sourceforge.net/
http://jush.sourceforge.net/
http://dojotoolkit.org/reference-guide/dojox/highlight.html
use https://github.com/beautify-web/js-beautify and pass your code to html_beautify() method.
my website the list expander is not working. I think it might be because I changed the CSS, but I cannot figure out how to make it work.
Sorry the url is [http://hpcommtoolkit.com/Communication_tools.html][2] not the original.
[2]: http://hpcommtoolkit.com/Communication_tools.html
What list needs to be expanded? What code do you use for it?
Not sure what list you are referring to, however there is a fault in your HTML at line 405 with the style tag on the table which you should probably clean up:
style="BACKGROUND-IMAGE: url<img src="//images/afbottomgraphic.jpg"
The second double quote is ending the style tag prematurely. Background-image should be given a url in the form of url(path-to-file).
EDIT: Ok, I see your expandable sections in the new URL. They work correctly in Firefox, but IE8 is generating the following error: "Object doesn't support this property or method listexpander.js, line 69 character 3".
Looking at that line of code, the first thing I can see is that the variable "li" should have a "var" declaration on it to avoid it interfering with any global vars. I would also recommend running listexpander.js through jslint (http://www.jslint.com/) since the syntax has a few oddly positioned semi-colons.