JavaScript function doesn't work in IE? - javascript

I'm having a lot of problems with IE7/IE8 and Javascript/jQuery, which I don't have in Chrome or FireFox.
I have this Javascript function:
function changeImg(img,bla){
$('#open_case').css("background-image", "url('"+img+"')");
getIngo(bla);
navigation_image(bla);
}
And this is my onclick function:
<div class="cImage" style="background-image:url('http://bla.com/images/this_image.jpg');" onclick="changeImg('http://bla.com/images/this_image.jpg','2');"></div>
But it's like the function isn't called at all, 'cause if I change the changeImg function to an alert function:
function changeImg(img,bla){
alert('hi!');
}
It still doesn't work.
The only error IE7/IE8 gives is Expecting Object(roughly translated)
What am I doing wrong?
Thanks in advance!
[Edit:]
These are lines IE7/IE8 is pointing at;
<script type="text/javascript" src="Scripts/swfobject.js"></script>
<script type="application/javascript" language="javascript">
function clearText(textfield){
if (textfield.defaultValue == textfield.value){
textfield.value = '';
$(textfield).css('color','#000000');
}
}
function addText(textfield){
if (textfield.value == ''){
textfield.value = textfield.defaultValue;
$(textfield).css('color','#999999');
}
}

If the error is object expected. Then try this
Change your
<script type="application/javascript" language="javascript">
To
<script type="text/javascript">

Is there a reason you're using javascript here? It looks like you're changing the image on a navigation item? You could just just the CSS :hover classes. Regardless, using onmouseover isn't really the "proper" way to be handling this sort of thing in javascript, if you really cannot use just CSS, at the very least look into handling the mouse over envent properly in jQuery.

Related

Error with jQuery on AngularJS app

I'm trying to function this code
But when I use it on my Angular app, I found some errors, and it seems to be jQuery
var element=$('.cds'); //the problem is right here (angular.element('.cds') is the same)
console.log(element.html()); //prints undefined,
// so, no animation
How can I fix it? Any ways to use jQuery edge?
index.html
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bundle.js"></script>
As the code is in bundle.js, created with browserify, should I call jQuery too? Like var jQuery=require('jquery');? or something. Thanks for your help
Try this line in your code, after definition of done(). It will not work.
console.log($('.cds').html());
Now click the javascript button and select 'OnDomReady'
Now it works. You cannot use jQuery until domReady event.
EDIT
This is the most classic method for jQuery
$( document ).ready(function() {
/* The DOM is now loaded and can be manipulated*/
});
Try using angular's built-in jqLite first before anything ...
$scope.el = angular.element('.cds').html();
console.log($scope.el)
Or if you want to user pure jquery then try searching the parent for your element an store this in a variable :
var el = $('.container-class').find('.cds');
console.log(el.html());
Hope this helps

JQuery autoloading user functions

