How to destroy Monocle or send new bookData?

Dear Joseph,

Thank you for MONOCLE. I am developing an offline HTML 5 app where a user can select a book to read from a set of books stored in his SD Card. I am using only one HTML, which has two DIV, one for book selection, second for reading. I am able to read these books, but have a small issue.

Here is a sample overview:

Book selection DIV	Reader DIV, here the monocle renders the book which is selected on left list.
Book 1	Content of Book 1:Lorem ipsum dolor sit amet,
Book 2	consectetur adipisicing elit,
Book 3	sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Book 4	Ut enim ad minim veniam, quis nostrud
.	exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
.	.
.	.

Suppose I open the app for the first time, and choose any book, it loads good, without any error. Here I call Monocle.Reader(...,function(rdr)) and configure accordingly. Just like the test pages.

Now if i go back to selection DIV and select a different book, Monocle.Reader(...,function(rdr)) is called again with some warnings:

"Uncaught TypeError: Cannot read property 'defaultView' of null", source: file:///android_asset/www/js/monocore3.2.js (4660)

Also the scrubber, and other controls doesn't work and gives:

"Uncaught TypeError: Cannot read property 'offsetWidth' of null", source: file:///android_asset/www/js/monoctrl3.2.js (403)

I am assuming that since I am not closing/destroying the previous reader(or dont know how to pass a new bookData to the already initialized reader), conflicts occur and I am getting these warnings. Since all the test cases load only one time(i.e one http request), I am not able able to find a proper way to destroy Monocle and create a new one for the new book.

I hope I am clear. Any help would be much appreciated.

Regards, Abhilash Thomas

I observed that in the test pages, at a go, multiple books were shown. This made me think to add and remove reader DOM dynamically.

I solved this with adding and removing div id="reader" dynamically using jquery.append() and jquery.remove().

So everytime when I choose a book , I first remove the div id="reader" using jquery.remove and then append div id="reader" using jquery.appened(div id="reader"); and pass that id to Monocle.Reader("reader"....,function(rdr){});

Code Snippet:

    var reader_page = "<div id=\"reader\"></div>";
var scrubber = "<div id=\"scrubber\"></div>"

    $("#readerCntr").append(reader_page);
    $("#scrubber_wrap").append(scrubber);

 Monocle.Reader("reader", bookData,

Will be glad to help, if anyone needs more info :)

I am still not sure if this causes memory leaks or overflows. Still searching for a way to add new BookData to already initialized Monocle reader.

joseph / Monocle

How to destroy Monocle or send new bookData? #245

Code Snippet: