I have a web page where the user enters some data and then clicks a submit button. I process the data and then use the same Django template to display the original data, the submit button, and the results. When I am using the Django template to display results, I would like the page to be automatically scrolled down to the part of the page where the results begin. This allows the user to scroll back up the page if she wants to change her original data and click submit again. Hopefully, there's some simple way of doing this that I can't see at the moment.
It should already work if you provide a fragment identifier in the action method of the form:
<form method="post" action="/your/url#results">
<!-- ... -->
</form>
and somewhere below the form, where you want to show the results:
<div id="results">
<!-- your results here -->
</div>
This should make the page jump to the <div> with ID results.
It is complete client site and does not involve Django, JavaScript or similar.
You need to wrap your data into something like this:
<div id="some-id">YOUR DATA TO BE DISPLAYED</div>
and if you make redirect in your view you need to redirect to url: /some-url/#some-id
if you don't make redirect you need to scroll to the bottom using javascript (but note that redirect is preffered way to use in view after saving data).
Related
I have a django register form .On the event of an invalid form submission, page is reloading.I need to stay on that same page if the data entered is invalid.
Is there any way to get this done without ajax ?
If not, how to do this with ajax
Well if you want to validate the data before submitting then you can just use plain javascript to validate the values and update your html displaying output as shown below.
Consider this below form.
<form>
<input id="target" type="text" value="">
</form>
<div id="other">
Trigger the handler
</div>
Use below script
<script>
$("#target").keyup(function () {
console.log(this.value);
});
</script>
In above script once you get the value you can write the logic to valid the same and update you result in html accordingly.
NOTE: Main point here is the event handler as you type anything it calls the function.
Obviously this may not be the best way to achieve this but consider this as demonstration.
I'm asking a question and the answer could help me a lot. When I'm filling my Django form, I press a validate button in order to store data form. Then, I am redirected on a new page (form resume page, home page, ...).
But in my browser, if I click on Back Button, my form is already filled with previous data and I can modify data.
My question is : How I can prevent browser from refilling form data when navigating back with Django ?
I found this Stackoverflow question : there
But the answer doesn't seem to work. It's an old answer and I'm supposing it exists an other way to do that ?
EDIT :
I used <form action="" method="post" autocomplete="off"> .. </form> and it seems working with Firefox.
This is front-end approaching but this would be easy to use if you can use JS and jQuery.
add this code below your HTML Template:
<script>
$(window).load(function() {
$('form').get(0).reset(); //clear form data on page load
});
</script>
REF: https://stackoverflow.com/a/27544317/4741406
You can disable the back button in your success page after filling the form.
or reset the form : document.getElementById('form').reset();
this may help
I'm using the Django Framework on Google App Engine.
I have multiple forms on the same view, to submit to different URL.
Trouble is after I get a form submitted: even if the called method update the datastore and some data, the previous page (where the forms are put in) is not refreshed, showing the updated data.
I could solve this problem using jQuery or some javascrip framework, appending dinamically content returned by the server but, how to avoid it?
Suggestions?
Am I wrong somewhere?
A part of "secure.html" template
<form action="/addMatch" method="post">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Submit" />
</form>
Matches:
<br />
{% for m in matches%}
{{m.description}} ---> {{m.reward}}
{% endfor%}
the "/addMatch" URL view:
def addMatch(request):
form = MatchForm(request.POST)
if form.is_valid():
user = User.all().filter('facebookId =', int(request.session["pbusr"]))
m = Match(user=user.get(),description =form.cleaned_data["description"],reward=form.cleaned_data["reward"])
m.save()
return HttpResponseRedirect("/secure/")
else:
logging.info("Not valid")
return HttpResponseRedirect("/secure")
The view method whose seems not working:
#auth_check_is_admin
def secure(request):
model={}
user = User.all().filter('facebookId =', int(request.session["pbusr"]))
u = user.get()
if (u.facebookFanPageId is not None and not u.facebookFanPageId == ""):
model["fanPageName"] = u.facebookFanPageName
model["form"] = MatchForm()
model["matches"] = u.matches
else:
....
return render(request,"secure.html",model)
Francesco
Based on what you posted, it seems like you're redirecting properly and are having database consistency issues. One way to test this would be to look at the network tab in the Google Chrome developer tools:
Click on the menu icon in the upper right
Click on "Tools"
Click on "Developer Tools"
Click on "Network" in the thing that opened up at the bottom of the screen.
Now, there will be a new entry in the network tab for every request that your browser sends and every response it receives. If you click on a request, you can see the data that was sent and received. If you need to see requests across different pages, you might want to check the "Preserve log" box.
With the network tab open, go to your page and submit the form. By looking at the network tab, you should be able to tell whether or not your browser issued a new GET request to the same URL. If there is a new request for the same page but that request has the old content, then you have a datastore consistency issue. If there was NOT a new request that yielded a response with the data for the page, then you have a redirect issue.
If it turns out that you have a datastore consistency issue, then what's happening is the data is being stored, but the next request for that data might still get the old data. To make sure that doesn't happen, you need what's called "strong consistency."
In a normal App Engine project, you get strong consistency by putting entities in the same entity-group and using ancestor queries. I'm not certain of what database/datastore you're using for Django and how the different database layers interact with App Engine's consistency, so this could be wrong, but if you can give your users the right key and then fetch them from that key directly (rather than getting all users and filtering them by key), you might get strong consistency.
I have the following HTML page which works perfectly fine as a HTML page; however when I try put it into APEX by entering the code into a Region it just goes all wrong.
When the submit button is pressed, it takes the user to a new page with the IFRAME on rather than just refreshing the page as it does in a HTML page. The other issue is the aesthetics, it looks perfect in Firefox but in IE the IFRAME is half way down the page. When investigating in Firebug I see no attributes which would cause this.
Is there a method of embedding a HTML page into an APEX form page?
<!DOCTYPE html>
<html>
<body>
<head>
</head>
<form action="http://ukserver/orderlist.asp" target="orderResults">
Enter Order Number: <input id="ord" type="text" name="ord" maxlength="50" size="20"/>
<input type="submit" value="Submit"/>
</form>
<iframe id="orderResults" name="orderResults" src="blank.html" width="100%" height="50%">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
This is the page in FireFox which as you can see looks ok.
This is the page in IE which is incorrect
Update:
The HTML page seems to work perfectly in the HTML header of the APEX page but its above my tabs and region which isnt the place where i want it. I tried to find an order (1112) and it returned the following 'File not found' which is correct.
Hi Tony, I created another IFRAME and i guess I'm half way there. I now just have to get the HTML form working, please see below:
It sounds like you have a PDF file in a folder on a server somewhere for each order. If the names of the files are predictable given the order number then you should be able to generate a link something like this:
1) Create an item to accept the order number e.g. P12_ORDER_NUMBER.
2) Create a button to submit the page
3) Create a report that displays when P12_ORDER_NUMBER is not null and selects:
select '//server/path/fileprefix' || :P12_ORDER_NUMBER || '.pdf' as url
from dual;
4) Convert the report column into a link via the column attributes so that clicking on it launches the file.
I have a facebook timeline page tab app that's running inside an IFRAME on a fan page.
On the main page of the app, we show 10 jobs and users can click through to the detail page of one single book.
We want to add a LIKE button on those detail pages, so that users on facebook can like and share that job in their stream.
The app is totally dynamic so different customers can install the app on their fan page and list their own jobs. (ex. coca-cola installs it on his coca-cola page and lists jobs within the company. then microsoft installs it as well and does the same)
The problem concerns og:metatags and redirection of the liked detail page link, right inside the right facebook company page and relative right detail page showing the job.
I can get these two things done and working but not at the same time:
A. Facebook gets correctly the og:metatags in the head section, with image, title, description when I use the following implementation of the like button (without "data-href" extra attribute)
<div class="fb-like"
data-send="false"
data-layout="button_count"
data-show-faces="false"
data-action="like"
data-font="arial">
</div>
The problem is that not specifying the data-href attribute (and the og:url meta is totally ignored) this is gonna create a link to the current page => intended current page inside an iframe => so the result will be that when you click the shared job on facebook you will be redirected NOT inside the facebook app -right page -right detail page, but to the detail page on the server that hostes the app.
B. If I instead specify the data-href attribute
<div class="fb-like"
data-href=<%= "http://www.facebook.com/pages/:page/#{session[:fb_page_id]}?v=app_XXXXXXX&app_data=#{#job_details.job_id}" %>
data-send="false"
data-layout="button_count"
data-show-faces="false"
data-action="like"
data-font="arial">
</div>
Doing this I can get the right link posted on facebook (so then using &app_data attribute) I can get the perfect redirection working.
BUT on the downside, the og:metatags are totally ignored and instead facebook picks the page tab metatags (top iframe that hostes the pagetab app) and so I get posted on facebook a crap link that tells about a page on facebook with the page app picture. And the even bigger downside is that when you like a job on the app, all the jobs appear to be liked as well (basically the iFrame app becomes the liked page... instead of being the job detail page picked as liked page)
Is out there any genius that knows how to sort this out? I need to get the A an B working at the same time to get the requested result!!!!
Please help!!! :(
I've found the solution myself.
Like button => use href and ref attributes, especially put on the ref the id of your facebook fan page. Passing the current page url will also load and share correctly the og:metatags.
<div class="fb-like"
data-send="false"
data-show-faces="false"
data-layout="button_count"
data-font="arial"
data-action="recommend"
href=<%= "https://app.com/jobs/job_details.job_id" %>
ref=<%= FB_PAGE_ID %>>
</div>
Once you pass the ref attribute to facebook, on your wall the link will be posted by facebook with an extra query string appended with in particular the "fb_ref" parameter:
for example a button with parameters:
href=<%= "https://app.com/jobs/job_details.job_id" %>
and
ref=<%= 332325142248470 %>
becomes:
https://app.com/jobs/a0Ed000000a54bkEAA?fb_ref=332325142248470&fb_source=profile_multiline
when the user clicks the link we want to be redirected back right inside the correct page tab app and right job details page. To achieve this we set up into the controller/show action (that in ruby corrisponds to controller_name/id) a new redirection, remembering that ref will put inside a query string after our href link:
if params[:fb_ref]
redirect_to "http://www.facebook.com/pages/:page/#{params[:fb_ref]}?v=app_xxxxx&app_data=#{params[:id]}"
end
As you can see we create a new dynamic url that will use the "app_data" parameter of the facebook "signed_riquest" (http://developers.facebook.com/docs/authentication/signed_request/) in order to pass to our application the right detail page to be visualized and also redirect us to the right facebook page.
once done this we have just to manage correctly the new app_data parameter that comes now with the signed_request. In my case in one of my main controller I've used:
if fb_signed_request[:app_data]
redirect_to "/jobs/#{session[:app_data]}"
end
And we will see our app loading the right page and the right job detail page!
Hope is gonna help other people!