CODEWITHSUNDEEP
jquery-uibackbone.jsdatepickerrequirejs
mstafkmx
mstafkmx

Reputation: 429

Datepicker jqueryui not works with require.js and backbone.js

Jquery ui datepicker not works on click on input.

main.js

require.config({
    baseUrl: "js",
    paths: {
        html5shiv: "libs/html5shiv",
        jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min",
        jqueryui: "http://code.jquery.com/ui/1.10.3/jquery-ui",
        tablesorter: "libs/jquery.tablesorter.min",
        script: "script",
        underscore: "libs/underscore.min",
        backbone: "libs/backbone.min",
        utils: "utils",
        collectorModel: "models/collectorModel",
        collectorCollection: "collections/collectorCollection",
        tollectorRouter: "routers/tollectorRouter",
        edit: "views/collector/tollector_edit",
        index: "views/collector/collector_index",
        neww: "views/collector/collector_new",
        row: "views/collector/collector_row",
        show: "views/collector/collector_show",
        'templates': 'templates'
    },
    shim: {
        jqueryui: {
            deps: ["jquery"],
            exports: "Jqueryui"
        },
        tablesorter: {
            deps: ["jquery"],
            exports: "TableSorter"
        },
        script: {
            deps: ["jquery", "jqueryui", "tablesorter"],
            exports: "Script"
        },
        jqueryui: {
            deps: ["jquery"]
        },
        underscore: {
            exports: "_"
        },
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        }
    }

});

require(["backbone", "underscore", "collectorCollection", "collectorRouter", "script"],
    function (Backbone, _, CollectorCollection, CollectorRouter) {
        var collectors = new CollectorCollection();
        var router = new CollectorRouter({collectors: collectors});
        Backbone.history.start();
    });

Template: collector_edit.html

input type="text" class="inputs dateInput" name="endDate" placeholder="End date" value="<%= endDate %>

scripts.js

$(document).ready(function () {
    $(".dateInput").datepicker({dateFormat: "dd/mm/yy"});
});

it worked before using backbone and RequireJS

Upvotes: 0

Views: 2948

Answers (1)

silkAdmin
silkAdmin

Reputation: 4830

When using requireJS your dependencies do not exist in the global scope anymore but only inside modulde that requires them. Try changing your script JS to:

define(['jqueryui'], function( jqueryui ) {
  $(document).ready(function () {
    $(".dateInput").datepicker({dateFormat: "dd/mm/yy"});
  });

})

Upvotes: 1

Related Questions