How to refresh/revisit the page after clicking submit on a form?
You can set the form's submit button's onClick event handler to reload the page with location.reload()
or location = location
(fallback for older browsers).
<!DOCTYPE html><html><head> <title></title></head><body> <div class="container"> <section class="section1"> <div class="sec1title"> <h1>Get in touch</h1> </div> </section> <section class="section2"> <div class="contactform"> <h5>Drop us a line...</h5> <form action="#"> <label for="firstname"><i class="cntfrmicn fa fa-user"></i> <input class="form-fields" name="firstname" type="text"></label> <label for="email"><i class="cntfrmicn fa fa-envelope"></i> <input class="form-fields" name="email" type="text"></label> <label for="contact"><i class="cntfrmicn fa fa-phone"></i> <input class="form-fields" name="contact" type="text"></label> <label for="textarea"><i class="cntfrmicn fa fa-comment"></i> <textarea class="form-fields" cols="30" id="" name="textarea" rows="10"></textarea></label> <button class="form-fields button" type="submit" value="Send" onClick="refreshPage()">Send <i class="fa fa-paper-plane"></i></button> </form> </div> <script src='https://maps.googleapis.com/maps/api/js?v=3.exp'> </script> <div class="contmap" style='overflow:hidden;height:550px;width:100%;'> <div id='gmap_canvas' style='height:100%;width:100%;'></div> <div> <small><a href="http://embedgooglemaps.com">embed google maps</a></small> </div> <div> <small><a href="http://freedirectorysubmissionsites.com/">free web directories</a></small> </div> <style> #gmap_canvas img{max-width:none!important;background:none!important} </style> </div> <script type='text/javascript'> function refreshPage(){ console.log("Refreshing page"); location.reload ? location.reload() : location = location; } </script> </section> </div></body></html>
Page refresh with post request
You will need to create a hidden form, add it to the document and then submit it by calling the .submit()
on the form's DOM object.
Django - reload template after post request
You don't need to handle if request.method == "GET"
, it is GET
by default if you're not doing a POST
request.
Also it is a good practice to do a redirect
after POST
and not reply with a rendered page containing the results, because the POST
request can be resubmitted(which could lead to data duplication), by:
- reloading result page using Refresh/Reload browser button (explicit page reload, implicit resubmit of request);
- clicking Back and then Forward browser buttons (implicit page reload and implicit resubmit of request);
- returning back to HTML FORM after submission, and clicking Submit button on the form again (explicit resubmit of request)
So you can just redirect to your page after hitting POST
.
Now i don't know how you named your url pattern for profile
view, but presuming your urls.py are:
urlpatterns = [
...,
path('network/profile/<int:user>/', views.profile, name='network_profile')
]
Your views.py would then look like:
from django.shortcuts import redirect, reverse
def profile(request, user):
this_user = request.user
profileuser = get_object_or_404(User, username=user)
posts = Post.objects.filter(user=profileuser).order_by('id').reverse()
followed = Follow.objects.filter(followed=profileuser)
following = Follow.objects.filter(following=profileuser)
all_followed = len(followed)
all_following = len(following)
paginator = Paginator(posts, 10)
if request.GET.get("page") != None:
try:
posts = paginator.page(request.GET.get("page"))
except:
posts = paginator.page(1)
else:
posts = paginator.page(1)
try:
both_follow = Follow.objects.filter(followed=profileuser, following=request.user)
except:
both_follow == False
context = {
"posts": posts,
"profileuser": profileuser,
"all_followed": all_followed,
"all_following": all_following,
"both_follow": both_follow,
"this_user": this_user,
}
if request.method == "POST":
if both_follow:
both_follow.delete()
both_follow == False
else:
f = Follow()
f.followed = profileuser
f.following = request.user
f.save()
both_follow == True
return redirect(reverse('network_profile')) # We redirect to the same view
return render(request, "network/profile.html", context)
After submitting a form with a "POST" method when I refresh it asks to resend the information
This is a normal browser behavior. To avoid such thing, print out a redirect code such as:
<script>
location.href = "youroriginalpage.php";
</script>
You need to make your form submit to a page other than the one with the form, which is also a better approach in my opinion.
Another approach would also be to send an AJAX request instead which will keep the user on the same page.
How prevent reload after post request?
I got to the bottom of this. It turns out that the problem was due to VS Live Server which was detecting a change in the folder and hot-loading the app. The change was due to the backend, in the same folder, saving a log. Really silly thing to miss...
How to prevent page from refreshing after JavaScript fetch post request?
You should call the preventDefault method from the form submit attribute, not your button.
Check this answer for more info
Related Topics
Javascript on Click Event for Multiple Buttons With Same Class
Ag-Grid Cellrender With Button Click
How to Disable Dates Before Today in Jquery Datepicker
How to Find Previous or Next Element from Array in JavaScript
How to Pass the Checked and Unchecked Value of Checkboxes in Component.Ts File in Angular
Easiest Way to Open a Download Window Without Navigating Away from the Page
Hiding the Address Bar of a Browser (Popup)
How to Find Middle Element of Array in JavaScript
Websocket Connection Failed: Error During Websocket Handshake: Unexpected Response Code: 400
Regex to Get String Between Curly Braces
Convert JavaScript Date Format to Yyyy-Mm-Ddthh:Mm:Ss
How to Download a Base64-Encoded Image
Display Current Date in Dd/Mm/Yyyy Format
Safari Browser Audio.Play() Is Not Working
How to Apply Count Up Function to Multiple Values on the Page
Group By, and Sum, and Generate an Object for Each Array in JavaScript