CODEWITHSUNDEEP
pythonhtmlcssdjangodjango-views
John DOe
John DOe

Reputation: 69

Making Django Function Work On HTML On Button Click

I'm trying to call a view so that it displays within a div on the page I already have existing rather than linking to a new page to post a comment. So far I've been able to bring up the div which shows after a button click and hides when pressed again. Ideally, when it shows the form for a comment should show yet at the moment it is only the submit button. I'm wondering how I could get this form to show up in this div as it does on the other HTML page. If there is any more required info let me know, just didn't want to give too much to look at.

Views.py:

class AddCommentView(CreateView):
model = Comment
form_class = CommentForm
template_name = 'storysharing/comment.html'

def form_valid(self, form):
    form.instance.story_id = self.kwargs['pk']
    return super().form_valid(form)

def get_success_url(self):
    return reverse('storysharing:story_details', kwargs={'story_id':self.kwargs['pk']})

urls.py:

app_name = 'storysharing'
urlpatterns = [
path('', views.index, name = 'index'),
path('<int:story_id>/', views.story_details, name = 'story_details'),
path('add_story/', views.add_story, name = 'add_story'),
path('thanks/', views.story_added, name = 'story_added'),
path('final_post/<int:pk>', UpdateStoryView.as_view(), name = 'final_post'),
path('review/', views.review, name = 'review'),
path('get_location/', views.get_location, name = 'get_location'),
path('<int:pk>/comment', AddCommentView.as_view(), name = 'comment'),
]

page.html, the tag is where the link usually links to the other page and successfully adds a comment after entering info required. Below that is the 'show div' button and the div that I'm trying to make contain the same form as shown in the tag:

<a href="{% url 'storysharing:comment' story.id %}">Add Comment<a/>

                    <button type="button" name="answer" onclick="showDiv('toggle')">Add 
Comment</button>

<div id="toggle" style="display:none" class="comments">
<form action={% url 'storysharing:comment' story.id %} method ="POST">
{%csrf_token%}
{{form.as_p}}
<button>Submit</button>
</div>

Picture of html page which works:

enter image description here

Picture of what is showing on-page:

enter image description here

As a side not, is there a way to remove the line around the div too? Any further info is available on request, thanks in advance!

Upvotes: 0

Views: 604

Answers (1)

Daniel
Daniel

Reputation: 3527

You can leverage ajax to send requests between the client and server without reloading the webpage. Take a look at this general example below:

template.html

<!-- we will use js to send a post request when this button is clicked -->
<button id="my-button">Submit</button>

script.js


// using jquery, we will set the function that executes when the button is clicked
$('#my-button').click(function() {

  // launch an ajax request:
  $.ajax({
    type : 'POST',
    url : '<the-url>',
    data : {
      someKey : 'someValue'
    },
    success : function(response) {
      
      // this function executes when we receive a succesful response from the backend

      // unpack the response:
      result = response.result;

      // update html page:
      ...
 
   }
  }
});

views.py

def my_view_function(request):

    """ this function executes when the ajax request is sent """

    # unpack the request
    some_value = request.POST.get('someKey')

    # do some logic:
    ...
  
    # pack the response:
    response = {
        "result" : "some result"
    }

    return JsonResponse(response)

Using this pattern you can create dynamic pages that update themselves without the user having to refresh.

Upvotes: 0

Related Questions