DOM Elements created in JavaScript function disappear after function returned

Question

I have a dropdown list with multiple selections allowed. A user selects from the list and then clicks the submit button with an onclick=test() which calls a JS function. I am using Jsp pages, and this is a Spring MVC framework project with DWR for remote service.

The data that's returned from the remote service - dwrService is handled by the callback function - handleAddSuccess. Based on the item(s) selected, I need to populate one or more textareas. From looking at Firebug, I see the textarea display and then being populated, but once the function, test() completes, the textarea disappears. I have been looking for answers everywhere, but no results.

function test() {
var careIDs = dwr.util.getValue("careIDs");
dwrService.getNewCares(careIDs, {
callback : handleAddSuccess,
errorHandler : handleAddError
});
}

function handleAddSuccess(data) {
    var aFragment = document.createDocumentFragment();
    var divta1 = document.getElementById("divta1");
    for (i = 0; i < data.length; i++) {
        var ta = document.createElement("textarea");
        ta.setAttribute("id", "definition"+i);
        ta.setAttribute("cols", "75");
        ta.setAttribute("rows", "75");
        divta1.appendChild(ta);
        aFragment.appendChild(divta1);
    }      
    document.body.appendChild(aFragment);

    for (i = 0; i < data.length; i++) {
       dwr.util.setValue("definition"+i, data[i].definition);
    }
alert(" end of handleAddSuccess " ) ;
}

I have also returned from the callback function, and the case is the same - I could see the textarea elements being setup in Firebug and populated with values, but once the function returned, the textarea element disappears.

On which browsers did you test your code? And don't forget to declare `i` locally using `var i`, otherwise `i` will leak into global scope. — Marcel Korpel, Jan 16 '13 at 16:16

score 1 · Answer 1 · answered Jan 16 '13 at 16:24

1

You don't return false from within test(), so the form gets submitted when the submit button is clicked and the page is reset to its initial state (depending on what the server does with the submitted form).

answered Jan 16 '13 at 16:24

Marcel Korpel

21,536
6
60
80

Marcel, I use FireFox, IE, & Chrome. I changed the variables to local scope - tks! – Lin Ahmad Jan 16 '13 at 18:28
Marcel, I use FFox, IE, & Chrome. Changed the variables to local scope - tks! Just to be clear, are u saying that I should return true from test() in order for the form to get submitted? Actually, i do not wish to submit the whole form at this stage. What i am doing is call JS fn which calls the DWR remote service on the server and have a refresh on the page for a portion of the page (sorry for the repetition). I've other sections of the page and will submit the whole form altogether. Would it help if I submit my jsp page? – Lin Ahmad Jan 16 '13 at 18:51
Marcel, just want to say that I did what you said to return true, from both test() first, and then from the callback fn. Still the same, textarea display briefly. -- Lin – Lin Ahmad Jan 16 '13 at 18:59
@LinAhmad: No, you should just `return false` to prevent form submission. A return value of `true` will submit the form and exhibit the described behaviour. – Marcel Korpel Jan 18 '13 at 16:15
I tried "return false" - no result. Below is my modified script:function test() { careIDs = dwr.util.getValue("careIDs"); alert("careIDs len = " + careIDs.length ); – Lin Ahmad Jan 18 '13 at 17:51
Tried "return false" - no result. Moved creation of textareas out of my callback fn and into test(). function test() { careIDs = dwr.util.getValue("careIDs"); form = document.getElementById("myForm"); for (i = 0; i < careIDs.length; i++) { ta = document.createElement("textarea"); ta.setAttribute("id", "definition"+i); ta.setAttribute("cols", "75"); ta.setAttribute("rows", "5"); } form.appendChild(ta); dwrService.getNewCares(careIDs, { callback : handleAddSuccess }); } .. appreciate yr help – Lin Ahmad Jan 18 '13 at 18:08
The textareas and values in them are staying now. I return false from test() and also for onclick="test()", I reworked that to be onclick="return test()" Thanks! – Lin Ahmad Jan 18 '13 at 21:51

DOM Elements created in JavaScript function disappear after function returned

1 Answers1