The question is simple. I use Ajax Javascript so it can load contents, however how can I for example, load another html2 page and make the page that loaded html2 go away?
Question, does ajax have the ability to load content in real-time while adding up with the previous one?
As if you would click on a redirect link, but without reloading the page with new content.
Asura, it is possible, yes, this is the beginning of the SPA.
If you have a small number of pages, it may be interesting to load all the scripts needed for the n pages.
Let's look at the example below:
index.html
<html>
<head>
<script type="type/javaScript">
var scripts = {};
</script>
<script type="type/javaScript" src="../scripts/core.js" />
<script type="type/javaScript" src="../scripts/page1.js" />
<script type="type/javaScript" src="../scripts/page2.js" />
<script type="type/javaScript" src="../scripts/page3.js" />
</head>
<body>
<div id="container">
</div>
</body>
</html>
core.js
scripts.core = {};
scripts.core.container = document.getElementById("container");
scripts.core.getPage = function (url, callback) {
var httpRequest = new XMLHttpRequest();
httpRequest.open("GET", url);
httpRequest.addEventListener("readystatechange", function (event) {
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
container.innerHTML = httpRequest.responseText;
callback();
} else {
alerta("ocorreu um erro ao carregar a pagina");
}
}
})
httpRequest.send();
}
document.addEventListener("readystatechange" = function () {
if (document.readyState == "interactive") {
scripts.core.getPage("/page1.html", scripts.page1.onload);
}
}
page1.js
scripts.page1 = {};
scripts.page1.onload = function () {
var btPage2 = document.getElementById("btPage2");
var txtInput = document.getElementById("txtInput");
var btAlerta = document.getElementById("btAlerta");
btPage2.addEventListener("click", function (event) {
scripts.core.getPage("/page2.html", scripts.page2.onload);
});
btAlerta.addEventListener("click", function (event) {
alert("Alerta na pagina 1: o valor do input é: " + txtInput.value))
});
}
page2.js
scripts.page2 = {};
scripts.page2.onload = function () {
var btPage1 = document.getElementById("btPage2");
var btPage3 = document.getElementById("btPage2");
var txtInput = document.getElementById("txtInput");
var btAlerta = document.getElementById("btAlerta");
btPage1.addEventListener("click", function (event) {
scripts.core.getPage("/page1.html", scripts.page1.onload);
});
btPage3.addEventListener("click", function (event) {
scripts.core.getPage("/page3.html", scripts.page3.onload);
});
btAlerta.addEventListener("click", function (event) {
alert("Alerta na pagina 2: o valor do input é: " + txtInput.value))
});
}
page3.js
scripts.page3 = {};
scripts.page3.onload = function () {
var btPage2 = document.getElementById("btPage2");
var txtInput = document.getElementById("txtInput");
var btAlerta = document.getElementById("btAlerta");
btPage2.addEventListener("click", function (event) {
scripts.core.getPage("/page2.html", scripts.page2.onload);
});
btAlerta.addEventListener("click", function (event) {
alert("Alerta na pagina 3: o valor do input é: " + txtInput.value))
});
}
Note that in this approach, you should avoid declaring variables in the global scope. for example, instead of doing [window.]variavel = <alguma coisa>; , make [window.]scripts.pagen.variavel = <alguma coisa>; , this is necessary to avoid unwanted behaviors.
Note that I am using scripts.pagen.onload similarly to $(function () { }) of jquery, it will run as soon as the page loads.
Finally an example of the pages:
page1.html
<fieldset>
<legend>Pagina 01</legend>
<div>
<label>
Texto: <input id="txtInput" type="text" />
</label>
<input id="btAlerta" type="button" value="Exibir Alerta" />
</div>
<div>
<input id="btPage2" type="button" value="Ir para a pagina 2" />
</div>
</fieldset>
page2.html
<fieldset>
<legend>Pagina 02</legend>
<div>
<label>
Texto: <input id="txtInput" type="text" />
</label>
<input id="btAlerta" type="button" value="Exibir Alerta" />
</div>
<div>
<input id="btPage1" type="button" value="Ir para a pagina 1" />
<input id="btPage3" type="button" value="Ir para a pagina 3" />
</div>
</fieldset>
page3.html
<fieldset>
<legend>Pagina 03</legend>
<div>
<label>
Texto: <input id="txtInput" type="text" />
</label>
<input id="btAlerta" type="button" value="Exibir Alerta" />
</div>
<div>
<input id="btPage2" type="button" value="Ir para a pagina 2" />
</div>
</fieldset>
If you need a menu in the application, put it out of div#container and load your events into core.js .
As for CSS, you can do something similar ... like putting a class in the root element of each page, such as class=".pagen" and CSS, instead of <seletor> { ... } , .pagen <seletor> { ... } . p>
Remembering that this is just one way to do it, you can load the scripts next to the pages, or you can just load the data and keep the templates loaded, or even load the scripts on demand, if the even if it is not loaded, wait for it to load before loading the page.
You can do this in a simple way, using jQuery :
$(function() {
$('.loader').hide();
});
function openPage(pagina, id) {
$('.loader').show();
$('#'+id).load(pagina);
}
HTML:
<a href="javascript:void(0);" onclick="openPage('suapagina.php', 'elemento');">
Abrir Sua página
</a>
<div id="elemento"><img src="loader.gif" class="loader" border="0"></div>