Obout.Interface.OboutTextBox' is null or not an object error - javascript

When I use my below JS FIDDLE, I get error as
Obout.Interface.OboutTextBox' is null or not an object in IE.
I don't know what is the issue here
I get error at line no 308 which is
Obout.Interface.OboutTextBox.prototype.applyCrossBrowserFixes = function (){}
Here is my Fiddle
Please suggest what is wrong

Ensure those function is not wrapped around by document ready. Place it only inside <script></script> :
Not like this :
<script>
// or $(document).ready(function(){
$(function(){
function navigateThroughCells(sender, key, forced) { .... }
});
</script>
But like this :
<script>
function navigateThroughCells(sender, key, forced) { .... }
</script>

Related

JS - accessing global variable issue

Best described by example:
I have the following piece of code:
/* YIELDS ERROR
$('body').on('DOMNodeInserted', '.zeon-merchandise-measure', function () {
dropdownCssClass : 'zeon-select2-dropdown',
data: merchandise_measures
});
*/
// OK
$(".zeon-merchandise-measure").select2({
dropdownCssClass : 'zeon-select2-dropdown',
data: merchandise_measures
});
I can't undesrand what is wrong with scope. The second function works ok, while DOMNodeInserted-part cannot recognize merchandise_measures
Here's how `merchandise_measures is defined (html page being loaded)
<script type="text/javascript">
// A global variables
merchandise_measures = {{ merchandise_measures_json|safe }};
</script>
What am I doing wrong?
First example has invalid syntax. You are passing a function and using it as an object. I don't know your whole code and what are you trying to achieve but this is more valid:
$('body').on('DOMNodeInserted', '.zeon-merchandise-measure', function () {
var myObject = {
dropdownCssClass : 'zeon-select2-dropdown',
data: merchandise_measures
}
});

Why doesn't my small custom function work correctly?

I wrote a custom function that is not working as expected. This part of the code $(carta).stop().css("visibility","visible").fadeIn();
and this
$(carta).stop().fadeOut(250);
are not beeing triggered, but if I change the carta var for the id ("#carta1") it works. Does anybody knows what I should change for the function to work correctly?
Here's the code;
function yes(meal,carta){
var fadeTo_null = function(e){
e.preventDefault();
$("#probando").stop().fadeTo(250,0);
$("#probando").css("visibility","hidden");
$(carta).stop().css("visibility","visible").fadeIn();
};
var fadeTo_back = function (e){
e.preventDefault();
$("#probando").stop().fadeTo(500,1);
$("#probando").css("visibility","visible");
$(carta).stop().fadeOut(250);
};
$(meal, carta).hover(fadeTo_null,fadeTo_back);
};
$(document).ready(function(){
yes("#frueh" ,"#carta1");
});
You pass variable objects to your function like this:
yes(meal, $('#carta'));
Then use the variable inside the function like this:
carta.stop().css("visibility","visible").fadeIn();
You have one string but 2 arguments
Change to:
yes("#frueh","#carta1");//now have 2 params
Then when you need both you can use:
$([meal, carta].join())// $('#frueh,#carta1')
You forget to close the quotes of the parameters and close the parentheses of the ready function.
Code that is not working:
$(document).ready(function(){
yes("#frueh ,#carta1");
};
Code that is working:
$(document).ready(function(){
yes("#frueh","#carta1");
});

Pass function to a jquery key event?

I have a function foo(peram) which I want to call from multiple jquery .keyup() events.
How can I define/pass function foo so that I can call it from inside the event?
I tried something like this:
function foo(peram) {
alert(peram);
}
$("#someElement").keyup(function(alert) {
foo("You pressed a key!");
});
However I get TypeError: foo is not a function.
Update:
I have removed everything from my script and html, and it still does not work.
html:
<html>
<head>
<script src="../jquery-1.10.2.js" type="text/javascript"></script>
<script src="test.js" type="text/javascript"></script>
</head>
<body onload="asdf()">
<input type="text" name="name">
</body>
</html>
test.js:
function asdf() {
function hqxftg(stuff) {
alert(stuff);
}
$(document).ready(function() {
$('[name="name"]').keyup(function(hqxftg) {
alert(typeof hqxftg)
hqxftg("asdf");
})
})
}
It does seem to work in jsfiddle for some reason.
It is because you have named the event parameter same as the function
function asdf() {
function hqxftg(stuff) {
alert(stuff);
}
$(document).ready(function () {
$('[name="name"]').keyup(function (event) {
alert(typeof hqxftg)
hqxftg("asdf");
})
})
}
The event callback keyup receives the event object as the first parameter, you are naming it as hqxftg which overrides the external scoped function name.
Also there is no need to use the onload="", you can just use the dom ready callback
jQuery(function ($) {
function hqxftg(stuff) {
alert(stuff);
}
$('[name="name"]').keyup(function (event) {
alert(typeof hqxftg)
hqxftg("asdf");
})
})
You are missing a couple of things...
1) You miss the ; at the end of calling foo()
2) You are missing tags to close the jQuery selector
When you try this it will work:
function foo(peram) {
alert(peram);
}
$("#someElement").keyup(function(alert) {
foo("You pressed a key!");
});
JSFiddle here...
Update: Post has been updated and original comment of mine becomes obsolete.
I would go with the comment of Derek.
I am able to reproduce the problem: JSFiddle
Is it correct you have also foo declared as a var?
Try this code.
HTML
<input id="someElement" />
Java script:
function foo(peram) {
alert(peram);
}
$( document ).ready(function() {
$("#someElement").keyup(function() {
foo("You pressed a key!");
});
});
Demo