I am quite new to JQuery, and I am learning every day. But now I am quita stuck...
For something that should be fairly simple I cannot get to work.
I have a function that I want to run on loading. But the system does not allow me.
I have written the following code :
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
function TestFunction(){
alert('We are just testing!');
}
function TestFunctionTwo(){
alert('Yes really!');
}
$(document).ready(function() {
TestFunction();
TestFunctionTwo();
}
</script>
As you see the two alerts should be given.
But unfortunately the system does nothing.
I hope that someone could tell me what I am doing wrong.
Thanks in advance.
P.S. I have seen several similair questions. However none of their solutions "seem" to work for me. Maybe there is one critical comma that I am adding or forgetting. But I do not seem to get it :-(
Your brackets repairs were not complete.
<script src="------Your jQuery location -------------"></script>
<script>
function TestFunction(){
alert('We are just testing!');
}
function TestFunctionTwo(){
alert('Yes really!');
}
$(document).ready(function() {
TestFunction();
TestFunctionTwo();
})
</script>
you didn't close the ready function properly.should be
$(document).ready(function() {
TestFunction();
TestFunctionTwo();
});
You simply made a syntactic error. The ready-function is not closed.
To prevent this in the feature, learn to use your browsers console.

Event handlers aren not attaching to select menu

I'm learning javascript and jquery and I'm a bit stuck. For some reason the event handlers are not attaching correctly. I thought the .change() was the correct one to use for select menus.
$('#tier1').change(function(){
var tier1 = $('#tier1').find(":selected").text();
if(tier1 != 'Month'){
$('#tier2').removeAttr("disabled");
}
});
You need to take of below things.
Make Sure jQuery library is added into head tag,
make sure you are wrapping your code into $(document).ready(function() { //code });
Make Sure ID for each DOM are unique.
Make Sure DOM is present which you are selecting using jQuery selector,
Example
<head>
<script src="jQuery.js"></script>
<Script>
$(document).ready(function(){
$('#tier1').change(function(){
var tier1 = $('#tier1').find(":selected").text();
if(tier1 != 'Month'){
$('#tier2').removeAttr("disabled");
}
});
});
</script>
</head>
<input id="tier1" />
For what I know, .change() is to be used with select menus... but I think there's something else amiss with your code.
Instead of
var tier1 = $('#tier1').find(":selected").text();
try
var tier1 = $('#tier1').find(":selected").val();
If not, scatter some console.log around... Firefox's Firebugger and Chrome's Dev Tools should catch them and give you some clues as to what is happening.

Is there a way to use onclick without really onclick event?

I am having this code:
Add
is there any way to make an alert whenever the user will press this button without changing the code or adding onclick event?
You can simple overwrite the attribute with JavaScript:
// Select the targeted element(s), in this case the first <a> element
// Note: You will need to replace this by a code that works
// for your actual markup!
document.getElementsByTagName("a")[0].onclick = function() {
alert("hi");
return false;
}​​​;
Demo: http://jsfiddle.net/WNZAP/
As the OP states that they are not allowed to change the HTML, and that jquery is not available to them.
Not having an 'id' on the link makes life very difficult. So the following code presumes the link is the very first one on the page...
Place this javascript into the <head></head> section of your page...
<script type="text/javascript">
window.onload = function() {
document.getElementsByTagName("a")[0].onclick = function() {
alert("Hello World");
return false;
}
}
</script>
See Live JSFiddle Demo
It's not possible to trigger an action without an event. But if I get your question right you want to trigger an alert without changing the HTML.
The easiest way would be by using a JavaScript library like jQuery. So load the library either by downloading it and placing it in your project or through the Google CDN:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
And then do something like this:
<script type="text/javascript">
$(document).ready(function(){
$(".submitme").click(function(){
alert("hello world");
});
});
</script>

Any ideas as to why this jQuery does not work?

I have an HTML page where a click event is captured and hides #testContent. I put the HTML and Javascript in a jsFiddle here: http://jsfiddle.net/chromedude/VSXY7/1/ . For some reason in the actual page the .click() does not work, but in the jsFiddle works. Does anybody have a clue why this would be?
I have ensured that the jQuery and Javascript file were both correctly attached and show up in the Webkit Inspect and Firebug. I am not getting console errors either. It's quite confusing.
UPDATE:
You can check out the actual page here: http://blankit.co.cc/test/77/
It looks like your javascript is not loaded correctly.
<script type="text/javascript" src="../../includes/jquery.js"></script><script type="text/javascript" src="../../includes/navbar.js"></script><script type="text/javasript" src="../../includes/study.js"></script>
You can put some alert() function inside your javascript file to make sure it is loaded correctly.
Your script tag has a typo in the type change it to text/javascript you are missing a letter.
Change study.js from
$(function(){
console.log('hello');
alert('hello');
/*var testContent = $('#testContent').val();
var contentArray = testContent.split(" ");
$('#studyTestLink').click(function() {
$('#testContent').hide();
alert('hello');
});*/
});
to
$(function(){
$('#studyTestLink').click(function() {
var testContent = $('#testContent').val();
var contentArray = testContent.split(" ");
$('#testContent').hide();
alert('hello');
});
});
I added your code to a page (using jquery 1.5.2) and it works fine. Don't you have any other code that could be breaking it?

Categories

Resources