Function with arguements inside jQuery - javascript

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.

Related

How to call jQuery function in HTML <body> onload?

I want to call a jQuery function from an HTML <body> tag. Here's my HTML:
< body bgcolor="#ffffff" onLoad="???" >
How would I call a jQuery function when the page is loaded? My jQuery function looks like this
jQuery(function($){
var input_id;
//code
});
whatever code you write in the below method(block) would be executed automatically after the DOM load. You need not call this from HTML component again.
$(document).ready(function() {
//your code
});
This topic has been covered here before.
You are most likely looking for
$(document).ready(function() {
var input_id;
//code
})
Or
$(window).load(function($) {
var input_id;
//code
});
If you are curious about the difference between these two, see the JQuery documentation on the topic.
Also note that <body onload="">, which you seem to be trying to use, is generally not compatible with the above JQuery.
$(function() {
// code
});
This is shorthand for document.ready() so it will wait for the body to finish loading before executing.
HTML: You're on the right track, but you do not have to have put JS in the body tag. See the JS options below:
<body bgcolor="#ffffff">
JS
$(window).load(function($) {
functionA(arg1, arg2, arg3);
});
This will fire up functionA() once the DOM including graphics have fully loaded.
OR
$(document).ready(function($) {
functionA(arg1, arg2, arg3);
});
This will fire functionA() once the DOM has loaded and before any graphics finish loading.
As of Jquery 3, the following syntax is depreciated:
document.ready(function(){
//code
});
The recommended alternative in Jquery 3 is to use the following syntax (which in previous versions was just considered a shorthand syntax):
$(function(){
//code
});
Here is is the official Jquery explanation for why the first syntax was depreciated and is no longer recommended (https://api.jquery.com/ready/):
... The selection [of document] has no bearing on the behavior of the .ready() method, which is inefficient and can lead to incorrect assumptions about the method's behavior.
document.ready(function($){
// here you go
})

Can't change the value of href with 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');
});
});

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"
}

Update Javascript function content on postback

Here's my code
<script type="text/javascript">
function getNextScroll(i){
<asp:Literal ID="infiniteScrollTableJS" runat="server"></asp:Literal>
}
</script>
I am populating that Literal with some Javascript from the CodeBehind. This works great OnLoad. However, when I do a postback I have a problem. The Literal is updated on postback. The actual script that is inside the function actually gets changed (I can see it with Firebug). BUT, the function is unaware that there is new script in there, it just keeps running the old stuff.
So near as I can tell, I want to 're-initialize' the code inside the function after postback.
I know how to call a function after postback using add_endRequest.
This problem is not unique to .NET or anything. In fact, I have a simple example here -> http://jsfiddle.net/7JxY7/1/ 'Run Function' will always alert 'one' even after the script contents are changed.
I feel like jQuery probably has something that I could use, but searching around I have found nothing.
EDIT:
I tried the suggestion by mblase75. This works great in Javascript ( more importantly, now I understand why) , however, given this approach, I still can't get it working with the postback. Here is my updated code.
<script type="text/javascript">
function getNextScroll(i){
//some stuff
}
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function (s, e) {
//mblase75 suggestion
getNextScroll = function (i){<asp:Literal ID="infiniteScrollTableJS" runat="server"></asp:Literal>};
});
</script>
I thought this would work, but of course, it has the same problem as my original method. The Literal is actually changed, but the function doesn't know about the change, it still has the original code
In JavaScript, a function is actually an object. So instead of trying to rewrite the <script> element with a string, replace the function (variable) name with a new function object:
<script>
goTest = function(){
alert('one');
}
function changeTest1(){
goTest = function(){alert('two');};
alert('ok');
}
</script>
<a onclick="goTest();">Run Function</a><br/>
<a onclick="changeTest1();">Change Function</a>
​
http://jsfiddle.net/7JxY7/2/

Onclick in <a> cause reloading of the page insted of executing JS code

My URL: http://www.example.com/?product=3&url=XYZ
My code:
link
After click, page is reloading, instead of executing foo() function.
JS is enabled. Body of foo():
function foo() { alert("sss"); }
Probably, this problem is caused by URL of my site. XYZ parameter is a url of a website but with something like "%C5%82%C3%B3" instead of special characters (something like after using htmlspecialchars()).
What is interesting, after click the page is reloaded with the "normal" URL, something like: http://www.example.com/?product=3&url=http://www.example.com (WITH special characters like " / ").
What can I do to resolve this problem?
EDIT
Above code works fine. Thank you for your time.
Yeah, there's definitely something else going on here. Here's a minimal example that works just fine:
<html>
<body>
link
<script type="text/javascript">
function foo() { alert("hi"); }
</script>
</body>
</html>
Assigning onclick inline is not a good practice, and you should be doing something like
<a id="someId" /* ... */ >
// ...
<script type="text/javascript">
function foo() { alert("hi"); return false; }
document.getElementById("someId").onclick = foo;
</script>
but in any case, the most likely culprit is that your script has a syntax error somewhere and is not loading at all. You can verify this by setting onclick="return false". If that doesn't work, it's likely you have some other event handler that's being triggered. But because the above -- all we know of your code -- works, it's unlikely anyone here can diagnose what the problem is without more information.
Edit
Nevermind this, I fully assumed your code wasn't working and the below did. But I guess the code you posted was already correct.
On a seperate note, you should avoid using attributes like onClick, create event handlers instead (I suggest looking at jQuery).
i tried the same code in my systm.the code is workin and the alert box is visible.
My code:
<a href="#" onclick="foo();return false;">link/a>
and javascript is
<script type="text/javascript">
function foo()
{
alert("sss");
}
</script>
i am using vs2008

Categories