Javascript & jQuery: appending an item and getting access to it

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.

Is `Foo` making an Ajax request to get the new HTML? If so: http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call. — Felix Kling, Dec 16 '13 at 16:01

patel.milanb · Accepted Answer · 2013-12-16T16:36:16.343

0

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

edited Dec 16 '13 at 16:36

answered Dec 16 '13 at 16:09

patel.milanb

5,822
15
56
92

Is this an answer? I just see a block of code. What are you trying to convey here? Please explain your answer. – Felix Kling Dec 16 '13 at 16:14
well, he wants to call BAR() method and get the value from dynamically added textbox .. so he can now call BAR() from anywhere and get the value... first of all i did what i could understand from his question... – patel.milanb Dec 16 '13 at 16:18
And how is this different than what the OP already has? – Felix Kling Dec 16 '13 at 16:19
OP: i did not get it.. – patel.milanb Dec 16 '13 at 16:21
OP = original poster. How is this different from the code in the question? – Felix Kling Dec 16 '13 at 16:22
OP has stated in his question that var x is undefined when he calls Foo() and Bar() in sequence.. he can call it in a sequence as well as he can access Bar() from anyother method as he stated that he wants to call Bar() several times.. – patel.milanb Dec 16 '13 at 16:25
Not sure if I get it. You are still calling `Foo` and `Bar` in a sequence and did note make any modifications to both of these functions. So why would `x` *not* be `undefined` in your code? – Felix Kling Dec 16 '13 at 16:27
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/43276/discussion-between-patel-milanb-and-felix-kling) – patel.milanb Dec 16 '13 at 16:28
I think, dynamically created table s not yet ready when JS calls Bar() hence var x is undeinfed.. – patel.milanb Dec 16 '13 at 16:34
1

Well, now you changed your answer. This could indeed help. – Felix Kling Dec 16 '13 at 16:37
yes, I think the problem was Bar() getting called before Foo() finishes creating dynamic table element.. – patel.milanb Dec 16 '13 at 16:39
1

Thanks for all responses. I've solved the problem using patel.milanb's code snippet and link given by Felix. – Iver Dec 18 '13 at 09:07

Javascript & jQuery: appending an item and getting access to it

1 Answers1

HTML:

Jquery