html scroll down to div over django view - html

I'm kinda new to django and html and I wanted to know if its possible to scroll down a page to a div id by using a django view. (without using javascript)
In my html code I have something like:
<form type="POST" action="/submit_comment/">
...
</form>
Then in my urls I have:
url(r'^submit_message/$',page_views.Vep_submit_message),
And normally when a comment is submited, I process the form, and check for errors etc, then I render the previous page with the new information.
The problem is that it is a long page and I'd like to display the page scrolled to the comments div.
the comments div has an id, so normally by using /submit_message/#comments or /submit_message#comments/the window should get scrolled.
But it seems that django has some problems handling this:
You called this URL via POST, but the URL doesn't end in a slash and you have APPEND_SLASH set. Django can't redirect to the slash URL while maintaining POST data.
Is it possible to do something without javascript? Thanks!

I found a simple solution by adding the following meta
<meta http-equiv="refresh" content="0; url=#comments">

Related

How can I differentiate between two url requests from different HTML pages but with the same namespace in views.py?

I am creating a simple eBay like e-commerce website to get introduced with django. For removing an item from the watchlist, I placed two same links in two different HTML files, that is, I can either remove the item from the watchlist.html page or either from the item's page which was saved as listing.html. The url for both the pages look like this:
Remove from watchlist
Now, in my views.py, I want to render different pages on the basis of the request. For example, if someone clicked Remove from watchlist from listing.html then the link should redirect again to listing.html and same goes for the watchlist.html.
I tried using request.resolver_match.view_name but this gave me 'removeFromWatchlist' as the url namespace for both of these request is same.
Is there any way I can render two different HTML pages based on the origin of the url request?
Also, this is my second question here so apologies for incorrect or bad formatting.
You could check the HTTP_REFERER in the request.META attribute of the view to get the url that referred the request as so:
from django.shortcuts import redirect
def myview(request):
...
return redirect(request.META.get("HTTP_REFERER"))#Or however you prefer redirecting
https://docs.djangoproject.com/en/3.1/ref/request-response/#django.http.HttpRequest.META

How would I make a meta redirect that redirects to the URL stored in the parameter?

I am attempting to setup a service which will redirect the user to a URL stored in the ?url= parameter, how would I do this?
I have tried using meta
http-equiv="refresh"
with
out.print(request.getParameter("ur;")) %>
however all that happens is the page reloads in a loop. Not too sure if I need to use quotation marks (e.g /?url="https://google.com")
<meta http-equiv="refresh"
content="0; URL="<%
out.print(request.getParameter("redirect")) %>">
What I need to happen is when the user gets redirected to "https://example.com/exampledir/index.html?url=https://anotherwebsite.com" (just an example url) the script on index.html will get the parameter and redirect to it exactly. What actually happens is the page just reloads in a loop.
Since you're not using any server-side language, you won't be able to generate a different meta tag during rendering. Instead, you'll need to do this with JavaScript after the page loads.
Add a script tag to the bottom of the page like this:
<script>
var redirect = new URL(window.location).searchParams.get('redirect');
if (redirect) window.location = redirect;
</script>
Now if you browse to the page like this: http://<myserver>/myfile.html?redirect=https://google.com you'll be redirected to https://google.com.
For reference, see MDN articles on:
Window.location
URL.searchParams
I also highly recommend you read through Java​Script basics just to make sure you understand the overall concepts presented here.

How to target anchors in a div in the same page

I'm struggling with some anchors / other html pages ( buttons on left) to be displayed in another div in the same page ( to be more exactly in the right ). Are there any solutions to this with div? Or maybe with frame/iframe, even jQuery any tips please?
Are there any solutions to this with div?
Fetch the content with JavaScript (e.g. XMLHttpRequest).
Strip out the bits you don't need (e.g. everything except the contents of the <body>
Use DOM manipulation to add it to the div
Or maybe with frame/iframe
That is exactly what iframes were designed for. Set the target attribute of the anchor to the name of the iframe
Loading content into a portion of a page comes with a lot of gotchas. At the very least it interferes with the ability of visitors to link to the content they are actually viewing (although you can use the History API and pushState to compensate for that). It is almost always a better idea to just link to a new page which includes (via a template) any content that is common to all the pages.
If the page links to a HTML page you can append an iframe using jQuery as follows:
$(document).ready(function(){
$('.button').click(function(){
// Prevent Default Action
event.preventDefault();
// get the href parameter
var url = $(this).attr('href');
// Append the iframe
$('#content').append('<iframe src="'+ url +'"></iframe>');
});
});
Here is a working Example
If you are able to return a JSON or XML response you can use $.ajax to get the response and then append it inside a div instead of an iframe.

