Question

at the moment I am using iframes on my website to display content from other pages like forms. The problem I have, is on the login page, when the user logs in with a form inside an iframe, it just shows the next page inside the login iframe – which is completely useless.

I have heard that AJAX is much more flexible and dynamic for things like this, but I can’t work out how to use it, I have looked at some tutorials but don’t seem to be getting that far in displaying a page inside a page.

How can I replace my iframe with AJAX?

Thank in advance 🙂

Answer 1

Since you won’t be using iFrames you will need a container to put your page into. With AJAX, it is common practice to use a <div> element to hold that data. Also, jQuery or another Javascript library supporting AJAX will make your life easier with working tested code so you can focus on your business logic rather than the nitty gritty. So, in your HTML, you will need a container element:

<div id="otherpage"></div>

Then in an included javascript file, you can use this jQuery:

$(document).ready(function() {
   $('#otherpage').load('otherpage.html', function() {
      alert('Load was performed.');
   });
});

Of course, before using that, make sure you include jQuery as well. This tutorial should help you get started with jQuery.