Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I have problem with Web App based on JS and jQuery. Generally, on the website I have button which triggers JavaScript function onclicking. In this function there are two other functions, I'll call them Foo and Bar. Foo creates dynamic html table with data and Bar wants to get some data from this table. It looks something like this:
function Click(){
Foo();
Bar();
}
function Foo(){
$("#someDiv").append("html table");
}
function Bar(){
var x = $("#selector_from_added_table").val();
}
I used val intentionally - in the table there are several input fields. My problem is simple: Variable x after calling sequence of Foo() and Bar() is undefined. But when I call Bar() inside Foo(), x gets proper value. But this solution is unacceptable, because I have to call Bar() several times.
updated fiddle: http://jsfiddle.net/eBn9v/3/
adding a callback function in Foo() so that when you access element in Bar(), you are sure that the element does exits in DOM
HTML:
<div id="someDiv"></div>
<div id="someOtherDiv">
click me
</div>
Jquery
$(document).ready(function () {
Click();
});
function Click() {
Foo(function () {
Bar();
});
}
function Foo(callback) {
$("#someDiv").append("<table><tr><input type='text' value='Hello World' class='hi' /></tr></table>");
callback();
}
function Bar() {
var x = $('.hi').val();
alert(x);
}
$('#someOtherDiv').on("click", function() {
Bar();
});
so now, when you create dynamic table inside one someDiv, you can call BAR() method from #someOtherDiv and show the value from textbox which exits in someDiv
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I am having some trouble here trying to call function C from an onClick event on the page.
function leftArrowClicked() {
functionA(functionC);
}
function functionA() {
function functionB(w) {
function functionC() {
// do stuff
};
}
}
<div id="dashboard_left_arrow" onclick="leftArrowClicked()">Click</div>
But it's of course not working. Currently seeing 'functionC is not defined' in the console. I don't know much about nested functions, hence probably why my method isn't working. Any ideas?
You can use something called Modular Design Patterns. It goes something like this -- you can see that functionA is an function that is already invoked, so I can call functionB directly on that because it is returned inside an object. Calling functionC can be done on top of that.
var functionA = (function() {
function functionB(w) {
function functionC() {
// do stuff
return 'inside functionC';
}
return {functionC:functionC};
}
return {functionB:functionB};
})();
function leftArrowClicked() {
console.log(functionA.functionB('').functionC());
}
<div id="dashboard_left_arrow" onclick="leftArrowClicked()">Click</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
As I am learning a jquery and new to it I created a jquery object like
$(function () {a();b();c()})
As I have 3 method call under the Jquery object function and the Jquery function waits for end of every method call after that only displays the result . So I wanted to know is there a way that we can show work information of those methods which has completed the work , like if a() has been called and work is done it should display the result and should not wait for other methods to to be called and processed .
There are multiple ways to handle async functions in JavaScript. The easiest way is using callbacks if you are new to this language.
function a(callbackA) {
// do something...
console.log('A')
callbackA();
}
function b(callbackB) {
// do something...
console.log('B')
callbackB();
}
function c() {
// do something...
console.log('C')
}
// usage:
a(function() {
b(function() {
c();
});
});
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I Have a Javascript library and unfortunately i Shouldn't change it .
there is a DOM Ready function and i need to call a function inside it, codes as below:
function ready(fn){
if (document.readyState != 'loading'){
console.log('fn called');
fn();
}
else {
console.log('fn loaded');
document.addEventListener('DOMContentLoaded', fn);
}
}
ready(function(){
function hello() {
console.log("hello world!");
}
});
then i need to call hello from outside of this scope, from another function like this:
function btnstart(){
hello();
}
how i can do this?
This is an explanation of your problem in a bit more detail. It's not an answer and I don't expect it to be accepted. It's to help you understand why you can't do what you're asking, unless you can change the existing code.
The problem you are facing is that you create an anonymous function that contains hello() and then pass that to another function. Outside the scope of that anonymous function, hello() does not exist and is therefore not accessible.
Take this example...
function domReady(fn) {
fn.hello();
}
domReady(function() {
function hello() {
console.log("hello");
}
});
This creates an anonymous function and passes it to domReady(), which in turn references it as fn. However, this will also fail as fn does not have a function called hello(). That method would be created if you called fn(), but would still only exist inside that function.
What you really need to do is move hello() outside the scope of domReady() and just pass it as a reference, like this...
function domReady(fn) {
fn();
}
function hello() {
console.log("hello");
}
domReady(hello); // note there are no parenthesis () after hello, so it is a reference and not immediate executed
If you can change that then you can simply call hello() whenever you like (within the same scope). If you cannot change that then you cannot do what you are asking.
I have a reference to a DOM element. I know I can add a function to it as in the following example where the function foo is added:
<div id="myDiv"></div>
<script>
function bar() {
console.log("inside bar");
}
var myDiv = document.getElementById("myDiv");
myDiv.foo = function () {
bar();
}
myDiv.foo();
</script>
Invoking myDiv.foo() executes the document-level function bar() as expected.
What I would like to know: is it possible to add the document-level function bar as a member of myVar? So that I can call myDiv.bar() directly? The key is that bar would have to be able to access members of myDiv using the key word "this". I'm aware I could change bar to accept myDiv as a parameter and access its members that way, but I'm really interested to know if the specific approach I am asking about is possible. Thanks.
You just assign the function instead of creating a new one.
myDiv.foo = bar;
myDiv.foo();
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
How do i call a function in jquery that i have written? The following code that I tried is not working.
<script>
$(function(){
function afunction() {
alert("me");
}
});
</script>
<script>
afunction();
</script>
jQuery is simply a JavaScript library. You can mix regular JavaScript in without requiring everything use the jQuery $(). Because of function scope, wrapping your function in the $(document).ready function will make it unavailable to be called outside of the ready function.
Try changing your code to this:
function afunction() {
alert("me");
}
If you need to define a function inside of a jQuery function or event handler, that's fine too. Although it's been pointed out that you can't call this function outside of the ready event handler, I would like to demonstrate that jQuery and JavaScript are not separate and can be mixed. For instance:
$(document).ready(function() {
function afunction() {
alert("me");
}
afunction();
});
Just to clarify, $(function() is another form of $(document).ready().
As Vedant mentioned, usually you cannot call a function (JS/jQuery) from outside the function in which it is defined.
You should probably declare function afunction() outside of $(function() method, alternatively you could declare it as
global function afunction() for universal access.
okay. Here is What I Meant.
You're Creating A function inside a self executing anonymus function ie. $(document).ready() or $(function()....
So your function is in local scope of that function. Simply Means You cant access that in outside of that function.
So to make it accessible just make it global.
In JavaScript window is global object. So to make your function global, use that object as follows:
$(document).ready(function() {
function afunction() {
alert("me");
}
window.afunction=afunction; //NOTE THIS, IT IS IMPORTANT.
});
Now you can access it elsewhere in your JS.
Here is working Fiddle
Hope it'll help you! cheers :)..