Search code examples
javascriptcordovadynamic-html

JavaScript: Dynamically injecting and removing html pages

I'm developing a Phonegap/Cordova application and having serious performance issues. I'm looking into a tutorial and the author is recommending dynamic creation of html pages using JavaScript.

here's a link of the tutorial: http://coenraets.org/blog/phonegap-tutorial/

scrolling down to part 4: "A single page application is a web application that lives within a single HTML page. The 'views' of the application are injected into- and removed from the DOM as needed as the user navigates through the app."

I understand the creation part, but how are the pages being removed from the DOM???

Code by Christopher Coenraets:

renderHomeView: function() {
  var html =
        "<div class='header'><h1>Home</h1></div>" +
        "<div class='search-view'>" +
        "<input class='search-key'/>" +
        "<ul class='employee-list'></ul>" +
        "</div>"
  $('body').html(html);
  $('.search-key').on('keyup', $.proxy(this.findByName, this));
},

The initialize function:

initialize: function() {
  var self = this;
  this.store = new MemoryStore(function() {
     self.renderHomeView();
  });
}

I don't see any function that removes the HomeView after rendering it.

please help me figure this out as I've been going over it for days

Solution

  • The JQuery method "$('body').html(string);" sets the content of the 'body' tag in the html code to whatever the string specifies. Meaning previous content inside the body tag will be removed from the DOM.

    You can also remove specific elements from the DOM using another JQuery method called remove(). This is the method he uses later in the tutorial when implementing sliding between html pages.

    There are updated versions of the tutorial you linked to http://ccoenraets.github.io/cordova-tutorial/create-cordova-project.html.