jQuery : Object has no method for $.fn

i have this function in my js file
(function($) {
$.fn.foobar = function() {
// some code
};
})(jQuery);
and when i call the following
jQuery(function() {
$.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js");
$.getScript("http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js");
jQuery('object').foobar();
});
it gives me the following
Uncaught TypeError: Object [object Object] has no method 'foobar'
i'm trying this on Rails file (*.js.erb)
I guess you are overwriting your jQuery array with that second one, try doing this:
(function($) {
$.fn.foobar = function() {
console.log(true);
};
})(jQuery);
(function($) {
$.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js", function() {
$('body').foobar();
});
})(jQuery);
working fiddle
Only run these codes in the fiddle, it runs fine. So, i guess that your code may be have some error at other place.I suggest you show more code for the question.
try something like this
<script src="jquery.js">
<script>
(function($) {
$.fn.foobar = function() {
// some code
};
})(jQuery);
$(function(){
jQuery('object').foobar();
})
</script>

Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function

I am getting an : Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function error in Chrome with my script.
<script type="text/javascript">
function showSlidingDiv() {
$("#slidingDiv").fadeToggle("slow", "linear");
}
function showSlidingDiv2() {
$("#slidingDiv2").fadeToggle("slow", "linear");
}
function showSlidingDiv3() {
$("#slidingDiv3").fadeToggle("slow", "linear");
}
</script>
Does anyone know what could be wrong here?
Chrome does load other libraries that make the use of $ symbol on other purposes,
so you have to use jquery no conflict. on of the way is to change the $ symbol with jQuery
$(function(){...});
change to
jQuery(function(){...});
My guess is that jquery was not loaded before run of one of these methods, so or it's not included before run of these methods, or there's some error causing it to not load properly.
Normally this should "just work" (at least not throw that kind of error message)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function showSlidingDiv() {
$("#slidingDiv").fadeToggle("slow", "linear");
}
function showSlidingDiv2() {
$("#slidingDiv2").fadeToggle("slow", "linear");
}
function showSlidingDiv3() {
$("#slidingDiv3").fadeToggle("slow", "linear");
}
</script>
No mather the time.. I found a solution that worked for me.
Instead of
$("#slidingDiv")
try
jQuery("#slidingDiv")
the other options weren´t usefull for me.
<script type="text/javascript">
var j = jQuery;
function showSlidingDiv() {
j("#slidingDiv").fadeToggle("slow", "linear");
}
function showSlidingDiv2() {
j("#slidingDiv2").fadeToggle("slow", "linear");
}
function showSlidingDiv3() {
j("#slidingDiv3").fadeToggle("slow", "linear");
}
</script>
make sure jQuery.noConflict() isn't being called. Calling it won't allow the use of the $ shorthand notation.

Categories