0

I'm using django-autocomplete-light to render some autocomplete options.

I have a place on the website that it works without a hitch, but there is another place, where it does not work, actually it works partially.

The autocomplete options renders just fine, but when the user clicks on one of those, it throws:

Uncaught TypeError: Object [object Object] has no method 'yourlabsWidget'

What are the differences?

On the page that it works, fully, I'm rendering the entire form. In this widget, i'm using just the fields, in the idiom {{ form.field }}.

EDIT

The javascript files from django-autocomplete-light are being loaded just fine on both pages.

Anyone has a clue?

EDIT 2

<head>
    <script type="text/javascript" src="/static/js/jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery/jquery-ui-1.9.2.custom.min.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/css/jquery/jquery-ui-1.9.2.custom.min.css">
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="/static/css/main.css">

<script type="text/javascript" src="/static/autocomplete_light/autocomplete.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/widget.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/addanother.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/text_widget.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/remote.js"></script>
<link rel="stylesheet" type="text/css" href="/static/autocomplete_light/style.css">
    <script data-main="/static/js/rotas.js/main.js" src="/static/js/require/require.js"></script>    
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="main" src="/static/js/rotas.js/main.js"></script>

George Silva
  • 3,454
  • 10
  • 39
  • 64

1 Answers1

4

If yourlabsAutocomplete extension is properly added to the jquery instance, and then becomes undefined: another jquery was loaded on top of the previous one.

If using require.js, then either:

  • don't load jquery manually, load jquery and autocomplete scripts via require.js,
  • either don't load jquery via require.js

If in doubt, extract <script> tags from the generated page, and use firebug or webkit inspector to check if jquery is loaded twice.

django-autocomplete-light does not intend to mess with your jquery/javascript strategies. Thus, it has no reason to get in your way - if it does then it means that something is wrong in your javascript loading strategy.

jpic
  • 32,891
  • 5
  • 112
  • 113
  • I'll try to load autocomplete via require. I'm quite new to require and js in general, so I might have made mistakes. I'm glad you care. – George Silva Mar 14 '13 at 20:05