I'm currently working on a big web application for a company and we are about 4 months in, but we have a harmless(but annoying) problem that we have just left because we didn't time to change it.
The way we setup our MVC is leaving us with the Servlet being stacked one after the other endless amounts of times on the URL so if we had a Servlet named "ControllerServlet" and I did something on the website I would get a result such as this the first time.
WebsiteXXXXXXX.com/XXX/ControllerServletXXXX
And the next time I were to do something everything will work fine, but the URL will stack the ControllerServlet Path like this..
WebsiteXXXXXXX.com/XXX/ControllerServlet/ControllerServlet/XXXX
WebsiteXXXXXXX.com/XXX/ControllerServlet/ControllerServlet/ControllerServlet/XXXX
and so on....
Although it is working perfectly fine, something is obviously not right.
I imagine this is an easy fix, but could really use somebodies help.
Thanks alot
When a context-relative URL in the form action is used (i.e. an URL without a domain part and without a leading slash /), then it is relative to the last context of the current request URL.
When a page which is requested by http://example.com/webapp/ControllerServlet and contains the following form action:
<form action="ControllerServlet/action">
Then the absolute action URL will be http://example.com/webapp/ControllerServlet/ControllerServlet/action. To fix this, you need to ensure that the form action URL is in a correct manner relative to the request URL. For a page which is requested by http://example.com/webapp/ControllerServlet/action there are several ways, depending on the ways how you can request the same page.
Either
<form action="action">
..which is relative to the last context in the request URL, or
<form action="/webapp/ControllerServlet/action">
..which is relative to the domain root, or
<form action="../ControllerServlet/action">
..which is relative to the context before the last context in the URL (it will effectively remove /ControllerServlet from the current request URL and append it again -a bit pointless indeed, but useful if you have more servlets in the context), or
<form action="${pageContext.request.contextPath}/ControllerServlet/action">
..which is relative to the domain root (useful when you don't want to hardcode the webapp's context path), or
<head>
<base href="${pageContext.request.contextPath}">
...
</head>
<body>
<form action="ControllerServlet/action">
...
</body>
..which would apply to all links and forms.
All of above will point to http://example.com/webapp/ControllerServlet/action.
Related
Hello when I send my html page with google chrome I can't see the path in the link Bar Though I use the method get and when I open the network angle I can't find the query request either enter image description here
On the first view is see that your request goes again a html page. Then you will get as response the html. But i suggest you will send some data. Then you have to add in every form element a name selector. Like <input name="username" ...>.
Then you need a endpoint which can handle your request. A HTML side cant do that. You need a serverside endpoint. Like api.php etc.
I have an javascript setinterval which runs every 2 minutes to get latest feeds. However, this only work on the index page. The script is in a js file which I included in the main layout page of the site. What could be the cause? I know it has to do with the path, because when I check on Net tab in Firebug, the path is wrong. However, the file is included in the main layout, and every page has it(the layout).
Dont know if it will help, but my script is:
$(document).ready(function(){
setInterval(myfx, my_time);
}
myfx(){
ajax({ url: "mypage", ..)};
}
I think the path is relative to the 'folder' that the user is currently in on the site,.. which is what is causing problems. Thanks
The problem is that your URL is relative, which means the target that you're querying changes as you change pages. I.e. if you're at http://website.com/ then mypage is http://website.com/mypage, but if you're at http://website.com/help/details then mypage is at http://website.com/help/mypage, which probably doesn't exist.
The fix is to make your url absolute (start it with '/', e.g. /mypage) so that it always points to the same location.
Lets say I have example.html and inside that i have a code like
<iframe src="x.com" id="x"></iframe>
from x.com, I would like to get everything inside
<div class="content">...</div>
into example.html inside
<div class="xCodes">ONTO HERE</div>
So I tried to get the elements inside x.com to show up on example.html and I heard it's not possible to access them for cross domain problems.
I was wondering if there was another way to retrieve HTML tags from x.html into example.html
Maybe without using <iframe />??
Sourced from: http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/
$('.xCodes').load('http://x.com/x.html');
OR
$.ajax({
url: 'http://x.com/x.html',
type: 'GET',
success: function(res) {
var data = $(res.responseText).find('.content').text();
$('.xCodes').html(data);
}
});
If I understand correctly you want to rip the content from a DIV on one site and display it on another. There are several issues with this, but I'll focus on the technological aspect and assume you are acting in good faith with pulling the content.
The real issue you're running up against here is that you don't have access to DOM elements of pages that haven't loaded yet. As such you need to tell the browser to load the data for that page so that you can access the elements that should have loaded on the page and then pull the information out. JQuery has a nice little method to help with that called .load() (http://api.jquery.com/load/).
As an important side note however you can't do this as all modern broswers forbid cross site access in such a manner:
From the JQuery .load() page:
Additional Notes:
Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.
And check out:
http://en.wikipedia.org/wiki/Same_origin_policy
One more bit of warning. If you don't control the code on the other site you are potentially exposing yourself to serious security issues so only do this in situations where you have control of the other site or for some reason have absolute faith in that site. Alternatively you should try to, if available, use APIs for the sites/services you are trying to get data from.
I have done much research into the issue, I'm not blindly asking but I can't grasp this concept. So my website contains a single index.php file that loads data into divs via ajax so the page never refreshes and the url never changes. I now know I need links to certain content using url rewriting. The site contains posts, so for instance all posts are pulled from the db and 'site.com' is the url. But I want to be able to do 'site.com/post-one' and have that link go to that post. I am thinking first I need to append a variable to the end of the url when the dynamic content for that post is loaded as such: site.com?post=1 so from there I can use url rewrite; the problem I'm having is this. Since the content for post 1 would be loaded into a div, if I went this route, and implemented the url rewrite, would site.com/post-1 now just pull the data dynamically as well or does the page have to be static?
Your problem is that this would necessarily require the use of a hash, rather than a GET variable (because GET requires a page refresh, a hash doesn't). This is done via the usage of the window.location.hash variable in JavaScript, which is updated whenever the URL's content after a # changes (ex: if I were to change http://site.com/#lol to http://site.com/#lmao, window.location.hash would change from #lol to #lmao). Hashes are being used commonly in Ajax-based navigation sites, such as Twitter (I think Google's implementing it as well).
If you're using jQuery, you should try the jQuery BBQ plugin which will allow you to do things such as hash change detection (otherwise, you will have to implement some kind of similar engine yourself, because it will be needed for any kind of hash-based navigation).
You should remember, though, that this doesn't have anything to do with mod_rewrite, thus you shouldn't need to add any kind of rewrite rules. All your work (fetching data, etcetera) would be done through Ajax XML HTTP requests, rather than common HTTP requests.
Using this, you could make your url look like http://site.com/#!/post/1 (this could go whichever format you'd like, such as http://site.com/#!/p/this-is-the-posts-title) instead of http://site.com/?post=1, although you would be missing on http://site.com/post/1.
Your idea of using mod_rewrite seems sound. If you used a rewrite directive which passes part of the URI as a POST variable into your index.php, couldn't you throw some code into the top of your index file which checks for that data and then dynamically generates the ajax to dump into the divs?
Ex:
RewriteRule ^(.*)$ index.php?post=$1 [L]
Index.php:
<?php if (isset($_POST['post'])) { ?>
$.ajax({
**grab post content dump into div**
});
<?php } ?>
Also, don't forget to sanitize your $_POST data before processing it.
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');