Can't change the value of href with javascript - javascript

This is the code:
JS:
function f1(){
document.getElementById('test').href="link2";
};
HTML:
<a href='link1' id='test' onclick='f1();'> Text </a>
The debugger says f1() is not defined. What could it be? The "a" tag is inside a "span" tag, maybe that?
Edit: Sorry for the JQuery thingy I added it to see what happened :P
I forgot to put the linking of the JS file, my bad:
<script type='script' href='javascript.js'> </script>

Where did you put f1? onclick find the function in the global scope, if you didn't define the function in global, then it will not be found.
And $(document).getElementById('test').href="link2"; is wrong too,
it should just be document.getElementById('test').href="link2";
Also, if you are using jQuery, then the best way not use the inline onclick:
$(function(){
$('#test').click(function() {
$(this).attr('href', 'link2');
});
});

Related

js function does not exist?

Using MVC...
<a onclick="confirmDeactivate(#mobileDevice.Id, '#mobileDevice.IsActive');" class="show-pointer"><i class="icon-trash"></i></a>
So Id, and boolean will be passed to confirmDeactivate...
<script type="text/javascript" language="javascript">
function confirmDeactivate(mobileDeviceId, mobileDeviceIsActive) {
var i =1;
}
</script>
It is telling me confirmDeactivate is undefined.
what am i doing wrong?
EDIT
inspect element:
You need to make sure that the script where you have your function is loaded before you try to call it. If it is an external file, Make sure you load that in your HEAD section/ Top of your razor view.
OR you can try an unobutrusive approach
I updated the markup a little bit, Added a css class name and some data attributes.
<a class="show-pointer clicky" data-deviceid="#mobileDevice.Id"
data-active="#mobileDevice.IsActive"><i class="icon-trash"></i></a>
and in your javscript, Bind a click event to your anchor tag and wrap it inside your document ready.
<script>
$(function(){
$("a.clicky").click(function(e){
e.preventDefault();
var _this=$(this);
var deviceId=_this.data("deviceid");
var isActive=_this.data("active");
alert(deviceId+", " +isActive);
//do something with the values now
});
});
</script>

Use JavaScript-Variable in jQuery

I´m having a normal JavaScript-function and want to use the Variable (myVar) also in my jQuery Code - is this possible? and how?:
<a onclick="showtitle(abctitle);" href="#">Testlink</a>
<script>
function showtitle(myVar) {
myTitle = myVar;
}
$(document).ready(function() {
alert(myTitle); //I would like to alert "abctitle"
};
</script>
Firstly, don't mix DOM0 inline event handlers with jQuery. Separate your markup and your logic.
If you use a data- attribute you can put your variable's content in your HTML, and then extract that in the event handler:
<a id="test" data-foo="mytitle" href="#">Testlink</a>
and then:
$(document).ready(function() {
$('#test').on('click', function() {
alert($(this).data('foo'));
}
});
In this code the alert won't appear until the link is actually clicked on, of course.
I believe #Alnitak has a great answer. But if you are just looking to solve the question you asked, wrap abctitle in single quotes and make myTitle a global variable:
<a onclick="showtitle('abctitle 2');" href="#">Testlink</a>
<script>
myTitle = "abctitle";
function showtitle(myVar) {
myTitle = myVar;
}
$(document).ready(function() {
alert(myTitle); //I would like to alert "abctitle"
});
</script>
Also, your document ready function was missing its closing parenthesis )
Working example here: http://jsfiddle.net/CbhxY/
UPDATE
Working example on jsfiddle did not work so well. Try this: http://jsbin.com/ohedab/1/
The JS Bin example also adds the alert call in the showtitle function.
you can do with this
function showtitle(abctitle){
alert(myTitle); //I would like to alert "abctitle"
}

Function with arguements inside jQuery

Can someone please help why this is not working.
HTML Code:
<li><a href="#" onclick="adminDBDisplay(ownorg);" >OOrg</a></li>
<li><a href="#" onclick="adminDBDisplay(twoorg);" >Twoorg</a></li>
jQuery:
$(document).ready(function(){
function adminDBDisplay(db){
alert("Got into function" +db);
// Planning to use jQuery Ajax here
}
});
When I look using Firebug, I get following error:
"ReferenceError: adminDBDisplay is not defined"
Can someone please help me why this is not working. There something wrong on how I am approaching this. Please let me know if there are better ways. Thanks for your help.
When defining a function with function name() {...}, if you are already inside a function, then it will only be defined in that function.
Function definitions should not be wrapped in a .ready(), since they don't run until they are called. Remove the .ready() wrapper and you should be good to go.
The following notation:
$(function() { ... });
itself is a function that binds function() {...} to document.ready. And running function adminDBDisplay(db){...} in document.ready only defines the function it at runtime, but doesn't actually call it. In order to call it, you would want adminDBDisplay('parameter');
To effectively implement it, you'll want to place it within the body of your page as follows:
<head>
<script src="yourversionofjquery.js"></script>
<script>
//Defining your function for calling later
function adminDBDisplay(db)
{
alert("Got into function" +db);
//Planning to use Jquery Ajax here
}
</script>
</head>
<body>
<script>
//Binding an anonymous function to document.ready
$(function () {
//Do whatever you want after document.ready
});
</script>
<div> rest of body</div>
</body>
Let me know if that makes sense/fixes your errors.
EDIT: also, put 'single quote' around 'ownorg', like "adminDBDisplay('ownorg');" otherwise it's looking for a variable called ownorg.

Why is my global custom jQuery function not being called?

http://jsfiddle.net/xEpGg/740/
If I call it directly right after my script using:
$.custom.test();
It works as expected. However, if I put it anywhere in the HTML, it won't fire. I defined my object in jQuery, shouldn't that be accessible everywhere within the page?
In case you cannot define the function in the way #frenchie suggested try:
setTimeout(function(){$.custom.test();}, 0);
Why is setTimeout(fn, 0) sometimes useful?
And why the heck would you want to assign anything to the jQuery global?
See the solution here: you need to define the custom function before you can use it.
Like this:
<script>
$.custom = {
test : function() { alert("wtf"); }
};
</script>
<div id="helloworld" style="border:solid; border-width:5px;">
BLAH
</div>
<script>
$.custom.test();
</script>
​
You are adding your script to the page after it's loaded, but invoce $.custom.test() before it's loaded..
Change this option to no wrap (head) and it will work fine..

JS: body tag onload equivalent?

I need to basically add this to my page:
<body onload="document.getElementById('WeddingBandBuilder').focus()">
However due to my template I cannot change the tag. So is there a way to do the equivalent with a script in the < head > tag or something?
Thanks!
<script>
window.onload = function() {document.getElementById('WeddingBandBuilder').focus()};
</script>
You should always be careful there isn't already a window.onload defined. I've been burned a number of times by assuming I would be the only one attaching things to <body onload="..."> or window.onload.
See this answer and comments for a solution to this issue.
Use a JS library like jQuery or Prototype and create an external script file with something like this:
for jQuery:
$(function() { $('#WeddingBandBuilder').focus(); });
for Prototype:
Event.observe(window, 'load', function() { $('WeddingBandBuilder').focus(); });
I might check if that page has already included jQuery? If so, you can do something like this:
$(document).ready(function() {
$('#WeddingBandBuilder').focus();
});

Categories