Phonegap and Framework7, add external JavaScript files for specific pages

I would like to add external Javascript files, for specific pages in my Phonegap app. The app uses Framework7 for the UI.

Example:
Exercise page 2.1 has JavaScript file exercise2_1.js.
Exercise page 2.9 has JavaScript file exercise2_9.js ect.
I only want to load the JavaScript files, when the user is on that specific page.

The JavaScript files work, when they are included in the header section on the index page. I don't want to load all the exercise JavaScript files. I only want to load the one's being used. Is it possible to do this, without loading all the js files?

In the my-app section, i tried to load the files as an external js file. But could not get it to work. Nothing happens.

Index page

<html>

<title>My App</title>
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.min.css">
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.colors.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/exercise.css" />

<div class="statusbar-overlay"></div>
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
    <div class="list-block accordion-list">
      <ul>
        <li class="accordion-item"><a href="#" class="item-content item-link">
            <div class="item-inner">
              <div class="item-title">2</div>
            </div></a>
          <div class="accordion-item-content">
                <div class="list-block">
                  <ul>
                    <li class="item-content">
                      <div class="item-inner">
                        <a href="exercise2_1.html" class="close-panel" ><div class="item-title">Exercise 2</div></a>
                      </div>
                    </li>
                  </ul>
                </div>
          </div>
        </li>
      </ul>
    </div>
</div>
<div class="views">
    <div class="view view-main">
        <!-- Top Navbar-->
        <div class="navbar">
            <div class="navbar-inner">
                <!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
                <div class="center sliding">Awesome App</div>
                <div class="right">
                    <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
                </div>
            </div>
        </div>
        <div class="pages navbar-through toolbar-through">
            <div data-page="index" class="page">
                <div class="page-content">
                    <div class="content-block">
                        <p>Page content goes here</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
<script type="text/javascript" src="js/nav.js"></script>

my_app.js page

var myApp = new Framework7();
var $$ = Dom7;
var mainView = myApp.addView('.view-main', {
dynamicNavbar: true
});

$$(document).on('deviceready', function() {
 console.log("Device is ready!");
});

myApp.onPageInit('exercise2_1', function (page) {

})

$$(document).on('pageInit', function (e) {
   var page = e.detail.page;

if (page.name === 'exercise2_1') {

}
});

$$(document).on('pageInit', '.page[data-page="exercise2_1"]', function (e) { 
    myApp.alert('Test');
        function includeJs(jsFilePath) {
        var js = document.createElement("script");
        js.type = "text/javascript";
        js.src = jsFilePath;
       //document.body.appendChild(js);
       document.getElementsByTagName("head")[0].appendChild(js);
   }
includeJs("js/exercise2_1.js");
})

Exercise 2.1 page (exercise2_1.html)

<div class="navbar">
<div class="navbar-inner">
    <div class="left">
        <a href="#" class="back link">
            <i class="icon icon-back"></i>
            <span>Back</span>
        </a>
    </div>
    <div class="center sliding">Exercise 2.1</div>
    <div class="right">
        <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
    </div>
</div>
</div>
<div class="pages">
    <div data-page="exercise2_1" class="page">    
    <form id="Cloze" method="post" action="" onsubmit="return false;">
    <div class="ClozeBody">
    Use verbs from the Alex-text.<br><br>Example: Alex er våken og TENKER.<br><br>Pappa <span class="GapSpan" id="GapSpan0">
<input type="text" id="Gap0" onfocus="TrackFocus(0)" onblur="LeaveGap()" class="GapBox" size="6"></span> på et kontor. <br>Han <span class="GapSpan" id="GapSpan1"><input type="text" id="Gap1" onfocus="TrackFocus(1)" onblur="LeaveGap()" class="GapBox" size="6">
</span> ingeniør.
</div>
</form>
    <button id="CheckButton2" class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="CheckAnswers()">&nbsp;Check&nbsp;</button>
<button class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="ShowHint()">&nbsp;Hint&nbsp;</button>
    <div class="Feedback" id="FeedbackDiv">
    <div class="FeedbackText" id="FeedbackContent"></div>
    <button id="FeedbackOKButton" class="FuncButton" onfocus="FuncBtnOver(this)" onblur="FuncBtnOut(this)" onmouseover="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="HideFeedback(); return false;">&nbsp;OK&nbsp;</button>
    </div>
    </div> 
</div>

Upvotes: 0

Answers (2)

Charm Geld

Reputation: 191

I found the problem. It had to do with the onload event on the index page. I removed the onload event from the index page and put it in the exercise page.

This solved my issue.

<iframe style="display:none" onload="StartUp()" id="TheBody" src="js/exercise2_1.js"></iframe>

Hopes this helps someone else.

Upvotes: 1

firestream

Reputation: 400

I accomplished this by including JQuery and doing the following:

$$(document).on('pageInit', function (e) {
    var page = e.detail.page;

    if (page.name == 'page1') {
        $.getScript("js/page1.js");
    } else if (page.name == 'page2') {
        $.getScript("js/page2.js");
    }
});

Upvotes: 1

Phonegap and Framework7, add external JavaScript files for specific pages

Answers (2)

Related Questions