asp.net-mvcasp.net-mvc-4jquery-mobiledatebox

jQuery mobile flipbox TypeErrpr:Cannot read property 'prototype'


Im trying to add the datebox plugin, from: http://dev.jtsage.com/

Im trying to follow the instructions on the website, but maybe Im missing something because i keep getting the following error message on page load:

"Uncaught TypeError: Cannot read property 'prototype' of undefined"

Im using mvc 4,and added the plugin to my project using 'NuGet'

my bundleConfig:

bundles.Add(new ScriptBundle("~/bundles/jqm-datebox-core").Include(
                   "~/Scripts/jqm-datebox.core.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqm-flipbox").Include(
                  "~/Scripts/jqm-datebox/jqm-datebox.mode.flipbox.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqm-datebox-en").Include(
                  "~/Scripts/jquery.mobile.datebox.i18n.en.utf8.js"));

            bundles.Add(new StyleBundle("~/Content/jqm-datebox")
          .Include(("~/Content/jqm-datebox.css")));

layout.cshtml:

    @Styles.Render("~/Content/pangojquerymobilecss", "~/Content/jqueryMobileIconsCss", "~/Content/jqueryMobileStructureCss", "~/Content/Mobile/css", "~/Content/jqm-datebox")        

@Scripts.Render("~/bundles/jquerymobile", "~/bundles/jqm-datebox-core", "~/bundles/jqm-flipbox", "~/bundles/jqm-datebox-en")

the cshtml:

<input type="text" data-role="datebox" data-options='{"mode":"flipbox"}'>

and if that's any help, the header that created when i load the page:

<script async="" src="//www.google-analytics.com/analytics.js"></script><script src="/Scripts/jquery-2.1.1.js"></script>
<script src="/Scripts/jquery.validate-1.13.0.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>

<script src="/Scripts/jquery.mobile-1.4.2.js"></script>
<script src="/Scripts/jqm-datebox/jqm-datebox.mode.flipbox.js"></script>

 <style type="text/css"></style></head>

thanks


Solution

  • For what it's worth, you can actually create a combined js file if you prefer here:

    http://dev.jtsage.com/jQM-DateBox/builder/

    It allows you to tailor to which jQM version you are using, include the modes you are using, and include whatever number of language files you need as well.

    If for some reason you need to use a version not listed there (although, the 1.4.4 version works for the entire jQM 1.4 branch, and the 1.4.0 version is backwards compatible with 1.3.0), another option is just to copy and paste the contents of all the js files into one - the only requirement is that the .core file has to appear first, and jQM must still be loaded prior to datebox.