CODEWITHSUNDEEP
javascript
webdad3
webdad3

Reputation: 9080

javascript caching (maybe)?

I have a need to remove an element from my screen and then regenerate an element with the same name.

In the code there is a deleteObject function and a appendChild call.

In the deleteObject function it is removing the element(s) by using the removeChild statement (as seen below).

See this jsfiddle for what I'm trying to accomplish. Right now the fiddle works but my code still does not. I think it has to do with the "top" keyword. See this question for my thoughts on that.

Like I said earlier I have an element called "container1" that needs to be removed and then I have a new "container1" that needs to be created. When I remove the code out of the deleteObject function my new "container1" displays, however, when I include the code it appears to conflict and the new "container1" never gets displayed.

I'm wondering is there some sort of javascript caching that is going on? As the remove and create functions are called back to back. Is there a way that I can use the code that I have but add some sort of delay?

Any advice appreciated!

    function deleteObject(id) {
        try {
            var obj = document.getElementById(id);
            obj.parentNode.removeChild(obj);
        } catch (e) {}
        //do something
    }

function hidePopWin() {
    if (gPopupMask == null) {
        return;
    }

    deleteObject('popupMask_' + popuplayer);
    deleteObject('popcont_' + popuplayer);

    popuplayer--;

    if (popuplayer == 0) {
        gPopupIsShown = false;
        gPopupContainer = this.undefined;
        gPopupIframe = this.undefined;
    } else {
        var showmask = document.getElementById('popupMask_' + popuplayer);
        if (showmask) {
            showmask.style.display = "block";
            gPopupContainer = document.getElementById("popcont_" + popuplayer);
            gPopupIframe = document.getElementById("iframe_layer" + popuplayer);
        }
    }
    //console.log("got here: " )
}

UPDATE: This jsfiddle is more accurately displaying what is going on(however, in the fiddle it works, but internally it doesn't): See this question for further information

Upvotes: 0

Views: 312

Answers (5)

Artak
Artak

Reputation: 2887

I'm not sure whether you'll be ok with this or not, but this is a way to handle: When you already got the reference to the object you're trying to delete, just rename it and then delete. This will make the name in DOM not used, so after adding the new element, it will be unique by its name.

Upvotes: 0

Todd Baur
Todd Baur

Reputation: 1005

It seems you have a couple of things that you might want to consider changing. First, would you want to maintain a sort of state of the container you're adding/removing? Would it make more sense to use bubbling? It's sort of unclear what you're after. Are you asking how to remove an element and create a new element with the same id name? If that's the case then you might want to make that your first object you create in js.

var myDiv = function(data){id: id, init: function(data.id){document.createElement('div'), return init}

myDiv.init("id") //makes a new div!

Then your next object is the popup, etc...etc...

You know what? A good example of this is sticky notes, sans the localstorage hooks: http://www.webkit.org/demos/sticky-notes/

Upvotes: 0

Lachezar
Lachezar

Reputation: 6703

Ok, I tried debugging that thing and it seems related to the removeChild method.

This fixes the issue - setTimeout(function(){obj.parentNode.removeChild(obj)}, 5)

The only explanation I can think of is that the removeChild(iframe-obj) is called from an event of the iframe-obj. So it is not possible to execute javascript code deleting the DOM element from which this code is executed (like <div onclick="this.parent.removeChild(this)"... - not going to remove itself).

This dependency is not obvious in the code, but probably it has something to do with the UI thread and the iframe being another document loaded at the same time. The setTimeout allows the script to run from different execution point (not the one preventing the iframe to be deleted) and so the iframe-obj get removed from the DOM.

That's interesting case.

Upvotes: 0

Asti
Asti

Reputation: 12667

Even though trivial, perhaps you might have overlooked the DOM actually loading? jsFiddle calls your code on onLoad.

If you call deleteObject('id');, it won't work until the after document/element has been loaded into the DOM, because the ID doesn't exist until then.

Upvotes: 2

jfriend00
jfriend00

Reputation: 707158

There is no caching in javascript, but objects are not actually destroyed if you have a reference to them in a javascript variable (which it looks like you might in your sample code).

That alone shouldn't keep you from replacing the object in the DOM with another object so there must be something else going on. You would have to include a more complete sample of the code you are asking about that causes the problem (including your HTML), for us to know how to advise your more specifically.

You can simplify the code you did include in your post by using this function:

function deleteObject(id) {
    try {
        var obj = document.getElementById(id);
        obj.parentNode.removeChild(obj);
    } catch(e) {}
}

Then, you can call this:

deleteObject('popupMask_' + popuplayer);
deleteObject('popcont_' + popuplayer);

And, this code does not keep a reference to the removed objects in any JS variable so the objects will be destroyed by the JS garbage collector.

Upvotes: 0

Related Questions