load Js file in HTML

Question

My first PhoneGap application includes 2 HTML files.

The first one is named index.html which uses index.js. This file will display a list item. When I click an item in that list, it brings me to detail.html file by this:

   $.mobile.changePage("detail.html", { transition: "slideup"});

OR

   location.href = "detail.html";

On the detail.html page, I load detal.js. However it did not work. I could not use functions in detail.js.

Please give me your advise and there are any example ?

Capture Photo

    <link rel="stylesheet" href="css/jquery.mobile.structure-1.3.0.min.css" />
    <link rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css" />
    <link rel="stylesheet" href="css/getAbstract.min.css" />
    <script src="js/jquery-1.9.0.min.js"></script>
    <script src="js/jquery.mobile-1.3.0.min.js"></script>
    <script src="js/jquery.ba-dotimeout.js"></script>
    <script src="js/jquery.dst.js"></script>

    <script type="text/javascript" charset="utf-8" src="js/cordova-2.5.0.js"></script>
    <script type="text/javascript" charset="utf-8"></script>


</head>
<body>

    <div data-role = "page" data-theme = "a" id = "pageContainer">
        <!--Start Page Header -->
        <div data-role = "header" id = "pageHeader" data-nobackbtn = "true" data-position = "fixed">
            <h1>Camera</h1>
        </div>
        <!--End Page Header -->

        <!--Start Page Content-->
        <div data-role = "content" id= "pageContent">
            <a data-role = "button" id = "btnCaptureEdit" href = "">Capture Edit</a>
            <a data-role = "button" id = "btnLibraryPhoto" href = "">Get Photo From Library</a>
            <a data-role = "button" id = "btnAlbumPhoto" href = "">Get Photo From Album</a>
        </div>
        <!--End Page Content-->

        <!--Start Page Footer-->
        <div data-role = "footer" id = "pageFooter">
        </div>
        <!--End Page Footer-->

    </div>
    <script src="js/detail.js"></script>

</body>

</html>

All your script tags should have type attributes. The last script tag in the head is empty and could be removed. — Surreal Dreams
– Surreal Dreams, Commented Apr 9, 2013 at 3:54

Ilia Frenkel · Accepted Answer · 2013-04-09 03:51:37Z

10

If this is your detail.html I don't see where do you load detail.js? Maybe this

<script src="js/index.js"></script>

should be this

<script src="js/detail.js"></script>

?

answered Apr 9, 2013 at 3:51

Ilia Frenkel

1,98714 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Thuong Tran Over a year ago

I loaded <script src="js/detail.js"></script> at bottom. you can see.

Thuong Tran Over a year ago

When i run detail.html file in web browser, it worked well, but when i run iphone simulator, it did not work.

Thuong Tran Over a year ago

I can not call button event in detail.js file. Detail.js: var btnCaptureVar = $('#btnCapture'); btnCaptureVar.click(function() { alert("test"); });

Ilia Frenkel Over a year ago

Make sure that you are waiting for the page to load. Use $(document).ready(function(){ <YOUR CODE HERE> });

Thuong Tran Over a year ago

I used location.href = "detail.html"; then it work now, because mobile.changePage not load you file.

user10654908 · Accepted Answer · 2019-07-16 14:48:00Z

0

I had the same problem, and found the answer. If you use node.js with express, you need to give it its own function in order for the js file to be reached. For example:

const script = path.join(__dirname, 'script.js');
const server = express().get('/', (req, res) => res.sendFile(script))

answered Jul 16, 2019 at 14:48

user10654908

952 silver badges8 bronze badges

Collectives™ on Stack Overflow

load Js file in HTML

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related