when using special charactes like . or / in id's for a jQuery UI selectmenu I do get JS syntax errors when clicking on one of the options in the open menu.
I know that in jQuery I would need to escape the special characters, but this code seems to be deep inside the lib itself.
Not sure if I miss something before I report a bug so I would like to get hints!
I'm using jQueryUI version 1.11.1 with jquery 1.11.1 but tried other versions starting from 1.10 in this fiddle
<select name=".speed/" id=".speed/" class="sm">
<option>Slower</option>
<option>Slow</option>
<option selected="selected">Medium</option>
<option>Fast</option>
<option>Faster</option>
</select>
The error message (in chrome console) is:
Uncaught Error: Syntax error, unrecognized expression: .ui-selectmenu-menu, #.speed/-button
jquery-1.10.1.js:1924
TIA
You can use the name attribute or document.getElementById() to get an Id that you can't use as a jQuery selector:
var elt = $(document.getElementById(".speed/"));
var elt = $("[name='.speed/']");
If the errors are generated by the library itself this won't really help much. However you could try replacing the invalid characters in the id with this as a workaround:
elt.attr("id", elt.attr("id").replace(".", "dot").replace("/", "slash"));
// ... possibly include other characters we don't like
The proper way of course would be to use id-s without dots and slashes. This is a rather sloppy way of working around it but it will work. Use with caution!
Related
I am trying to create a Select2 box with InputMask to insert IP addresses and add them as tags.
If I use any of the libraries on its own, it works like a charm but both together results in strange behavior.
When I type in numbers, the mask is not filled but rather it seems to expand.
I changed the type of the select2 <input class=“select2-search__field“> from search to text. The Inputmask library makes this necessary, but it should not cause errors because the types are functionally identical.
I created a Fiddle to show the behavior: Fiddle
HTML:
<select multiple id="sel1" style="width:100%"></select>
JS:
$("#sel1")
.select2({
tags: true
})
.on("select2:open", function () {
$(".select2-search__field")
.attr("type","text")
.inputmask({alias: "ip", greedy: false});
})
In my local example I changed the library to support search and the behavior is the same.
Am I missing something?
There is a bad news for you if you MUST use version 4.0.5.
Fixed in jsfiddle by downgrading select2 to version 4.0.2
The main thing is version <= 4.0.2
https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.js
Tried 4.0.3 onwards up to 4.0.6-rc.1 but no luck.
Opened up issue select2#5216 with select2.
I did a slight change but that has nothing to do with the problem itself.
$('.select2-search__field').attr('type', 'text');
$('.select2-search__field').attr('style', 'width: 10em;');
$('.select2-search__field')
.inputmask({
alias: 'ip'
});
Okay, if I could offer a bounty for this I would - I offer virtual karma.
As mentioned in the title I have an .NET/MVC4/Jquery Mobile/Knockout website. On the index page there is a button
<button data-bind="click: getResults" data-theme="f">Search</button>
which calls a javascript function
$.mobile.navigate("/results?option1=a&option2=b", { transition: amw.transitions.slide });
This works great on all browsers and devices except Chrome/iPhone. As far as I can tell the version of Chrome or iOS does not matter. The resulting URL in the address bar is
iPhone/Chrome: http://www.mywebsite.com/#/results?option1=a&option2=b
Other Devices: http://www.mywebsite.com/results?option1=a&option2=b
I have put alerts throughout jQuery mobile to try and figure out what is going on (if someone knows a way to debug chrome on iOS let me know) and I cannot see where the extra # is being added.
This may not seem like a big deal but the url ends up being passed on to a downstream service that really does not like the extra #.
I can put in a hack at the call to the service to strip out the # but I would really like to figure out what is happening.
The only suspect line I can find in jQuery mobile (1.3.0) is line #2298
// if the hash is included in the data make sure the shape
// is consistent for comparison
if( data.hash && data.hash.indexOf( "#" ) === -1) {
data.hash = "#" + data.hash;
}
But I am not sure what this does or why it would occour only on Chrome/iPhone.
so StackOverflow people - what is going on?
Thanks.
We have been using Jquery from this link http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js for drag and drop. Suddenly we notice it is not working now and there is no code change done our side. We notice the error is pointing to these line and error is TypeError: a.curCSS is not a function? What will be solution to this problem?
e&&e.call(i)},g)}):this._focus.apply(this,arguments)},scrollParent:function(){var g;g=a.browser.msie&&/(static|relative)/.test(this.css("position"))||/absolute/.test(this.css("position"))?this.parents().filter
This javascript error is caused by jQuery and jQueryUI being out of sync with each other. Rather than go back to an older version of jQuery, I would update jQuery UI. This link from the jQueryUI blog talks about support for the latest version jQuery. I experienced the same error before updating jQuery UI.
Base on another answer... I did something slightly different...
Instead of replacing:
$.curCSS(element, attrib, val);
with:
$(element).css(attrib, val);
I created a new function:
$.curCSS = function (element, attrib, val) {
$(element).css(attrib, val);
};
$.curCSS: This method is simply an alias for jQuery.css() from jQuery 1.3 onward. Although it has never been part of the documented API, some external code has been known to use it, perhaps thinking it was “more efficient.” Now it’s “more gone.” - from the page here.
This error can occur by using curCSS also.
replace:
$.curCSS(element, attrib, val);
with
$(element).css(attrib, val);
I had same problemm. Search for a link like this in your project:
https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
and change it with this:
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
It worked for me.
I'm trying to use jayq with jquery.ui.sortable to make a list on a page
sortable. Looking at http://jqueryui.com/demos/sortable/ it seems like it should be as
simple as:
(.sortable ($ :#sortable))
Which compiles down to:
jayq.core.$.call(null, "\ufdd0'#sortable").sortable();
And throws:
Uncaught TypeError: Cannot call method 'call' of undefined
when I try to include it in a page. Interestingly, the generated code
does work in the page when I paste it into the js console, which implies
to me that something necessary is loaded after that line is executed.
I've modified
(def cljs-options {:advanced {:externs ["externs/jquery.js"]}})
to
(def cljs-options {:advanced {:externs ["externs/jquery.js" "js/ui/jquery-ui.js]}})
after reading
http://lukevanderhart.com/2011/09/30/using-javascript-and-clojurescript.html
, which doesn't seem to be sufficient. I'm guessing that jquery.ui
modifies the $ Prototype, but I'm not sure how to accomplish this in
clojurescript
I'm also using noir and noir-cljs, if it makes any difference.
Looking at using jQueryUI with closure compiler it might just be that jquery-ui needs a hand rolled externs file in order to be used, possibly a major undertaking. Can anyone confirm?
There were two separate aspects to solving this.
To compile in advanced mode, I needed to add the following to my externs file.
$.prototype.sortable = function (a,b) { };
$.prototype.disableSelection = function (a,b) { };
I'm using noir-cljs, and in my view template, had the following:
(:require [noir.cljs.core :as cljs])
(:use [hiccup.page :only [include-js]])
...
(cljs/include-scripts :with-jquery)
(include-js "/js/jquery-ui.js")
But this can't ever work, since the jquery-ui code needs to be included after jquery but before the generated ClojureScript. The solution is to manually include the libraries in the page:
(include-js "/js/jquery.js")
(include-js "/js/jquery-ui.js")
(include-js "/cljs/bootstrap.js") ;; Generated
I have a few multiselect boxes from the Jquery UI on a page that work perfectly well in Chrome & Safari but not in Firefox for some reason... when I load the Error Console in Firefox I see:
Error: $.widget is not a function
Source File: http://localhost:3000/javascripts/jquery.multiselect.js?1302660373
Line: 563
Any ideas why?
edit: the line itself is within the open function right where it says "// react to option changes after initialization"
// open the menu
open: function(e){
var self = this,
button = this.button,
menu = this.menu,
speed = this.speed,
o = this.options;
widget: function(){
return this.menu;
},
// react to option changes after initialization
_setOption: function( key, value ){
var menu = this.menu;
switch(key){
case 'header':
menu.find('div.ui-multiselect-header')[ value ? 'show' : 'hide' ]();
I am assuming you are using the jQuery Multiselect plugin… which depends on jQuery UI.
Sounds like you have not included enough of the jQuery UI library or just none of it. You need to include the core parts of jQuery UI (including Widget) if you build a custom download. Or just download the whole jQuery UI and include it instead.
For anyone else who is getting this but has the requirements; make sure you are including the Javascript files in the correct order. This error was being caused by my jquery-ui.js being included after the multiselect js file.
This answer is probably unrelated to the situation of the questioner, but I put it here for the sake of others Googling the question.
I got this error using Rails 3.2 and fixed it by deleting (renaming) the public/assets folder. It seems there are a lot of problems with the assets pipeline still. I don't know the details but have had other Javascript failures that are fixed this way.
Actually if you are getting this error then it's either
a) per #andyb answer - you haven't included the correct jQuery UI components
OR
b) your DOM is not loaded yet with the correct $.widget and therefore your function is attempting to call before $.widget has loaded. to fix the problem, ensure $.widget is called BEFORE your function