Atualize o DOM sem recarregar a página no Django

Eu tenho duas listas de seleção no DOM, primeiro é preenchida durante o carregamento de URL quando um método em modos de exibição carrega a página. O conteúdo da segunda lista de opções depende do que o usuário seleciona na primeira lista de opções. Como faço para ligar o método python ao evento quando o usuário faz uma seleção na primeira lista de seleção, fazer algumas manipulações em python, retornar uma lista de vallues que gostaria de exibir na segunda lista de opções e depois preenchê-lo sem atualizar a página?

Meu modelo é assim:

{% block content %} {% if list_of_events %}   {% for event in list_of_events %} {{ event.module }} {% endfor %}   {% else %} 

No events available now.

{% endif %}

A próxima condição está aguardando o argumento first_selection, que deve ser retornado ao modelo após o usuário selecionar um valor na primeira lista de opções.

 {% if first_selection %}   {% for room in list_of_rooms %} {{ room.id }} {% endfor %}   {% endif %}  {% endblock %} 

Meu método views.py parece com isto:

 def events(request): try: list_of_events = Event.objects.all() except: raise Http404('Something\'s wrong with events page loader') return render(request, 'web_service/schedule.html', { 'list_of_events': list_of_events }) 

No Django (pelo menos por enquanto) não existe uma maneira direta de chamar dinamicamente o método python diretamente do template (html) sem atualizar a página.

Para chamar o método python e ver seu efeito no template sem atualizar a página, um pouco de JS é necessário. Não é tão simples quanto chamar o método de instância como no OOP, mas não é tão difícil quanto parece.

O exemplo abaixo é uma demonstração de como responder a um click botão e enviar alguns dados para a view django e, em seguida, retornar o resultado para o modelo sem atualizar o DOM .

A única maneira de chamar o código python do template é relacionar-se da mesma forma que nos relacionamos com url , isso significa que temos que criar um novo url pattern . Em seguida, chame a view necessária e retorne a resposta ao modelo como JsonResponse .

Nota : certifique-se de importar jquery na parte inferior interna de sua tag .

Primeiro de tudo precisamos criar responder que irá lidar com o botão de clique e criar pedido AJAX para url conectado para view . AJAX request passa a input como parâmetro para o nosso padrão de url, o que significa que este parâmetro será passado para a view django. Se algo retornar da nossa chamada para view , os dados serão descompactados com success .

Vamos dizer que nosso modelo se parece com isso:

 

foo bar

Script manipulando cliques e solicitações se parece com isso:

  

Novo padrão é necessário em urls.py:

 urlpatterns = [ ... url(r'^ajax/get_response/$', views.answer_me, name='get_response') ... ] 

Nota: o ajax/ parte da url e o caminho do padrão de URL em si não influenciam como essa chamada é tratada. Pode ser o que você quiser, por exemplo: ^foo/bar/$ .

O último passo é adicionar o modo de view resposta do Django. Este exemplo simples retorna a input com algum texto adicional, mas geralmente este é o lugar onde você pode chamar outros methods python e fazer o que quiser:

 def answer_me(request): field = request.GET.get('inputValue') answer = 'You typed: ' + field data = { 'respond': answer } return JsonResponse(data) 

Você pode renderizar toda a segunda lista de opções com um display = none, então você pode adicionar um javascript como:

 function show(select_item) { if (select_item == "apple") { hiddenDiv.style.visibility='visible'; hiddenDiv.style.display='block'; Form.fileURL.focus(); } else{ hiddenDiv.style.visibility='hidden'; hiddenDiv.style.display='none'; } }  

https://codepen.io/metrafull2/pen/WEgWLo tente aqui