In 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 and the page displayed inside the iframe, I would like know if you can do this change without reloading the page.
So I researched how to do this and in ajax, but I do not know how to use ajax.
There are at least three main ways to change the contents of a frame or iframe .
src attribute with JavaScript Imagine you have a frame like this:
<iframe id="frame" src="http://servidor/pagina1"/>Thenyoucanimplementafunctionthataccessestheframethroughitsidandchangesthesrcattribute,whichcontainsthedisplayedURL:
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>
a ) with the attribute target
Create a frame with the name attribute set as follows:
<iframe name="frame" src="http://doc.jsfiddle.net/"/>Thenyoucanopenapageonitwhentheuserclicksonalink,justsettheURLonthelinkandaddthetargetattributewiththesamevalueasthe%frame%.
Example:
<a href="http://blog.jsfiddle.net/" target="frame">Trocar outro conteúdo</a>
name attribute%
Considering the same previous frame with the attribute target :
<iframe name="frame" src="http://doc.jsfiddle.net/"/>Soyoucanopenapageonitwhentheusersubmitsaform,justsettheURLinthetributenameandtheactionattributewiththesamevalueasthetargetoftheframe.
Example:
<form action="http://jsfiddle.net/" target="frame">
<button type="submit" onclick="trocaPagina()">Trocar conteúdo</button>
</form>
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";