I'm developing an Umbraco site that is a "single page" - no reload, only ajax calls.
The site will have nice urls and use html5 push state history.
The problem here is that every time a request is made to the server I need to handle it differently depending on the type of the request: normal or ajax.
For usual requests I need to display the content along with it's master page.
For ajax requests I need to display only the content.
I don't know how to accomplish this - routing and master page magic.
Can anyone help?
You could use alternate templates. For more information see here. Basically, have the alternate template just render out the content in whatever format you want, without the full html template, and then make sure that all your AJAX requests call the pages using the alternate template.
One word of warning though, if you're doing all the site navigation with AJAX and no page reloads, then Google (or most other search engine spiders for that matter) won't be able to index your site properly (as they don't process javascript) and your site won't rank very well.
Related
I am looking for a way to simply disable AJAX on ONLY the home page in my project. I am using MVC so there are links to the home page in many areas. I want AJAX for the entire site however not when loading the home page. The reason is because I am using a script to setup the UI dynamically, it contains objects and those objects load when the page loads as a hard refresh but no when jQuery Mobile transitions to the page. I am looking for a solution where I can add a Script to just the home page to disable AJAX whenever it is referenced. But still have AJAX for the rest of the solution. Its a very unique situation but I haven't found anything that could prevent ONE page from being loaded through AJAX. Does anyone know?
if I could I would like to do something like this only on the home page
<script>
$(document).bind(function(){
[some call to disable this page from being loaded with AJAX]
});
</script>
Thanks in advance.
No such thing exists. Think of AJAX like a little mini-browser: if the URL returns a response, it can access it. However, it might be possible to branch on the existence of a request header in your Home action and return something like a 403 Forbidden if an "AJAXy" request header is detected.
jQuery, for example, sends an X-Requested-With: XMLHttpRequest header along with its request. If this header is present, the request most likely came from an AJAX method in jQuery (or other libraries that potentially use the same methodology). You can also pass your own custom headers with the AJAX request, if you want. However, all of this is implementation-specific, so it pretty much depends on all developers on your team doing things a certain way. For example, if someone used a standard JavaScript XHR object to make the request, then the X-Requested-With header would be absent. Or, if you used a custom header, every developer would need to pass that header every time, or again, the logic would break down.
If your business rules say that the home page shouldn't be requested via AJAX, the best way to handle that is at a business level, i.e. policy. Anything you try to in the actual code could easily be worked around.
I am developing a mobile web application using ASP.NET mvc 4. I am facing problem with response.redirect to some other website (eg: http://www.google.com) from my controller,it is showing "Error Loading Page" message without redirect.
I have tried the following codes to redirect under "About" action on Home controller:
return Redirect("http://www.google.com");
return RedirectResult("http://www.google.com");
response.Redirect("http://www.google.com");
All the above produced the same error.
Note: the hyperlinks in view pages are working fine
Thanks
When you are setting up your link to the controller...you need to make sure the data-ajax attribute is set to false.
Redirect
My understanding is that jQuery mobile wraps all anchor request in ajax, unless otherwise specified, and your response.redirect is just being served to the jQuery .done function which can't handle it properly.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-navmodel.html
Important: rel="external" and $.mobile.ajaxEnabled=false
Slightly different implementations of the replaceState API in various
browsers can cause odd behavior in specific scenarios. For example,
some browser implementations (including desktop browsers) implement
the popstate event differently when linking externally and moving back
to a page onto which state has already been pushed/replaced. When
building a jQuery Mobile application where the Ajax navigation is
being explicitly disabled, either through the frequent use of
rel="external" on links or by disabling Ajax navigation completely via
the $.mobile.ajaxEnabled=false, we recommend disabling the pushState
feature to fall back to the hash based navigation for more consistent
behavior.
I suspect your problem is that you are redirecting outside local site.
See this part of the documentation: http://jquerymobile.com/test/docs/pages/page-navmodel.html
Hash values created by jQuery Mobile are normalized as full paths
relative to the URL of the first "real" page that was loaded.
Then later it confirms the "local" requirement here:
When a link is clicked, jQuery Mobile will make sure that the link is
referencing a local URL
I think the solution is to not redirect users to other domains.
UPDATE
The above solution highlights the wrong part of the problem but the solution may still be the same. You should use javascript to do the redirection such as:
window.location = 'http://www.google.com/';
I believe you will run into issues if your JQM solution is attempting to make an ajax call that is then redirecting. One issue, specifically for google.com, could be if you are signed in to google. It will then redirect you to https for example. That could be interfering with the JQM / window.location.hash.
Could anyone please tell how the site http://www.outsharked.com/imagemapster/default.aspx?what.html is working in such way? Modifying the url without loading/reloading the page. I think this is not done by html5. Because it works in IE6 which doesn't support html5.
I created that site. The commenter is correct, it uses Javascript to change the URL. There's nothing about how that navigation works that is different for IE6 - that browser supports the necessary client-side functionality to do this kind of thing. The basic functionality involves:
capturing click events on the nav, and loading the inner content via AJAX
update the URL to reflect a working direct URL to target.
The links also are valid anchor links that, in the absence of Javascript, would go to the same page (but load the whole thing). This is your basic AJAX web site setup with one minor difference. It's common practice to use a URLs like this in AJAX/single page web sites:
http://mysite.com/home#somepage
or even just
http://mysite.com/#somepage
Where the hashtag part represents the actual page a user has navigated to. If someone accessed that url directly, e.g. from outside the site, the site would use Javascript to load the correct content based on the hashtag, after the page had loaded. This means that there might be a little delay for the inner content to reflect the correct page, since it has to run another request after the initial page has loaded from the browser to get the inner content via AJAX.
I was trying to avoid that by creating a setup that worked completely with and without Javascript. If you go directly to a URL within the site such as http://www.outsharked.com/imagemapster/default.aspx?faq.html you will notice it loads the content directly. This URL will work even if Javascript is disabled. You can't actually do this using hashtags, since hashtag content is not sent to the server. Only the client knows what's after the hashtag in a URL. That's why I was using query strings to represent inner pages.
This site architecture was sort of an experiment at the time. It works pretty well but the code isn't fantastic, I didn't really do anything else with it, and I'm sure there are other better-fleshed-out/tested/full-featured frameworks out there to do much the same thing.
But it might not be a bad example of the nuts and bolts of creating a basic AJAX navigation setup, as a learning tool, since it's pretty concise, and also does HTML5 history navigation (e.g. so the back button works on modern browsers).
I have a WebPage made that is 90% Javascript. All of the WebSite is rendered dynamically.
I want this content to be rendered by the server as well so that Google can crawl and index all of my content and links.
I know that in order not to get banned by google, the content of the dynamic page and the server rendered page must be almost identical.
I don't want to code two different pages (one from the client with Handlebars and one from the server with ERB in this case).
So I thought of PhantomJS. What I want is that when I get the _escaped_fragment_ param from google, I open the page without that with PhantomJS and I render this to HTML from PhantomJS and return that from the server to Google. This way, I don't have to create two different pages for anything.
I know that I can use Handlebars for Server Side templating as well, but I'd have to code everything twice anyway.
Does anybody know how to accomplish this with PhantomJS? Is there any other way for not repeating the Logic and code Twice and have Google index the Site?
Thanks!!!
Yes you can.
Add the following to the of your Javascript intensive page
<meta name="fragment" content="!">
When the Google bot finds this tag, it will issue a new http GET request. This time, it will add ?_escaped_fragment_= to your URL.
So if your web page with Javascript is located at:
www.mysite.com/mypage
Google will issue a new GET using the following URL:
www.mysite.com/mypage?_escaped_fragment_=
In your Ruby GET handler, you simply call PhantomJs with the unescaped URL (just do a string replace). In your PhantomJs javascript code, wait for the page to render and then then extract the HTML using regular javascript and return it back to your Ruby GET handler where you will simply respond to the GET with the HTML text string.
In this way you do not have to write your code twice. The solution is generic and will snapshot anything.
I have a site with over 100 pages. We need to go live with products that are soon available, however, many site pages will not be prepared at the time of release.
In order to move forward, I would like to reference a "coming soon" page with links to pages that are current and available.
Is there an easy way to forward a URL to a Coming Soon page?
Is this valid, or is there a better way?
Found this at:
http://www.web-source.net/html_redirect.htm
"Place the following HTML redirect code between the and tags of your HTML code.
meta HTTP-EQUIV="REFRESH" content="0; url=http://www.yourdomain.com/index.html"
Does this negatively affect you if the search engines crawl through your site?
Thank you!
The code you listed will work. However, I would never do this:
You could just show the page you wanted to show immediately, without a redirect. This will be faster for the visitor, as they don't need to load two pages.
If you must use a redirect, why not create it programmatically, for example by instructing your web server (e.g. Apache) to redirect certain pages?
I would not link to pages that don't exist yet. Most visitors will dislike that - clicking on something to find out "come back later" is a disappointment. We've all seen those coming soon pages, with the content never arriving, or only after months or even years. Either leave out those links (or perhaps put a "work in progress sign" without a link), or add the items only after they've been finished.
Search engines should work well with redirect pages, although it is unlikely your "coming soon" page will show up anywhere in the top the rankings anyway.
Perhaps a better or "more correct way" would be to do the redirection at the header level. Using PHP, you would call
<?php
header("Location: http://www.yourdomain.com/index.html");
There's also ways to do this in Apache (assuming you are using it) and .htaccess-files. See http://www.webweaver.nu/html-tips/web-redirection.shtml for more info about that.