django ajax filtered fields - searching the bug

Question

hy!

i m trying to use django ajax filtered fields for a many-to-many-relationship (outside the admin! for staff and non-staff users.). i walked through the introduction at the homepage of this add-in and the result is, that i can not make it run :-(

i m wondering what i m doing wrong and hope to find some help here.

thus i included all the stuff that i need. this is my form.

class MarketingActionForm(forms.ModelForm):

    contact = ManyToManyByLetter(Contact, field_name="first_name")

    class Meta:
        model = MarketingAction
        exclude = ('created_by',)

    class Media:
            js = (
                settings.ADMIN_MEDIA_PREFIX + "js/SelectBox.js",
                settings.ADMIN_MEDIA_PREFIX + "js/SelectFilter2.js",
                settings.MEDIA_URL + "js/jquery.js",
                settings.MEDIA_URL + "js/ajax_filtered_fields.js",
            )

my project urls.py

(r'^ajax_filtered_fields/', include('ajax_filtered_fields.urls')),
    (r'^dynamic-media/jsi18n/$', 'django.views.i18n.javascript_catalog'),

the javascript included in my page:

         {% load adminmedia %}
        <!--<script type="text/javascript" src="/admin/jsi18n/"></script>-->
        <script type="text/javascript" src="/dynamic-media/jsi18n/"></script>
        <script type="text/javascript" src="{% admin_media_prefix %}js/core.js"></script>    

all these links do work. i tested it by clicking on the links. thus i think all the needed .js is available.

the first question that i have is:

1) should the tag {% load adminmedia %} create any output? because there is no output in the .html file.

the second question:

2) the following code is created in the .html .

<a class="ajax_filter_choice" 
            href="javascript:void(0)"
            onclick="ajax_filtered_fields.getManyToManyJSON('id_contact', 'crm', 'Contact', 'first_name__istartswith=w', 'None')">w</a> 

how i can test whether this ajax call is successfull? or whether this function (ajax_filtered_fields.getManyToManyJSON) can be referenced. because it seems as nothing happens when i click on the link.

the third question:

3) if you click on the link below you see what is already created. i see only one box, and if i click on the links nothing happens. only the contacts which start with "a" are shown.

ok not really a question.. rather more information ;-)

screenshot of the (wrong) result

would be great if this a filtered fields professional read and help me.. thanks in advance!

edit1:

after playing around with firebug i get the two following errors:

SelectFilter is not defined
anonymous()1 (line 424)
anonymous()jquery.js (line 19)
anonymous([function(), function(), function(), 1 more...], function(), Object name=F)jquery.js (line 12)
anonymous()jquery.js (line 19)
anonymous()jquery.js (line 19)
[Break on this error] SelectFilter.init("id_c... "http://localhost:8000/media/admin/");\n1 (line 424)

ajax_filtered_fields is not defined
function onclick(event) { ajax_filtered_fields.getManyToManyJSON("id_contact", "crm", "Contact", "first_name__istartswith=o", "None"); }(click clientX=470, clientY=390)

Now I`m asking myself what i have to add in order that these two functions are available to the page!?

edit2:

Ok it seems as this in the MarketingActionForm is not working:

class Media:
            js = (
                settings.ADMIN_MEDIA_PREFIX + "js/SelectBox.js",
                settings.ADMIN_MEDIA_PREFIX + "js/SelectFilter2.js",
                settings.MEDIA_URL + "js/jquery.js",
                settings.MEDIA_URL + "js/ajax_filtered_fields.js",
            )

But when i print out the urls they are correct. hmm.. Another question to me is why i reference here to "js/SelectFilter2.js" and the generated javascript part in the html references to SelectFilter.js ?

edit3:

the correct urls printed out via print form.media

<script type="text/javascript" src="http://localhost:8000/media/admin/js/SelectBox.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://localhost:8000/media/admin/js/SelectFilter2.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://localhost:8000/media/js/jquery.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://localhost:8000/media/js/ajax_filtered_fields.js"&gt;&lt;/script&gt;

and these work all. thats strange. if i add these includes to my base.html the above mentioned errors disappear! Does anybody has an idea why django behaves here this way?

Thus one step ahead. But the next bug is in SelectBox.js:

error: box is null

var SelectBox = {
2 cache: new Object(),
3 init: function(id) {
4 var box = document.getElementById(id);
5 var node;
6 SelectBox.cache[id] = new Array();
7 var cache = SelectBox.cache[id];
8 for (var i = 0; (node = box.options[i]); i++) {
9 cache.push({value: node.value, text: node.text, displayed: 1});
10 }
11 }, 

id = "id_contact_from" In line 4 the script is searching for this element in the html body, does not find it and crashes in line 8, since box is Null. Should this element not be created a utomatically by ajax-filtered-fields? Do i have to provide this element by myself? I did not found anything in the docs about this.

Answer 1

how i can test whether this ajax call is successfull?

Use firebug. its a MUST for any web developer.