title: how to add Django media javascript on the fly to a widget in an ajaxed form?
body: <p>I can't get my widget media JS to render in my AJAXed form.  Only my widget's CSS gets rendered.  How can I get the JS to render per widget?  Don't want to have to stick it in my base template head and just have it waiting on each page in case it needs to get called.  I also want to make use of the widget.Media class to load the JS, and not stick script tags in my ajaxed form template somewhere.</p>
  
  <p>I have a custom Django <a href="https://github.com/django/django/blob/master/django/forms/widgets.py#L848" rel="nofollow">SplitDateTimeWidget</a> that I have modified by adding twitter-bootstrap classes/JS to it's component input widgets like so:</p>
  
  <pre><code>class TBSSplitDateTimeWidget(widgets.MultiWidget):
  """
  A Widget that splits datetime input into two &lt;input type="text"&gt; boxes.
  """
  
  def __init__(self, attrs=None, date_format=None, time_format=None):
      widgets = (TBSDateInput(attrs=attrs, format=date_format),
                 TBSTimeInput(attrs=attrs, format=time_format))
      super(TBSSplitDateTimeWidget, self).__init__(widgets, attrs)
  </code></pre>
  
  <p>The <code>TBSDateInput</code> looks like this:</p>
  
  <pre><code>class TBSDateInput(widgets.DateInput):
  """
  Renders a Twitter Bootstrap Date Input.
  """
  
  class Media:
      css = {'all': ('js/datepicker/css/datepicker.css',)}
      js = (
          'js/datepicker/js/bootstrap-datepicker.js',
          'js/jquery.watermark.min.js',
          'js/myapp/datepicker.js',
      )
  
  def render(self, name, value, attrs=None):
      if value is None: value = ''
      final_attrs = self.build_attrs(attrs, type="text", name=name)
      if final_attrs.get('class'):
          final_attrs['class'] = final_attrs['class'] + ' input-small' 
      if final_attrs.get('disabled'):
          datepicker_css_class = 'input-append'
      else:
          datepicker_css_class = 'input-append date'
      # only add value attribute if value is non-empty
      final_attrs['value'] = value 
  
      html = '''
          &lt;div class="{1}" data-date-format="mm-dd-yyyy"&gt;
              &lt;input{0} /&gt;
              &lt;span class="add-on"&gt;
                  &lt;i class="icon-th"&gt;&lt;/i&gt;
              &lt;/span&gt;
          &lt;/div&gt;
          '''
      return mark_safe(html.format(flatatt(final_attrs), datepicker_css_class))
  </code></pre>
  
  <p>It works fine if it is included in the DOM head on initial page load, but when I try adding the widget's media to an ajaxed form (in a twitter-bootstrap modal), all I get is the CSS, but not the JS, like so:</p>
  
  <pre><code>{% block form %}
  
      {{ formset.form.media }}
      {% crispy formset formset.form.helper %}
  
  {% endblock %}
  </code></pre>
  
  <p>Gives me:</p>
  
  <pre><code>&lt;div class="modal-body"&gt;
      &lt;link rel="stylesheet" media="all" type="text/css" href="/static/js/datepicker/css/datepicker.css"&gt;
      &lt;link rel="stylesheet" media="all" type="text/css" href="/static/js/timepicker/compiled/timepicker.css"&gt;
      &lt;form class="form-inline" method="post"&gt;
      ...
  </code></pre>
  
  <p>I get the CSS links but no script tags with JS to load my datepicker JS.</p>
  
  <p>Help!</p>