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;
Related
I've got an experimental project at work where I have to check whether or not it is practical to use Typo3 in a headless way, with most of the Typo3 stuff still working.
For the Rest Api I'm using tx_rest to expose
my endpoints.
In particular I'm currently trying to get the rendered html of a form, which was created by a backend user, with the Typo3 form framework, via ajax.
Does anyone know of a way to retrieve only the rendered html form from Typo3?
Does anyone know of a way to retrieve only the rendered html form from TYPO3?
Create a new PAGE object with a custom number
formPage = PAGE
formPage.typeNum = 765
and set
formPage.config {
debug = 0
disableAllHeaderCode = 1
disablePrefixComment = 1
xhtml_cleaning = none
admPanel = 0
}
to prevent any other output and finally
formPage.10 < styles.content.get
(or use any other setup to fetch your content, this is just an example, that will output all contents of the current page in colPos 0)
Opening your page with https://myhost.com/my/path/?type=765 will then render anything on the page without any additional markup, just the output of your page content (e.g. the form plugin, etc.).
Ok, this idea might seem quite a bit crazy and it kindo' is (at least for me at my level).
I have a fairly standarad rails app (some content pages, a blog, a news block, some authentication). And I want to make it into a single page app.
What I want to accomplish is:
All the pages are fetched through AJAX like when using turbolinks, except that the AJAX returns only the view part (the yield part in the layout) withought the layout itself, which stays the same (less data in the responces, quicker render and load time).
The pages are mostly just static html with AngularJS markup so not much to process.
All the actual data is loaded separately through JSON and populated in the view.
Also the url and the page title get changed accordingly.
I've been thinking about this concept for quite a while and I just can't seem to come up with a solution. At this point I've got to some ideas on how this actualy might be done along with some problems I can't pass. Any ideas or solutions are greatly appreciated. Or might be I've just gone crazy and 3 small requests to load a page are worse then I big that needs all the rendering done on server side.
So, here's my idea and known problems.
When user first visits the app, the view template with angular markup is rendered regularly and the second request comes from the Angular Resource.
Then on ngClick on any link that adress is sent to ngInclude of the content wrapper.
How do I bind that onClick on any link and how can I exclude certain links from that bind (e.g. links to external authentication services)?
How do I tell the server not to render the layout if the request is comming from Angular? I though about adding a parameter to the request, but there might be a better idea.
When ngInclude gets the requested template, it fires the ngInit functions of the controllers (usually a single one) in that template and gets the data from the server as JSON (along with the proper page title).
Angular populates the template with the received data, sets the browser url to the url of the link and sets the page title to what it just got.
How do I change the page title and the page url? The title can be changed using jQuery, but is there a way through Angular itself?
Again, I keep thinking about some kind of animation to make this change more fancy.
Profit!
So. What do you guys think?
OK, in case enyone ever finds this idea worth thinking about.
The key can be solved as follows.
Server-side decision of whether to render the view or not.
Use a param in the ngInclude and set the layout: false in the controller if that param is present.
Have not found an easier way.
Client-side binding all links except those that have a particular class no-ajax
Here's a directive that does it.
App.directive('allClicks', function($parse) {
return {
restrict: 'A',
transclude: true,
replace: true,
link: function(scope, element, attrs) {
var $a = element.find('a').not($('a.no-ajax')),
fn = $parse(attrs['allLinks']);
$a.on('click', function(event) {
event.preventDefault();
scope.$apply(function() {
var $this = angular.element(event.target);
fn(scope, {
$event: event,
$href: $this.attr('href'),
$link: $this
});
});
});
}
};
})
And then use it on some wrapper div or body tag like <body ng-controller="WrapperCtrl" all-links="ajaxLink($href)"> and then in your content div do <div id="content" ng-include="current_page_template">
In your angular controller set the current_page template to the document.URL and implement that ajaxLink function.
$scope.ajaxLink = function(path) {
$scope.current_page_template = path+"?nolayout=true";
}
And then when you get your JSON with your data from the server don't forget to use history.pushState to set the url line and document.title = to setr the title.
Is there a way to refresh the entire page content instead of just a div?
what exactly do you want here? you can write 1 javascript line to refresh entire page
window.location.reload()
You can replace the content of the body tag. It's just like replacing the content of an ordinary div. To access the body tag use document.body or document.getElementsByTagName('body')[0].
If you do a normal page reload with window.location you will have the CSS and JavaScript in the head reloaded, so that will take more resources.
You can do something like this to send the browser to a new URL:
window.location = "http://www.google.com/"
But, at that point, you're kind of defeating the point of AJAX. Most of the time, you'd want to download only the data you need from the server, and rewrite the contents of only those parts of the page that change. It's generally a better experience for the user, that way.
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.
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.