I am currently working on a project where most of the code has been written by someone else . I was supposed to do some slight modifications in the existing script to incorporate changes in a new file. I came across a situation where it was very confusing . The scenario is as cited below:
I have an element named as complextabs and it is being used for almost all the pages, except for the one which is being created newly. The situation is there is a code snippet that is written as $('.complextabs').hasClass('.hide'). this incredibly returns the same as when the element complextabs is not even present in the page. Can someone please throw some light on this
And yeah, I am working on Backbone.js . Has this got something to do with the use of Backbone.js
Any suggestion and advice is highly appreciated
Nope, that has nothing to do with the use of Backbone.
Consider the following:
$('.asdasda').hasClass('hide')
This will return false, and it should return false because $('.asdasda') does not return any results. Just running that will yield a JQuery wrapper over an empty list and since there are no elements then obviously there's nothing in there with the css class hide.
If you want to check that there is an element with both the complextabs and the hide class then use $('.complextabs.hide').length.
Related
Code:
const elements = $(".container .element").first().nextAll().addBack();
Here's my HTML:
The code is supposed to grab the first element and all the content after it. Depending on the HTML, this could return at a lot of different things, including nothing if I have a typo in my jQuery code. If the code that follows doesn't function correctly, how do I see what's inside elements for troubleshooting purposes?
I tried logging elements.html(), but that only printed the contents of the first element.
I tried using the Firefox debugger on elements, but the object is very complex, contains a lot of irrelevant troubleshooting information, and I couldn't figure out how to find what the jQuery object actually represents.
The only way I could figure out my code was correct was by logging elements.text(). That printed the text inside every element, and by doing that, I knew I had grabbed each one. It didn't tell me I grabbed the BR tags, but the documentation for nextAll said it would, so the gave me another faith it was doing what I wanted (I don't like relying on faith). The other problem with this solution is that it's highly contextual and won't work in all situations. There won't always be text in the HTML.
I'm out of ideas. How do I see what's inside a jQuery object for troubleshooting purposes?
Use
console.log(elements.get())
The jQuery get() method with no arguments returns the contained DOM elements as an array.
I was designing a webpage and encountered the following code written in javascript I want to know if it's ok if i remove this code and add my own code or does it create any problems Note: This was an code found in an HTML5 Template
Here is the code:
var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
elems.forEach(function(html) {
var switchery = new Switchery(html);
}
This code selects all HTML elements that have a CSS class of js-switch applied and creates a new Switchery object for each of them. Since you didn't provide much context I have to guess but it's very likely that this will turn standard HTML checkboxes into iOS-style switches.
See also the Switchery homepage for more information: http://abpetkov.github.io/switchery/
Whether this code is needed or not might be a design decision. It'll only change the visual appearance but the sliders still behave like checkboxes. It might, however, be worth checking whether your site actually contains any HTML checkboxes with the js-switch class applied. If not, that code can definitely be dropped.
I am new to javascript and have problems placing this element.
I can open terminals and write to them no problem. However everytime I create one it is just appended to my body at the very end.
according to this example:
https://gist.github.com/steinwaywhw/9920493
I could set a parent during the open method but I use this and it just still appends to the end of the body.
This is the method I use:
term.open($("#myterm").find("div")[0])
I might be overlooking really simple but I cannot seem to find it :/
There is a bug with term.js and jquery selectors, please test with getElementById like :
<div id="term"></div>
term.open(document.getElementById("term"));
it work for me.
Pascal
I'm a beginner developer in Html/Javascript/CSS/Jquery coding
and while working a project, I had to integrate Jquery with previous code.
As soon as I imported Jquery, even simple buttons became styled badly. Jquery worked fine as long as I used its classes to assign styles to objects.
However since the rest of the project is not to change style, I need to know what I'm doing wrong. I've checked the objects for classes, and they have no classes, so it's not a css issue.
I narrowed down the error to the following screenshot, but I still can't figure it out. It seems to be something simple that I missed but I have no idea what it is.
Ignore the class="ui-content" and class="ui-button-text". I was just testing if something would change (nothing changed).
Try to inspect the elements that are styled wrong with your developer tools in the browser. The only styling in your example is in jquery.mobile-1.4.5.min.css, so that's where I'd be looking. Did you mistakenly delete a link tag to your stylesheet?
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.