need serious help with html5 ajax page loading :(

128 Posts

Zuriel Reply #1, 13 years, 1 month ago

Ok what I THOUGHT I had working was not working very well at all.. in fact.. i wouldn't even say its "working" i'd say its hacked to work and badly at that... I am going to need some sexy custom php or something...

How can I explain it. ok.

so you have a INDEX.HTML page. This page is your only page on the website that EVER gets hit. (very similar to index.php on modx) and then we use .htaccess to redirect EVERYTHING that we type back to index.html and then we take the extra stuff and we send it to javascript and javascript finds the name of the page and the folder where it is and loads it into index.html inside a div called main. <div id="main"></div>

This works great on a standard HTML website with no modx. but here is where i need serious help.

modx and my website are both fighting to do the same thing. see my website wants to make all pages goto index.html and modx wants all pages to goto index.php if we make my page the 1st page in modx and it now becomes index.php we have a bigger problem because modx is creating fake links to pages that only exist in a database and my site is trying to take what modx is giving it, and then suck it back into it self and its just a giant MESS.

you can check it out at http://ecocool.zadesigns.com

you can see i have 2 links. and they work. and if you go back and forth between them the page does NOT refresh and everything seems great.

but if you type http://ecocool.zadesigns.com/help.html you will break the site and it goes to the actual help.html page.. instead i want it to stay on index.php load my default page, and suck the help.html page into the main content. which only works if you type http://ecocool.zadesigns.com/help without the .html on the end.

can someone help me out! if you need access to the server and want to get into the backend and etc then I can give you that because this needs some serious serious brain power from a modx pro.

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 13 years, 1 month ago

Set up your site to work normally - normal menu, normal page loading.

Now add in your javascript to prevent default link clicking action and do the AJAX request thing instead. Have your resources with no template, so all that gets returned when a page is requested is the bare content. So if you click on help.html, instead of a new page the contents of your help resource is loaded into your container by the AJAX, since the URL for the AJAX will simply be your help resource.

Take it from there with dynamic pages, like form processing. Snippets in resources with no template, just the snippet output in the resource's content is returned.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

128 Posts

Zuriel Reply #3, 13 years, 1 month ago

I have the routing here in my code

// router & history init
	app.router = new app.appRouter();

	// Enable pushState for compatible browsers
	var enablePushState = true;  

	// Disable for older browsers (IE8, IE9 etc)
	var pushState = !!(enablePushState && window.history && window.history.pushState);


	Backbone.history.start({ pushState: Modernizr.history, silent: true });
	if(!Modernizr.history) {
		var rootLength = Backbone.history.options.root.length;
		var fragment = window.location.pathname.substr(rootLength);
		var search = window.location.search;
		Backbone.history.navigate('/#' + fragment + search, { trigger: true });
	} else {
		Backbone.history.loadUrl(Backbone.history.getFragment())
	}

	$(document).on("click", "a[href^='/']", function(event) {
		if (!event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
			event.preventDefault();
			var url = $(event.currentTarget).attr("href").replace(/^\//,'').replace('\#\!\/','')
	//url = url.split("/")[0];
	var section = url.split("/")[0];
	var parameters = url.split("/")[1];

	if (parameters) {
		Backbone.history.navigate (section + '/' + parameters, { trigger: true });

	} else {
		Backbone.history.navigate (section, { trigger: true });
	}

What i'd like is for the address bar to remove irrelevant stuff like .html or / but have the site route to the correct things. It was working great in html but im just missing something in the modx part.

I have your part working already. the part I don't have working is getting the stuff to work when you directly type it in, like

http://ecocool.zadesigns.com/help.html
http://ecocool.zadesigns.com/help/
http://ecocool.zadesigns.com/help

all 3 should redirect to

http://ecocool.zadesigns.com/help

when you type them in.

navigating from the website itself I seem to have working. but I think i may need to fenagle the way it navigates internally in sync with the fixes I have to do for the address bar typo redirects. Since modx uses a htaccess file to do friendly URL and i also need to do some sort of fixing as well, that is where I am stuck. [ed. note: zurie last edited this post 13 years, 1 month ago.]