CodeIgniter + jQuery(ajax) + HTML5 pushstate: How can I make a clean navigation with real URLs?

I'm currently trying to build a new website, nothing special, nice and small, but I'm stuck at the very beginning.
My problems are clean URLs and page navigation. I want to do it "the right way".
What I would like to have:
I use CodeIgniter to get clean URLs like
"www.example.com/hello/world"
jQuery helps me using ajax, so I can
.load() additional content
Now I want to use HTML5 features like pushstate to
get rid of the # in the URL
It should be possible to go back and forth without a page refresh but the page will still display the right content according to the current URL.
It should also be possible to reload a page without getting a 404 error. The site should exist thanks to CodeIgniter. (there is a controller and a view)
For example:
A very basic website. Two links, called "foo" and "bar" and a emtpy div box beneath them.
The basic URL is example.com
When you click on "foo" the URL changes to "example.com/foo" without reloading and the div box gets new content with jQuery .load(). The same goes for the other link, just of course different content and URL.
After clicking "foo" and then "bar" the back button will bring me back to "example.com/foo" with the according content. If I load this link directly or refresh the page, it will look the same. No 404 error or something.
Just think about this page and tell me how you would do this.
I would really love to have this kind of navigation and so I tried several things.
So far...
I know how to use CodeIgniter to get the URLs like this. I know how to use jQuery to load additional content and while I don't fully understand the html5 pushstate stuff, I at least got it to work somehow.
But I can't get it to work all together.
My code right now is a mess, that's the reason I don't really want to post it here. I looked at different tutorials and copy pasted some code together. Would be better to upload my CI folder I guess.
Some of the tutorials I looked at:
Dive into HTML5
HTML5 demos
Mozilla manipulating the browser history
Saner HTML5 history
Github: History.js
(max. number of links reached :/)
I think my main problem is, that everybody tries to make it compatible with all browsers and different versions, adds scripts/jQuery plugins and whatnot and I get confused by all the additional code. There is more code between my script-tags then actual html content.
Could somebody post the most basic method how to use HTML5 for my example page?
My failed attemp:
On my test page, when I go back, the URL changes, but the div box will still show the same content, not the old one. I also don't know how to change the URL in the script according to the href attribute from the link. Is there something like $(this).attr('href'), that changes according to which link I click? Right now I would have to use a script for every link, which of course is bad.
When I refresh the site, CodeIgniter kicks in and loads the view, but really only the view by itself, the one I loaded with ajax, not the whole page. But I guess that should be easy to fix with a layout and the right controller settings. Haven't paid much attention to this yet.
Thanks in advance for any help.
If you have suggestions, ideas, or simple just want to mention something, please let me know.
regards
DiLer
I've put up a successful minimal example of HTML5 history here: http://cairo140.github.com/html5-history-example/one.html
The easiest way to get into HTML5 pushstate in my opinion is to ignore the framework for a while and use the most simplistic state transition possible: a wholesale replacement of the <body> and <title> elements. Outside of those elements, the rest of the markup is probably just boilerplate, although if it varies (e.g., if you change the class on HTML in the backend), you can adapt that.
What a dynamic backend like CI does is essentially fake the existence of data at particular locations (identified by the URL) by generating it dynamically on the fly. We can abstract away from the effect of the framework by literally creating the resources and putting them in locations through which your web server (Apache, probably) will simply identify them and feed them on through. We'll have a very simple file system structure relative to the domain root:
/one.html
/two.html
/assets/application.js
Those are the only three files we're working with.
Here's the code for the two HTML files. If you're at the level when you're dealing with HTML5 features, you should be able to understand the markup, but if I didn't make something clear, just leave a comment, and I'll walk you through it:
one.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script src="assets/application.js"></script>
<title>One</title>
</head>
<body>
<div class="container">
<h1>One</h1>
Two
</div>
</body>
</html>
two.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script src="assets/application.js"></script>
<title>Two</title>
</head>
<body>
<div class="container">
<h1>Two</h1>
One
</div>
</body>
</html>
You'll notice that if you load one.html through your browser, you can click on the link to two.html, which will load and display a new page. And from two.html, you can do the same back to one.html. Cool.
Now, for the history part:
assets/application.js
$(function(){
var replacePage = function(url) {
$.ajax({
url: url,
type: 'get',
dataType: 'html',
success: function(data){
var dom = $(data);
var title = dom.filter('title').text();
var html = dom.filter('.container').html();
$('title').text(title);
$('.container').html(html);
}
});
}
$('a').live('click', function(e){
history.pushState(null, null, this.href);
replacePage(this.href);
e.preventDefault();
});
$(window).bind('popstate', function(){
replacePage(location.pathname);
});
});
How it works
I define replacePage within the jQuery ready callback to do some straightforward loading of the URL in the argument and to replace the contents of the title and .container elements with those retrieved remotely.
The live call means that any link clicked on the page will trigger the callback, and the callback pushes the state to the href in the link and calls replacePage. It also uses e.preventDefault to prevent the link from being processed the normal way.
Finally, there's a popstate event that fires when a user uses browser-based page navigation (back, forward). We bind a simple callback to that event. Of note is that I couldn't get the version on the Dive Into HTML page to work for some reason in FF for Mac. No clue why.
How to extend it
This extremely basic example can more or less be transplanted onto any site because it does a very uncreative transition: HTML replacement. I suggest you can use this as a foundation and transition into more creative transitions. One example of what you could do would be to emulate what Github does with the directory navigation in its repositories. It's an intermediate manoever that requires floats and overflow management. You could start with a simpler transition like appending the .container in the loaded page to the DOM and then animating the old container to {height: 0}.
Addressing your specific "For example"
You're on the right track for using HTML5 history, but you need to clarify your idea of exactly what /foo and /bar will contain. Basically, you're going to have three pages: /, /foo, and /bar. / will have an empty container div. /foo will be identical to / except in that container div has some foo content in it. /bar will be identical to /foo except in that the container div has some bar content in it. Now, the question comes to how you would extract the contents of the container through Javascript. Assuming that your /foo body tag looked something like this:
<body>
foo
bar
<div class="container">foo</div>
</body>
Then you would extract it from the response data through var html = $(data).filter('.container').html() and then put it back into the parent page through $('.container').html(html). You use filter instead of the much more reasonable find because from some wacky reason, jQuery's DOM parser produces a jQuery object containing every child of the head and every child of the body elements instead of just a jQuery object wrapping the html element. I don't know why.
The rest is just adapting this back into the "vanilla" version above. If you are stuck at any particular stage, let me know, and I can guide you better though it.
Code
https://github.com/cairo140/html5-history-example
Try this in your controller:
if (!$this->input->is_ajax_request())
$this->load->view('header');
$this->load->view('your_view', $data);
if (!$this->input->is_ajax_request())
$this->load->view('footer');

