get jQuery mobile datebox running (TypeError: a.mobile.datebox is undefined)

Question

I cannot get the jQueryMobile - DateBox running. It is not shown at all and I get some JS errors. Here is my code:

Header:

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" href="css/jquery.mobile.structure-1.2.0.min.css" />
<link rel="stylesheet" href="css/jqm-datebox-1.1.0.min.css" />
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="js/jqm-datebox-1.1.0.mode.calbox.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile.datebox.i18n.de.utf8.js"></script>

Body:

<form id="formular" name="formular" method="post" action="enquiry.php">
  <table>
    <tr>
      <td>Arrival</td>
      <td><input name="arrival" id="frm_arrival" type="date" data-role="datebox" data-options='{"mode": "calbox"}' value="<?php echo $arrival; ?>" /></td>
    </tr>
    <!-- .... -->
  </table>
</form>

The datepicker is not shown and Firebug gives me the following errors:

TypeError: a.mobile.datebox is undefined
TypeError: jQuery.mobile.datebox is undefined

The error should be on line 11 of jquery.mobile.datebox.i18n.de.utf8.js . This is the line:

jQuery.extend(jQuery.mobile.datebox.prototype.options.lang, {

I cannot find the error. Is it a jQuery conflict? Am I using jQueryMobile - DateBox the wrong way? What I'm doing wrong?

Answer 1

Switch these two lines, I'm guessing the first one depends on the second one:

<script type="text/javascript" src="js/jqm-datebox-1.1.0.mode.calbox.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile.datebox.i18n.de.utf8.js"></script>

To this:

<script type="text/javascript" src="js/jquery.mobile.datebox.i18n.de.utf8.js"></script>
<script type="text/javascript" src="js/jqm-datebox-1.1.0.mode.calbox.min.js"></script>

EDIT

You need to include the actual datebox file in your header. The German version is only a translation. It doesn't contain the datebox plugin itself.

Arrange your script tags like so:

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="jquery.mobile.datebox-something-something.js"></script>
<script type="text/javascript" src="jqm-datebox-1.1.0.mode.calbox.min.js"></script>
<script type="text/javascript" src="jquery.mobile.datebox.i18n.de.utf8.js"></script>