jquery - how to add Django media javascript on the fly to a widget in an ajaxed form? -
i can't widget media js render in ajaxed form. widget's css gets rendered. how can js render per widget? don't want have stick in base template head , have waiting on each page in case needs called. want make use of widget.media class load js, , not stick script tags in ajaxed form template somewhere.
i have custom django splitdatetimewidget have modified adding twitter-bootstrap classes/js it's component input widgets so:
class tbssplitdatetimewidget(widgets.multiwidget): """ widget splits datetime input 2 <input type="text"> 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)
the tbsdateinput
looks this:
class tbsdateinput(widgets.dateinput): """ renders 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 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' # add value attribute if value non-empty final_attrs['value'] = value html = ''' <div class="{1}" data-date-format="mm-dd-yyyy"> <input{0} /> <span class="add-on"> <i class="icon-th"></i> </span> </div> ''' return mark_safe(html.format(flatatt(final_attrs), datepicker_css_class))
it works fine if included in dom head on initial page load, when try adding widget's media ajaxed form (in twitter-bootstrap modal), css, not js, so:
{% block form %} {{ formset.form.media }} {% crispy formset formset.form.helper %} {% endblock %}
gives me:
<div class="modal-body"> <link rel="stylesheet" media="all" type="text/css" href="/static/js/datepicker/css/datepicker.css"> <link rel="stylesheet" media="all" type="text/css" href="/static/js/timepicker/compiled/timepicker.css"> <form class="form-inline" method="post"> ...
i css links no script tags js load datepicker js.
help!
nevermind! was working expected - didn't check ajaxed head js. , widgets appeared not working because covered bootstrap dialog. increased z-index
10000 , works.
Comments
Post a Comment