This is an issue related to Semantic UI's dropdowns at https://semantic-ui.com/modules/dropdown.html.
I have a bunch of multiselect dropdowns defined and have declared the line
$('.ui.dropdown')
.dropdown()
;
well before doing any sort of operations with the dropdowns, in order to activate the dropdowns' behavior. Curiously, however,
when I try using certain methods on the dropdown, such as $("#" + mydropdown.id).dropdown("get text"), I get an error in the Chrome Dev Tools, saying "Uncaught TypeError: No method named "get text".
But when I try to simply use $("#" + mydropdown.id).dropdown(), it works: I am able to access the dropdown element without any issue whatsoever.
What could be the cause? I am absolutely clueless as to why this could be happening. Any hypotheses as to what could be happening are appreciated.
Huh, the problem above was solved by commenting out a line of code that referenced bootstrap.in.js. I've heard that Bootstrap could interfere with Semantic UI, and I disabled Bootstrap.js in another application, but for some reason I forgot to do so within the current app.
Related
I need a little help from you if you are familiar with css, php or javascript.
I needed a grid display component for my site, and after searching I found a suitable one and installed it. Now the problem is that after activating the module related to this component on any page, the menu at the top of my site stops working. It means that there is an interference between the grid component and the menu. If I disable the grid module, the menu works again without any problem.
Please see for yourself in the link below.
http://test6.harfrooz.com/117-more/18376-top-20-ufo-sightings
Currently, the grid module is active under articles,so nothing happens if you click on the search button or the corresponding button on the sidebar menu. This issue occurs only in mobile and tablet display modes. So reduce the browser size to see what I mean.
The question is, what should I do to solve the problem? I don't think it should be a very complicated problem?
Also, when the grid module is active, the following error can be seen on the Google Inspect page.
mootools-core.js?d25b1e28c6a2a29d5e390c182349c46d:136 Uncaught TypeError: Cannot read properties of undefined (reading 'x')
at getWidth (mootools-core.js?d25b1e28c6a2a29d5e390c182349c46d:136:134)
at Object.check (script.js:137:23)
at Object.initialize (script.js:58:14)
at HTMLDocument.<anonymous> (script.js:442:14)
at n (jquery-1.7.1.min.js:2:14784)
at Object.fireWith (jquery-1.7.1.min.js:2:15553)
at Function.ready (jquery-1.7.1.min.js:2:9773)
at HTMLDocument.B (jquery-1.7.1.min.js:2:14348)
Please see this image for better understanding
I checked the URL. The reason [Menu] and [Search Box] not working (in mobile view) is JS error you saw in console. If you fix that, they will be fixed too.
I can see that your home page is OK currently:
http://test6.harfrooz.com
You can see that the grid is not loading anymore in article view but in your demo it is loading yet and I guess that's the reason (perhaps it occurred after disabling some menus?).
So you should disable grid in article view somehow! For first try check the template manager and see how many styles are there? Maybe you need to set different style for homepage and other pages. specific themes usually selected through menu manager.
How do I disable the context menu behaviour for all the elements inside a (most importantly a p5 canvas). At the moment I'm trying to disable the behaviour by disabling it off at the .
document.getElementById("ScriptHolder").addEventListener("contextmenu", funciton(e) {e.preventDefault();});
where "scriptHolder" is the id of the
When I run the webpage the JS file is linked to, it throws:
Uncaught SyntaxError: missing ) after argument list
Methods online of including a false item at the end of the list, as well as breaking it up into multiple lines don't work. Any help would be nice, thank you
You misspelled function; your code says funciton. That's probably why it's not working :)
I am attempting to use the Select2 library in my site to leverage placecomplete (following it's rather simple configuration steps here), but when I run the code I get a strange error -
Error: No select2/compat/query`
I've tried googling it and it really seems like no one else has encountered this?
My code in a nutshell is,
loading the files...
<link href="scripts/Select2/dist/css/select2.min.css" rel="stylesheet" />
<script src="scripts/Select2/dist/js/select2.min.js"></script>
<script src="scripts/jquery.placecomplete.js">//<![CDATA[//]]></script>
Tagging an input element in my body...
<input id="example123" class="example123" type="text" />
In my document.ready function, calling the following code...
$('#example123').placecomplete({});
and thats where it throws the error.
Any ideas where Im going wrong, and what this error means?
You are running into two issues here, both of which can easily be fixed.
Select2 4.0.0 no longer supports the query option in the slimmed down, standard build. This must be included in the full build (select2.full.js) as it is handled through a backwards compatibility module.
You are using Placecomplete and it depends on an older version of Select2. It looks like Select2 3.5.2+ can work, but I can tell from the options that it is using, it cannot work with Select2 4.0.0. There is an open ticket about this for Placecomplete.
For me, changing the <input /> tag to a <select> tag worked.
I've had this when you have two controls on your web page with the same Id - I had a hidden control and a select (the hidden control was first).
This can also happen if you try to initialize select2 on field type that does not "support" select2, like a hidden field or something along those lines.
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.
I am attempting to utilize Trent Richardson's TimePicker jQuery UI plugin to add a time picking widget to a Wordpress plugin. jQuery and jQuery UI are both enqueued as they should be and are working fine (the Datepicker/Slider requirements for TimePicker have both been verified to be included and working as well as the TimePicker script is loading fine).
However, Firebug is giving me the following error:
TypeError: $.ui is undefined
The line in question is this:
$.ui.timepicker = $.ui.timepicker || {};
I understand that it's occurring because for some reason this script isn't finding $.ui (which I assume is a standard notation for referring to jQuery UI?) I also tried simply pre-defining the $.ui at the top and I got rid of that undefined error, but then it threw another for
$.datepicker
That is further on down in the code on line 973. There doesn't seem to be a lot of sense in explicitly defining $.ui and $.datepicker in the top of the script when they should be valid references to the jQuery objects... I'm just not sure how to fix what appears to be a broken link.
I ended up finding another TimePicker plugin that worked right "out of the box" so to speak. Literally just changed the reference from the old jquery.timepicker.js to the new jquery.ui.timepicker.js and everything is working beautifully.
My general intuition/feeling on the "old" script is that it might be using either an outdated or advanced api calling method that is causing problems with jQuery's/UI's version.