How to use onclick event in ratchet?

Question

I am new in Javascript and also in using Ratchet. I try to build a little app to get familiar. I have written the following code which does not quite work. On the back button I would like to get my javascript called that saves the note. But I am getting an error that note_back() cannot be found. What do I do wrong?

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Notes</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="css/ratchet.css" rel="stylesheet">
    <script src="js/ratchet.js"></script>
</head>
<body>
    <header class="bar bar-nav">
        <a class="icon icon-plus pull-right" data-transistion="slide-in" href="note.html"></a>
        <h1 class="title">Notes</h1>
    </header>
    <div class="content">
        <ul class="table-view">
        </ul>
    </div>
</body>
</html>

note.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Note</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="css/ratchet.css" rel="stylesheet">
    <script src="js/ratchet.js"></script>
    <script src="js/notecontroller.js"></script>
</head>
<body>
<header class="bar bar-nav">
    <a class="icon icon-left pull-left" onclick="javascript:note_back()"></a>
    <a class="icon icon-trash pull-right" onclick="javascript:note_delete()"></a>
    <h1 class="title">Add Note</h1>
</header>
<form>
    <br>
    <br>
    <br>
    <textarea id="notetext" rows="10"></textarea>
</form>
</body>
</html>

notecontroller.js

function note_back() {
    console.log("reached note_back");
    localStorage.setItem("note",document.getElementById("notetext"));
    window.location.href="index.html";
}
function note_delete() {
    console.log("reached note_delete");
    localStorage.removeItem("note");
    window.location.href="index.html";
}

Screenshot:

(As a side question, why do I not see note.html?)

enter image description here

You don't see note.html because ratchet.js uses ajax to load content for page transitions, so your application behaves like a SPA. Note.html is retrieved, parsed, and the content is swapped, and then the window location is set using the history API — kindasimple, Nov 16 '14 at 23:02
How do you call PUSH ? I'm trying to fix this one: http://stackoverflow.com/questions/30178538/how-do-i-trigger-ratchets-push-manually — jgauna, May 11 '15 at 22:35

kindasimple · Accepted Answer · 2014-11-16T23:25:29.163

The problem is that the javascript links in the head section of note.html aren't loaded so you have to put all of your javascript in index.html.

Ratchet uses push.js to navigate. When you click to navigate, ratchet loads note.html via ajax and parses the DOM for content, so your javascript includes aren't executed on subsequent pages.

you need to do two things: move your script reference to index.html, and change your controller navigation from window.location.href (which will reset your application) to call the PUSH({}) method (attached to the window in ratchet.js) with the correct options.

How to use onclick event in ratchet?

1 Answers1