Uncaught ReferenceError using external script & jQuery Mobile

Question

I'm trying to create a web app but can't get my javascript to work.

When loading the page with a fresh started browser I get 'Uncaught ReferenceError: getResult is not defined' (is located in js/ajax.js) but when I refresh the page everything works. I have tried to move where the script loading takes place but I can't get it to work.

I found a bunch of similar questions but they seem to suggest to load script inside and to not use $(document).ready() and I am doing that already. Anyone?

EDIT: I noticed that the error only occurs when going from another jQuery mobile page.

Index.html

<!DOCTYPE html>
<html>
<head>
    <title>sio.signalare.se</title>
    <meta content="width=device-width, user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" /> 
    <script src="js/ajax.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
    <style>
        .wrap {
            white-space: normal !important;
        }
    </style>
</head>

<body>
    <div data-role="page">
    <div data-role="header">
        <a class="ui-btn-left" data-direction="reverse" data-icon="back"
        data-iconpos="notext" href="../"></a>

        <h1>ATC-felkoder</h1>
    </div><!-- /header -->

    <div data-role="content">

        <ul data-inset="true" data-role="listview">
            <li>
                <h2 class="wrap">F1</h2>
                <p class="wrap"><strong id="F1-result"></strong></p>
                <select id="F1" onchange="getResult(this);">
                    <option value="" selected>Välj</option>
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="A">A</option>
                    <option value="C">C</option>
                    <option value="E">E</option>
                    <option value="F">F</option>
                    <option value="H">H</option>
                    <option value="L">L</option>
                    <option value="P">P</option>
                    <option value="U">U</option>
                </select>
            </li>
        </ul>

        <h6>Version 2.0</h6>
    </div><!-- /content -->
</div><!-- /page -->
</body>
</html>

js/ajax.js

function getResult(e) {
    if (e.value) {
        var ajax_load = "<img src='img/loader.gif' alt='loading...' />";
        var loadUrl = "data/result.php?args=" + e.id + "|" + e.value;
        $("#" + e.id + "-result").load(loadUrl);
    } else {
        $("#" + e.id + "-result").empty();
    }        
}

Have you tried rearranging the files so that you call js/ajax.js AFTER jquery is called? You refer to a JQuery function ($) before JQuery is actually defined. — phouse512
– phouse512, Commented Jul 24, 2014 at 19:03

Rodney G · Accepted Answer · 2014-07-24 20:07:55Z

0

;TLDR: <head> is ignored on internal pages when using jQuery Mobile.

To use jQuery Mobile with external styles and scripts, you're going to have to load the same set of scripts and styles to every page, per the documentation.

edited Jul 24, 2014 at 20:07

answered Jul 24, 2014 at 19:37

Rodney G

4,8461 gold badge19 silver badges15 bronze badges

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

1 Comment

user3833749 Over a year ago

Thanks, Moving script into jquery content area made it load so I don't have to use it on every page.

Collectives™ on Stack Overflow

Uncaught ReferenceError using external script & jQuery Mobile

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related