HTML disappear after been created with javascript

Question

I'm having another problem after solving this

Trying to read XML file but he is always the same

I'm creating HTML elements dynamically, and giving the values that i read from the XML file, the elements are always disappearing but after them been created. Any reason why that is happening? My Code is this in cs file

script = "function OnClientDragEnd(dock, args)" +
                            "{" +                    
                            "   req = false; " +
                            "   var isIE = false;" +
                    // branch for native XMLHttpRequest object
                            "   if(window.XMLHttpRequest && !(window.ActiveXObject)) {" +
                            "       try {" +
                            "           req = new XMLHttpRequest();" +
                            "       } catch(e) {" +
                            "           req = false;" +
                            "       }" +
                    // branch for IE/Windows ActiveX version
                            "   } else if(window.ActiveXObject) {" +
                            "       try {" +
                            "           req = new ActiveXObject('Msxml2.XMLHTTP');" +
                            "       } catch(e) {" +
                            "           try {" +
                            "               req = new ActiveXObject('Microsoft.XMLHTTP');" +
                            "           } catch(e) {" +
                            "               req = false;" +
                            "           }" +
                            "       }" +
                            "   }" +
                            "   if(req) {" +
                            "       req.onreadystatechange = function(){processReqChange(dock,args)};" +
                            "       req.open('GET', 'Config.xml', false);" +
                            "       req.send('');" +
                            "   }" +
                            "}" +
                            "function processReqChange(dock,args) {" +
                                // only if req shows "loaded"
                            "   if (req.readyState == 4) {" +
                                    // only if "OK"
                            "       if (req.status == 200) {" +
                                    // ...processing statements go here...
                            "           var contagemNos = req.responseXML.documentElement;" +
                            "                           var txt = contagemNos.childNodes(i).getElementsByTagName('Titulo')[0].text;" +//alert(txt);
                    "                           var ta = contagemNos.childNodes(i).getElementsByTagName('Id')[0].previousSibling; var tatext = ta.text;" +//alert(tatext);
                    "                           var ni = document.getElementById('spanObjDock');" +
                    "                           var divIdName = 'myDiv';" +
                    "                           var newdiv = document.createElement('div');" +
                    "                           newdiv.setAttribute('id',divIdName);" +
                    "                           var labelTitulo = document.createElement('label');" +
                    "                           labelTitulo.id = 'span1';" +
                    "                           labelTitulo.innerHTML = 'Titulo';" +
                    "                           newdiv.appendChild(labelTitulo);" +
                    "                           var break1 = document.createElement('br');" +
                    "                           newdiv.appendChild(break1);" +
                    "                           var tboxTitulo = document.createElement('input');" +
                    "                           tboxTitulo.setAttribute('type', 'text');" +
                    "                           tboxTitulo.setAttribute('value', txt);" +
                    "                           tboxTitulo.setAttribute('name', 'tboxTitulo');" +
                    "                           tboxTitulo.setAttribute('id', 'tboxTitulo');" +
                    "                           if (tboxTitulo.addEventListener){" +
                    "                               var enviar = 'tboxTitulo';" +
                    "                               tboxTitulo.addEventListener('keyup', function(){updateValueTitulo(enviar);}, false);" +
                    "                           } else if (tboxTitulo.attachEvent){ " +
                    "                               var enviar = 'tboxTitulo';" +
                    "                               tboxTitulo.attachEvent('onkeyup', function(){updateValueTitulo(enviar);});" +
                    "                           }" +
                    "                           newdiv.appendChild(tboxTitulo);" +
                    "                           var break1 = document.createElement('br');" +
                    "                           newdiv.appendChild(break1);" +
                    "                           ni.appendChild(newdiv);" +   
                            "       } else {" +
                            "           alert('There was a problem retrieving the XML data: ' + req.statusText);" +
                            "       }" +
                            "   }" +
                            "}";
                ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "PositionChanged", script, true);

and this is my code in aspx file

....
<asp:UpdatePanel runat="server" id="UpdatePanel3">
        <ContentTemplate>                
            <div id="spanObjDock"></div>
        </ContentTemplate>        
</asp:UpdatePanel>
....

What does "disappearing" mean? They don't show up when you View>Source? (That's expected, it shows source, not a rendering of the live DOM). The content appears in the page for a few seconds then goes away? Something else? — Quentin, Feb 18 '10 at 11:49
That's it. If i put an alert in the beginning it show me the elements with the values of the XML else the HTML elements disappear less then a second is more like a flash. What i have to do for the HTML element don't disappear? — SlimBoy, Feb 18 '10 at 11:55

salgiza · Answer 1 · 2010-02-18T12:31:52.803

Not exactly an answer, but two recommendations:

Use jQuery (or a similar library, but jQuery is supported by MS and you get Intellisense). Most of the code you have pasted would be resolved by jQuery, you wouldn't have to worry about different browsers, and you will just have to code what's important (your app logic).
Use Firefox + Firebug to debug your code. You can add breakpoints and run your code step by step to discover at which moment your changes to the HTML are reverting.

Links:

jQuery: http://jquery.com/

Firebug: http://getfirebug.com/

Using jQuery in Visual Studio 2008: http://weblogs.asp.net/scottgu/archive/2008/11/21/jquery-intellisense-in-vs-2008.aspx

jQuery tutorials: http://docs.jquery.com/Tutorials

jQuery .get() method: http://api.jquery.com/jQuery.get/

Is there a site where i can read and understand better the jQuery and where i can apply in my case? — SlimBoy, Feb 18 '10 at 12:10

HTML disappear after been created with javascript

1 Answers1