Home/ Questions/Q 8282435
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T10:22:08+00:00

I’m building an app in which I’m using Django on the backend and jQuery

  • 0

I’m building an app in which I’m using Django on the backend and jQuery UI/Backbone to build the front. I’m pulling a Django-generated form into a page with jQuery.get() inside of a Backbone View. That part works fine, but now I want to add some jQuery UI stuff to the form (e.g. a datepicker, some buttons that open dialogs, etc). So, here’s the relevant code:

var InstructionForm = Backbone.View.extend({
  render: function() {
    var that = this;
    $.get(
      '/tlstats/instruction/new/',
      function(data) {
        var elements = $(data);
        $('#id_date', elements).datepicker();
        that.$el.html(elements.html());
      }
    };
    return this;
  }
});

The path /tlstats/instruction/new/ returns an HTML fragment with the form Django has generated. What’s happening is that input#id_date is getting the hasDatePicker class added and the datepicker div is appended to my <body> element (both as expected), but when I click on input#id_date, nothing happens. No datepicker widget appears, no errors in the console. Why might this be happening?

Also, somewhat off-topic, but in trying to figure this problem out on my own, I’ve come across several code examples where people are doing stuff like:

$(function() {
  $('#dialog').dialog(...);
  ...
});

Then later:

var MyView = Backbone.View.extend({
  initialize(): function() {
    this.el = $('#dialog');
  }
});

Isn’t this defeating the purpose of Backbone, having all that jQuery UI code completely outside any Backbone structure? Or do I misunderstand the role of Backbone?

Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think your problem is right here:

    $('#id_date', elements).datepicker();
that.$el.html(elements.html());

    First you bind the datepicker with .datepicker() and then you throw it all away by converting your elements to an HTML string:

    that.$el.html(elements.html());

    and you put that string into $el. When you say e.html(), you’re taking a wrapped DOM object with event bindings and everything else and turning into a simple piece of HTML in a string, that process throws away everything (such as event bindings) that isn’t simple HTML.

    Either give .html() the jQuery object itself:

    $('#id_date', elements).datepicker();
that.$el.html(elements);

    or bind the datepicker after adding the HTML:

    that.$el.html(elements);
that.$('#id_date').datepicker();
    • 0