I am using the jQuery Seat Chart Plugin in my website.
It's an old website so it uses JavaScript but this plugin is in jQuery so I am getting an error on the following jQuery code
function recalculateTotal(sc) {
var total = 0;
//basically find every selected seat and sum its price
sc.find('selected').each(function () {
total += this.data().price;
});
return total;
}
The error in console I get is Uncaught TypeError: this.data is not a function which I am guessing conflict error with JavaScript and jQuery.
When I use following code
sc.find('selected').each(function () {
total += jQuery(this).data().price;
});
It throws following error Uncaught TypeError: this._each is not a function with 'prototype' javascript.
I have tried to create a new extended function, tried to change the javascript versions but I am not able to solve the error.
jQuery is a Javascript library, it's not a different language so there is no conflict there.
I see you're using jQuery's .each() with sc.find('selected') so the issue must be there:
find('selected') will select elements with selected html tag, which I doubt is what you want. you should use .selected if you're selecting elements with that class. or #selected if you have 1 element with said id. more about .find()
if you're trying to get you get .data() from a jQuery selected element selected you should do it like this this.data("price")
if you're trying to get seatCharts's data() make sure you used .seatCharts({}) on your sc element or you won't have the data() function there
Related
I have this simple jQuery code
function removePreloader() {
jQuery('ul.woocommerce-error').has('li').jQuery("#preloader").css("display", "hidden");
}
and it's being called by
jQuery('form[name="checkout"]').submit(function(e) {
... // lots of line
setTimeout(removePreloader(), 2000);
}
both block of codes is inside jQuery(document).ready(function() { ... });
the other jQuery() is working fine, only this one is causing a problem and showing
Uncaught TypeError: jQuery(...).has(...).jQuery is not a function
is it not possible to use .has? or is there any alternate? because this wordpress theme using a lot of old plugin, so they can't accept newer version of jQuery.
Thank you
here is the screenshot from jquery.com
I just trying to follow this javascript and modified it a little bit, please let me know how to do this the right way, because I don't never code with javascript before
You're using an invalid jQuery statement .jQuery..., I would suggest the use of the if statement when checking if there are any li children inside the list like :
function removePreloader() {
if( jQuery('ul.woocommerce-error li').length ){
jQuery("#preloader").css("display", "none");
}
}
NOTE 1: display property has no hidden value, so you're searching for none instead.
NOTE 2: Remove the () in the function call like :
setTimeout(removePreloader, 2000);
Uncaught TypeError: jQuery(...).has(...).jQuery is not a function
means .jQuery is not a function on the returned object of .has(). That also means .has() works just fine here. Try to use .find() instead.
I am trying to implement a jquery range calendar to an existing project, but I am getting the error from the title. Probably the reason behind this is a trivial one, but I just don't have sufficient expertise in order to solve it.
So, here is the code for the calendar.
I am including it in the project along with other js files in this way :
string closureBegin = "(function(jq) { if(jq != null) $ = jq; ";
js.AddInline(IncludePosition.Head, closureBegin, closureBegin.GetHashCode().ToString());
js.Add(IncludePosition.Head, "v1.1/js/control/jquery.rangecalendar.js");//range calendar
js.Add(IncludePosition.Head, "v1.1/js/control/moment+langs.min.js");//moment plus langs
js.Add(IncludePosition.Head, "v1.1/js/control/control.js");
jQuery is included and used in this project, so I don't know whatexactly is the reason for this error.
I managed to bypass it only by putting the range calendar code in a function, but that is not really a solution.
Here is the error from the console :
Uncaught ReferenceError: jQuery is not defined
at /c/js/js_2d42ca0e_12.19.0.dev.js:759
at /c/js/js_2d42ca0e_12.19.0.dev.js:11468
Can someone please help?
This is my first use of nestedsortable.js in a custom cms creation with codeigniter, So I use it with Codeigniter php framework.
I have an ordered and nested list(for order pages) and I need to convert this list to array with 'toArray' but it's not working
the error message: uncaught typeError: Cannot call method 'match' of undefined
this is my js code:
<script>
$(document).ready(function(){
$.post('<?=base_url("index.php/admin/pages/order_ajax"); ?>',{},function(data){
$('#orderResult').html(data);
});
$('#save').click(function(){
oSortable = $('.sortable').nestedSortable('toArray');
$.post('<?=base_url("index.php/admin/pages/order_ajax"); ?>',{sortable:oSortable},function(data){
$('#orderResult').html(data);
});
});
});
except that everything is good, so I need your help
I had the same problem. The solution is simple. You need set id for your li elements.
<li id="list_1"> etc...
Because without a set id, element returns "undefined" and it throws an error. Function "match" needs string.
Trying to use Select2 and getting this error on multiple item input/text field:
"query function not defined for Select2 undefined error"
Covered in this google group thread
The problem was because of the extra div that was being added by the select2. Select2 had added new div with class "select2-container form-select" to wrap the select created. So the next time i loaded the function, the error was being thrown as select2 was being attached to the div element. I changed my selector...
Prefix select2 css identifier with specific tag name "select":
$('select.form-select').select2();
This error message is too general. One of its other possible sources is that you're trying to call select2() method on already "select2ed" input.
In case you initialize an empty input do this:
$(".yourelement").select2({
data: {
id: "",
text: ""
}
});
Read the first comment below, it explains why and when you should use the code in my answer.
I also had this problem make sure that you don't initialize the select2 twice.
For me this issue boiled down to setting the correct data-ui-select2 attribute:
<input type="text" data-ui-select2="select2Options.projectManagers" placeholder="Project Manager" ng-model="selectedProjectManager">
$scope.projectManagers = {
data: [] //Must have data property
}
$scope.selectedProjectManager = {};
If I take off the data property on $scope.projectManagers I get this error.
This issue boiled down to how I was building my select2 select box. In one javascript file I had...
$(function(){
$(".select2").select2();
});
And in another js file an override...
$(function(){
var employerStateSelector =
$("#registration_employer_state").select2("destroy");
employerStateSelector.select2({
placeholder: 'Select a State...'
});
});
Moving the second override into a window load event resolved the issue.
$( window ).load(function() {
var employerStateSelector =
$("#registration_employer_state").select2("destroy");
employerStateSelector.select2({
placeholder: 'Select a State...'
});
});
This issue blossomed inside a Rails application
I also got the same error when using ajax with a textbox then i solve it by remove class select2 of textbox and setup select2 by id like:
$(function(){
$("#input-select2").select2();
});
It seems that your selector returns an undefined element (Therefore undefined error is returned)
In case the element really exists, you are calling select2 on an input element without supplying anything to select2, where it should fetch the data from. Typically, one calls .select2({data: [{id:"firstid", text:"firsttext"}]).
Also got the same error when using ajax.
If you're using ajax to render forms with select2, the input_html class must be different from those NOT rendered using ajax. Not quite sure why it works this way though.
if (typeof(opts.query) !== "function") {
throw "query function not defined for Select2 " + opts.element.attr("id");
}
This is thrown becase query does not exist in options. Internally there is a check maintained which requires either of the following for parameters
ajax
tags
data
query
So you just need to provide one of these 4 options to select2 and it should work as expected.
I got the same error. I have been using select2-3.5.2
This was my code which had error
$('#carstatus-select').select2().val([1,2])
Below code fixed the issue.
$('#carstatus-select').val([1,2]);
I have a complicated Web App and I couldn't figure out exactly why this error was being thrown. It was causing the JavaScript to abort when thrown.
In select2.js I changed:
if (typeof(opts.query) !== "function") {
throw "query function not defined for Select2 " + opts.element.attr("id");
}
to:
if (typeof(opts.query) !== "function") {
console.error("query function not defined for Select2 " + opts.element.attr("id"));
}
Now everything seems to work properly but it is still logging in error in case I want to try and figure out what exactly in my code is causing the error. But for now this is a good enough fix for me.
Hey all looking throughout all of stackoverflow this looks like a common error i just cant wrap my head around. i am busy upgrading our site from pure JS to jquery in preparation for us moving over to Rails 3.1 now i have this javascript:
:javascript
["Ownership", "Management", "EmploymentEquity", "SkillsDevelopment", "PreferentialProcurement", "EnterpriseDevelopment", "SocioeconomicDevelopment"].each(function(element) {
$$('.' + element).each(function(s) {
s.toggle();
});
});
so basically it is running trough an array of css classes and then toggling them. now when i run this with the jQuery lib i get an error that looks like this
Uncaught TypeError: Object Ownership,Management,EmploymentEquity,SkillsDevelopment,PreferentialProcurement,EnterpriseDevelopment,SocioeconomicDevelopment has no method 'each'
now i am just trying to test one element at a time to get the jQuery working at least this is what i have so far.
$("OwnershipHeader").click(function () {
$("Ownership").toggle("slow");
});
very simple so just when you click on the header it toggles its children. so when i enter that in the console it works just fine. until i click on the header of coarse:
Uncaught ReferenceError: $$ is not defined
this seems really simple and yet its breaking every time... i am relatively new to jQuery i have just worked with the Jquery UI lib before. any suggestions are appreciated
Uncaught TypeError: Object Ownership,Management,EmploymentEquity,SkillsDevelopment,PreferentialProcurement,EnterpriseDevelopment,SocioeconomicDevelopment has no method 'each'
I think you meant forEach. But since this doesn't work in all browsers, use jQuery's each function
$.each(["Ownership", "Management"], function(i, element) {...
Uncaught ReferenceError: $$ is not defined
jQuery uses a single dollar sign ($)
$("OwnershipHeader").click(function () {
$("Ownership").toggle("slow");
});
jQuery selectors are mostly like CSS selectors. So this should work:
$(".OwnershipHeader").click(function () {
$(".Ownership").toggle("slow");
});
Try this.
var array = ["Ownership", "Management", "EmploymentEquity", "SkillsDevelopment", "PreferentialProcurement", "EnterpriseDevelopment", "SocioeconomicDevelopment"];
$.each(array, function(i,element) {
$('.' + element).toggle();
});
It looks like it was coded previously with PrototypeJS, which provides $$ and [].each.
I'm not sure if .toggle is the same behavior in PrototypeJS and jQuery.
var col = ["Ownership", "Management", "EmploymentEquity", "SkillsDevelopment", "PreferentialProcurement", "EnterpriseDevelopment", "SocioeconomicDevelopment"];
$.each(col,function(i,e){
$('.'+e).each(function(j,s){
$(s).toggle();
});
})
*in jquery first of all there is no variable defined as $$ and only $ is defined.
*secondly each function is used as i have mentioned and the first variable passed to the function that is provided to each is the index in array and second variable is the actual element
look here for each and toggle documentation