DojoX Mobile ListItem load HTML via AJAX and then remove from DOM

Question

Let's say in a view I have a DojoX Mobile ListItem that is pulling an HTML view fragment into the DOM via AJAX and then transitioning to that view. Assume this is all working fine.

Now, I go back to the initial view that had that ListItem on it and click some other button that destroys that view node from the DOM. If I now click on that ListItem that previously loaded that view node into the DOM (which has now been removed), it will try to transition to a view that doesn't exist. It doesn't know that it has been removed.

Is there some type of way to tell a ListItem that it needs to fetch the HTML again because what was previously fetched no longer exists? I am not seeing anything about doing this in any documentation anywhere. I don't think a code sample is really necessary here, but I can provide a minimal one if necessary.

Answer 1

I went a different route and left the view exist in the DOM, and simply made a function that clears all sensitive data out of the view.

Answer 2

Okay, in this case, i guess you could hook the onShow function of your ListItem container(or any other onchange event). Create a listener for said handle to evaluate if your item needs reloading. Following is under the assumtion that it is the item.onclick contents showing - and not the label of your item which contains these informations

Or better yet, do all this during initialization so that your ListItem container will be an extended with custom onClick code.

Seems simple but may introduce some quirks, where/when/if you programatically change to this item, however here goes:

function checkItem() {
    // figure out if DOM is present and if it should be
    if( isLoggedIn() ) {
       this.getChildren().forEach(function(listitem) {
        if( dojo.query("#ID_TO_LOOK_FOR", listitem.domNode).length == 0 ) {
           // this references the listItem, refresh contents.
           // Note: this expects the listitem to be stateful, have no testing environment at time being but it should be
           listitem.set("url", listitem.url);
        }


       });
    }
}

Preferably, set this in your construct of the container for your ListItems

var listItemParent = new dojox.mobile.RoundRectList({
  onShow : checkItem,
  ...
});

Or create listener

var listItemParent = dijit.byId('itemRegistryId');
// override onClick - calling inheritance chain once done
dojo.connect(listItemParent, "onClick", listItemParent, checkItem);