.. index:: pair: Tests ; easyautocomplete .. _easyautocomplete_tests: ============================= jQuery EasyAutocomplete test ============================= .. contents:: :depth: 3 Running the local Django web server ==================================== :: System check identified no issues (0 silenced). October 24, 2016 - 10:41:29 Django version 1.10.2, using settings 'projet_ajax.settings' Starting development server at http://127.0.0.1:8004/ Quit the server with CTRL-BREAK. Testing the JSON API view ========================= :: http://127.0.0.1:8004/projects/api_get_champions/?term=a :: [{"id": 6, "value": "aaaa", "label": "aaaa"}, {"id": 1, "value": "admin", "label": "admin"}, {"id": 8, "value": "albert", "label": "albert"}, {"id": 2, "value": "champion_0001", "label": "champion_0001"}, {"id": 7, "value": "john", "label": "john"}, {"id": 10, "value": "nigel", "label": "nigel"}, {"id": 9, "value": "zoya", "label": "zoya"}] Testing the form, step1 ======================== :: http://127.0.0.1:8004/projects/project/1/updateeasy .. figure:: test_phase_1.png :align: center projects/urls.py ----------------- :: url(r'^project/(?P\d+)/updateeasy/$', ProjectUpdateViewEasyAutoComplete.as_view(), name='project_update_easy'), The forms.py part ------------------ .. code-block:: python #!/usr/bin/python # -*- coding: utf8 -*- """The project's forms. """ from django import forms from .models import Project class ProjectChampionForm(forms.ModelForm): """The champion project form""" champions_choice_list = forms.CharField(max_length=100, help_text='type username or email') class Meta: model = Project fields = ('title', 'champions_choice_list', 'champion',) def __init__(self, *args, **kwargs): super(ProjectChampionForm, self).__init__(*args, **kwargs) self.fields['champions_choice_list'].label = "Update the champion" self.fields['champion'].widget = forms.HiddenInput() The HTML and JavaScript part ----------------------------- ::

Test jquery EasyAutocomplete

Update of the project '(title:{{ project.title }} champion:{{ project.champion }})

{# https://docs.djangoproject.com/en/dev/topics/forms/ #}

{% csrf_token %}

{{ form.id }} {{ form.non_field_errors }} {# Include the hidden fields #} {% for hidden in form.hidden_fields %} {# here we will have the champion filed (which is hidden) #} {{ hidden }} {% endfor %}

Title:	{{ form.title }}
Champion:	{{ form.champions_choice_list }}

.. _learn_placeholder: Step2 : initialize the easyAutocomplete placeholder with the value of champion ============================================================================== .. figure:: test_phase_2.png :align: center Add these jQuery lines:: {# build the autocomplete list for the champions_choice_list #} $("#id_champions_choice_list").easyAutocomplete(options_easy_autocomplete_champions); {# Get the value of the former champion (from database) #} {# Thanks http://stackoverflow.com/questions/1643227/get-selected-text-from-a-drop-down-list-select-box-using-jquery #} var champion_name = $("#id_champion option:selected").text(); {# replace the placeholder by the value coming from database #} $("#id_champions_choice_list").attr('placeholder', champion_name); Step3 : hide the select champion form field ============================================ Before the update ------------------- in the HTML file:: Champion value: in the projects/forms.py file:: def __init__(self, *args, **kwargs): super(ProjectChampionForm, self).__init__(*args, **kwargs) self.fields['champions_choice_list'].label = "Update the champion" # self.fields['champion'].widget = forms.HiddenInput() After the update ---------------- in the projects/forms.py file:: def __init__(self, *args, **kwargs): super(ProjectChampionForm, self).__init__(*args, **kwargs) self.fields['champions_choice_list'].label = "Update the champion" self.fields['champion'].widget = forms.HiddenInput() New jQuery lines:: {# build the autocomplete list for the champions_choice_list #} $("#id_champions_choice_list").easyAutocomplete(options_easy_autocomplete_champions); var champion_name = "{{ project.champion.username }}" $("#id_champions_choice_list").attr('placeholder', champion_name); .. figure:: test_phase_3.png :align: center