problem to get the Referer page

I'm trying to get the referer page, but i have a problem , sometimes i get bad the referer page,
for example:
i have 3 pages, when the page 1 link to page 2 , and the page 2 make a process and after redirect to page 3, so when i try to get the referer page in the page 3, i get the page 1 and not the page 2,
I think that the problem is the page 2 this page doesn´t show anything to the user, is only a page who make a procedure.
Do you have any idea how i can to get the referer page correctly??
Thanks.
I'm using TCL with openacs
It's difficult to answer without knowing exactly what you're trying to do. If page 2 is only calling a procedure, what about putting the contents of page 2 into an ad_proc, and then calling that proc in page 3? Or can page 2 redirect to other places when it is finished?
If you give more info, I'm sure I can help. The normal way I would pass referer info in OpenACS is to use a variable called return_url, which I pass from one page to the next as a hidden form element. There are lots of examples of that in OpenACS. Alternatively you could use ad_set_client_property to store it on page 1 and then on page 3 use ad_get_client_property to read it.
Thanks to everyone,
I already solve my problem using the < meta HTTP-EQUIV="REFRESH" content="0; url=page3" >, but in openacs there is a function that do it.
I relplace the
ad_returnredirect
by
util_ReturnMetaRefresh
so in this way i already can read the correct referer page
how are you sending the user from page 2 to page 3? with php:
enter code hereheader("location:")
or html redirect?
if you are using header("location:") it will probably not work. try using html redirect like
<meta HTTP-EQUIV="REFRESH" content="0; url=page3">