Loaded AJAX content breaking out of DIV tag

Hi. I'm new to Java/AJAX etc. I have a page with links down the left and a DIV on the right. I want content (other pages) to load in the DIV when users click on the links on the left... beginner AJAX stuff I guess.

I played around with a few JQery plugins and found one that allows pages to load with a fade effect, which is perfect. I have a problem though:

The plugin works fine when I click links on the parent page, but when I click links in one of the loaded pages, after one link deep, it breaks out of the div and replaces my parent page. (This issue was described on the plugin page, supposedly solved, but is still cropping up on my page). I suspect it has something to do with the "bind" variable.

I've uploaded a stripped down example of my site here: This is the plugin website: www.thecreativeoutfit.com/index.php?view=Simple-AJAX-Content-Changer-with-EZJax (Because I'm a new user I can't add any more links, sorry for the long-hand).

For those who are willing to look at my site or the plugin, I'd appreciate your insight. If that's a hassle maybe you could recommend a similar simple ajax plugin that allows the loading of content with a fade-in effect, but also allows links within the loaded content to stay contained within the original div.

Many thanks!

Max

I was going to post a comment but it got too long so, what the heck..

Your website worked just fine for me (except for the pages that were not available) in Firefox running on Windows XP.

However, I would strongly recommend against that type of design - it will be a pain for you to maintain in the long run and it is generally considered bad design because it is against the functioning principles of the web: different pages of your website should be represented by distinct URLs which users of your site could use to link to. It also breaks browser back button functionality which is a big usability issue (at least for me).

Plus, it will not be SEO friendly - which means that search engines like Google won't think highly of your website - which means that you won't show up in searches.

agreed that this isn't a good way to design a website. Then it might be a practice website to learn ajax...

marcgg 2009-08-24 17:34:17

still, the issue he describes does not happen in my browser (Firefox on Windows)

Miky Dinescu 2009-08-24 17:36:34

Thanks for the pointers.Our webdesigner left so I'm picking up the peices with what little knowledge I have. I realise a HTML table layout isn't great, so I'm working on a CSS version. For now I'm trying to get the AJAX working. (On the plugin page it said that system was SEO friendly as it "leaves the HREF intact") Anyway, the problem happens when I click on one of the numbered page links below the big square of colour. If you keep clicking those numbers to get from page to page, after about the second click, the link breaks out of the DIV.

MaxThunderbolt 2009-08-24 17:46:26

Steps to reproduce: click on Projects -> Sector 1 -> Project 1. Click page 2.Click page 1. -> full pageI see that when page 2 is loaded the A tags are not bind to the ajax even handler. Not sure why but a workaround would be to rebind all the links when a child page is loaded.

Ariel Popovsky 2009-08-24 17:49:16

Sorry, I fixed the bad links. It's still busting out the DIV for me.

MaxThunderbolt 2009-08-24 17:57:21

Thanks Ariel. Those are big words for me. I think I'm going to have to learn more JS so that I can understand what you mean.

MaxThunderbolt 2009-08-24 18:01:57

When I said the design is flawed I wasn't referring to using tables. Instead I was referring to using AJAX to load all the pages from the main page. As far as it breaking, I followed @Ariel's instructions and I did get it to break.

Miky Dinescu 2009-08-24 18:02:35

I was trying to avoid re-loading the whole page when you click on links. This way it also keeps the link tree on the left intact.What do people normally do in this sort of situation? Re-load the whole page? Or use iFrames?

MaxThunderbolt 2009-08-24 18:07:01

Well, a rule of thumb is that if what you're re-loading represents more than 80% of the content on the page - you're probably better off reloading the whole page. Especially in your case, where you are really loading different pages altogether.

Miky Dinescu 2009-08-24 19:29:50

Thanks Miky D, I appreciate the help.

MaxThunderbolt 2009-08-25 08:40:16

ansaurus

tags:

views:

answers:

Loaded AJAX content breaking out of DIV tag

related questions