Changing index.jsp dynamically without reloading the page

Question

Within my index.jsp I have a table that in one of its cells and an iframe that displays one of my jsp, and depending on the type of action taken by the user it changes which page is displayed within the iframe, would like to know if you can make this change without reloading the page.

so I’ve researched how to do this in ajax, but I don’t know how to use ajax.

Answer 1

You can use Javascript to change the iframe address without having to reload the entire page:

document.getElementById("id-do-iframe").src = "/nova-pagina.jsp?parametro=1";

Answer 2

There are at least three main ways to change the content of a frame or iframe.

Change the attribute src javascript

Imagine you have a frame like this:

<iframe id="frame" src="http://servidor/pagina1" />

Then you can implement a function that accesses the frame through your id and changes the attribute src, containing the displayed URL:

function trocaPagina() {
    var f = document.getElementById('frame');
    f.src = 'http://servidor/pagina2';
}

This can be called through some link or button, for example:

<button type="button" onclick="trocaPagina()">Trocar conteúdo</button>

Demo at Jsfiddle

Via a link (a) with the attribute target

Create a frame with the attribute name defined as follows:

<iframe name="frame" src="http://doc.jsfiddle.net/" />

Then you can open on it any page when the user clicks on a link, just set the URL on the link and add the attribute target of the same value as name frame.

Example:

<a href="http://blog.jsfiddle.net/" target="frame">Trocar outro conteúdo</a>

Demo at Jsfiddle

Through a form Submit with the attribute target

Considering the same previous frame with the attribute name:

<iframe name="frame" src="http://doc.jsfiddle.net/" />

Then you can open on it any page when the user submits a form, just set the URL action and the attribute target of the same value as name frame.

Example:

<form action="http://jsfiddle.net/" target="frame">
    <button type="submit" onclick="trocaPagina()">Trocar conteúdo</button>
</form>

Demo at Jsfiddle