Using jQuery UI Dialog with Backbone.js and RequireJS

Question

I would like to do popups on my first webpage which using a backbone.

define(['jquery',
'jqueryui',
'underscore',
'backbone',
'api',
'text!' + versions.getVersionedPath('templates/form.html')

 function ($, jqueryui, _, Backbone, Api, Form) {
    var widok = Backbone.View.extend({
        formularz: _.template(Form),
        el: 'body',
        events: {
            'click #test': 'test',
            'click .del': 'usun',
            'click #elo': 'test2'
        },
        initialize: function () {
            this.$el.html(this.formularz());
            self = this;
            console.log('This model has been initialized.');
            this.render();
        },
        render: function () {
            console.log('Showing up');
                    this.$el.html(this.formularz());
        },
        test: function () {
            self.showNews();
            return false;

        },
        test2: function () {
            $("#dialog-confirm").dialog({
                resizable: false,
                height: 140,
                modal: true,
                buttons: {
                    "Delete all items": function () {
                        $(this).dialog("close");
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
            });
        }
    });

    return {initialize: function () {
            console.log('Initialize');
            new widok;
            self.showNews();
            console.log('blablablablabla');
        }};

});

I have function like this, but when I'm trying to use it I had error like

Uncaught TypeError: $(...).dialog is not a function.

I have defined jquery and jqueryui. Someone could help me ?

Have it on requirejs config

shim: {
  jqueryui: {
    "deps": ['jquery']
  },

Have you defined shim for jQuery UI? Please post the requirejs config. — T J, Jul 04 '16 at 07:15
jQuery Ui doesn't really export anything, so it's better to add it as the last. Maybe the path is wrong or something? BTW what version of jQuery UI are you using? — T J, Jul 04 '16 at 07:35
@nEJVI There's no such thing? latest version is like `~1.11.0`..? — T J, Jul 04 '16 at 07:51

score 0 · Accepted Answer · answered Jul 04 '16 at 08:20

The code you shared has syntax errors, you're not closing the dependency array.

jQuery UI supports AMD from version 1.11.0. Here's a guide for using it with AMD loaders.

So if you're using the latest versions then remove the shim from configuration.

also note that jqueryui in your module will be undefined since it doesn't export anything, so it's better to add such things at the end of dependencies like:

define([
  'jquery',
  'underscore',
  'backbone',
  'api',
  'text!' + versions.getVersionedPath('templates/form.html'),
  'jqueryui'],
function ($, _, Backbone, Api, Form) {});

Using jQuery UI Dialog with Backbone.js and RequireJS

1 Answers1