I am using ajax to load content for my site.
When I dynamically load a page http//www.example.com/a/b/c
I change my current page's url to http//www.example.com/xyz/#!/a/b/c by setting it through javascript using window.location
Now what I want to do is that when somebody enters a url http//www.example.com/xyz/#!/a/b/c in the browser, he should be directed to http//www.example.com/a/b/c instead of http//www.example.com/xyz/
This is similar to what is used on facebook
http//www.facebook.com/?ref=logo#!/reqs.php#friend
automatically takes me to
http//www.facebook.com/reqs.php#friend
when loaded without ajax.
I tried using javascript to implement this
requestedURL = ""+window.location+"";
position = requestedURL.search("#!");
domainame = "http://localhost"
if(position != -1){
newpage = requestedURL.substr(position+2);
requestedURL = "";
window.location = domainame+newpage;
}
This did work me but now every time when I load a page even through ajax, this script gets executed.
Can someone help me out with this.
A solution through .htaccess would also do for me.
It looks like something I would try to emulate from the routing module of my application (on the server side) instead of via Ajax.
Related
I'm looking for a way to load in a random html file from 3 html files with ajax into a main html page whenever the page is refreshed. Is there a simple way of doing this?
Thanks!
var urls = ['url1', 'url2', 'url3'];
var randomUrl = urls[Math.floor(Math.random() * urls.length )];
$('body').load(randomUrl);
Have in mind that you may run into cross domain request policy issues. This means that you cannot load using ajax pages from others domain unless a special header is sent from the external hosts.
Alternatively you can redirect the page to the new one:
window.location = randomUrl;
I am using Membership Authentication in an MVC3 webapp. I make heavy use of jQuery and loading partial views inside divs and tabs. My problem is when the user has been inactive and is logged out and then he tries to call an Action inside a Controller which loads a partial view inside a div or tab, the entire page with the LogOn view is loaded inside the div, wrecking my layout.
The redirection is done correctly, and is the desired effect, however I would like the LogOn page to load on the window, rather than on a div in the current view. Does anyone knows how to accomplish this?
Is it clear what I want and whats wrong?
Thank you.
The combination of authenticated calls and Ajax is always a problem, because Ajax doesn't properly handle the redirect.
I prefer not to the the Authorize attribute on Ajax-called controller actions, but to check for the user being authenticated inside the method and returning a specific HTTP response (such as HTTP403 Unauthorised). Using an error handler in your client-side script, you can test for this response and redirect to the login page by setting window.location.
Just fixed my problem with a little script. Its not the best solution, and I am not totally comfortable with it, but at least it solves my problem in a very simple way.
In case anyone is interested, here its what I did, I added this snippet of code at the beginning of my Log on page:
<script type="text/javascript">
function funcName() {
var str = window.location.href;
var num = loc.indexOf('#Url.Action("Action", "Controller", new { area = "" })');
if (num < 0) {
window.location = '#Url.Action("Action", "Controller", new { area = "" })';
}
}
relocate();
</script>
This way if the login page loads inside some div and not on the window, it relocates to the actual login page.
After processing a jQuery Ajax Post from an HTML form successfully within a Go program, how do I load a new form? I first tried sending the form as the response and the Javascript displayed it, but it did not clear the old (existing) form. I then tried within the HTML Javascript to set the URL using "window.location = 'localhost:8088/MaintForm/'". That resulted in a warning from the browser but did not load the form and did not change the URL. I would like to ideally know both methods - via the Go program acting as a server, and via Javascript. If I manually change the URL, the form loads OK. What I am trying to do is receive a response in Javascript (jQuery Ajax), and then request the new form if the response is positive. I would prefer to do this without changing the URL. As I said above, this partially worked.
You would have to put your original form inside a tag, for example a div, and use your JQuery code to replace the contents of that tag with the new form. This way you are not changing the URL.
This is more of a javascript/JQuery question than a go-specific one.
In javascript:
location.href = '/MaintForm/';
In golang, you can use the http.Redirect function, like this:
http.Redirect(w, r, "/MaintForm/", http.StatusFound)
Please note: this appears to be solved by : I just need to do an "document.write(data);" in Javascript. "Data" contains the new HTML.
This is probably going to get a resounding no, but I am wondering if it possible to have the URl change dynamically with using hashing, and without invoking a http request from the browser?
My client is keen on using AJAX for main navigation. This is fine, when the end user goes to the front page first, but when they want to use the deep linking, despite it working, it forces an extra load time as the page loads the front page, then invokes the AJAX from the hash.
UPDATE: Could it be possible, given that what I want to avoid is the page reload (the reason is that it looks bad) to stem the reload by catching the hash with PHP before the headers are sent, and redirecting before the page load. This way only one page loads, and the redirect is all but invisible to the user. Not sure how to do this, but seems like it is possible?
Yes, this is possible. I often do this to store state in the hash part of the URL. The result is that the page doesn't reload, but if the user does reload, they're taken to the right page.
Using this method, the URL will look like: "/index#page=home" or "/index#page=about"
You'll need to write a JavaScript function that handles navigation, and you'll need a containing div that gets rewritten with the contents fetched from AJAX.
Home
About
Questions
<div id="content"></div>
<script type="text/javascript">
function link(page) {
location.hash = "page="+page;
loadPage(page);
}
// NOTE: This is using MooTools. Use the AJAX method in whatever
// JavaScript framework you're using.
function loadPage(page) {
new Request.HTML({
url: "/ajax/"+page+".html",
onSuccess: function(tree, elements, html) {
document.id('content').setProperty('html', html);
}
}).get();
}
</script>
Now, you'll also need to have something that checks the hash on page load to load the right content initially. Again, this is using MooTools, but use whatever onLoad method your JavaScript framework provides.
<script type="text/javascript">
document.addEvent('domready', function() {
parts = location.hash.split('=');
loadPage(parts[1]);
}
</script>
Ok, the problem is that opening an AJAX link of the form http://example.com/#xyz results in a full page being downloaded to the browser, and then the AJAX-altered content is changed once the page has loaded and checked the hash part of its URL. The user has a diconcerting experience.
You can hugely improve this by making a page that just contains the static elements - menus, etc. - and a loading GIF in the content area. This page checks its URL upon loading and dynamically fetches the content specified by the hash part. The page can have any URL you want; we'll use http://example.com/a. Links to this page (http://example.com/a#xyz) now provide a good user experience for users with scripting enabled.
However, new users won't come to the site by fetching http://example.com/a; they'll fetch http://example.com. This is fine - serve the full page, including the home page content and links that don't require scripting to work (e.g., http://example.com/xyz). A script run on loading this page should alter the href of AJAXable links to their AJAX form (http://example.com/a#xyz); thus the first link a user clicks on will result in a full page load but subsequent ones won't.
The only remaining problem is is a no-script user gets sent an AJAX link. You can add a noscript block to the AJAX page that contains a message explaining the problem and provides a link back to the homepage; you could include instructions on how to enable scripting or even how to modify the link by removing a# and pressing enter.
It's not a great answer, but you can offer a different link in the page itself; e.g., if the address bar shows /#xyz you include a link to /xyz somewhere in the page. You could also add a link or button that uses script to bookmark the page, which would again use the non-AJAX form of the link.
I'm developing a mozilla Add-on, and i would like to know, how to change a page that is requested by ajax before the response be sent..
Let's say that in stackoverflow i have a button and when i click call this function:
h = new XMLHttpRequest();
h.open("GET", "somepage",true);
h.onreadystatechange=function() {
if (h.readyState==4) {
alert(h.responseText); //I want change this result before the javacript alert the content...
}
}
h.send(null)
I hope you understand my question...
the site which a want to change works all with ajax, and i didn't find another way to change the content without change the response in ajax.
Thanks :)
You need to register an observer for the http-on-examine-response event and then modify the response before it's interpreted by the browser.