0
The question is simple. I use Ajax Javascript to load content, but as I can for example, load another html2 page and make the page that loaded html2 disappear?
The question, ajax has the ability to load content in real-time while disappearing with the previous?
As if to click on a redirect link, but without reloading the page with the new content.
1
Asura, it is possible yes, including this is the principle of the SPA.
if you have a small number of pages, it may be interesting for you to load all the necessary scripts for the 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 overall scope. for example, instead of doing [window.]variavel = <alguma coisa>;, do [window.]scripts.pagen.variavel = <alguma coisa>;, this is necessary to avoid unwanted behavior.
note that I am using the scripts.pagen.onload similarly to the $(function () { }) jquery, it will run as soon as the page is loaded.
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 app, put it outside the div#container and upload your events to core.js.
as for CSS, you can do something similar... like putting a class in the root element of each page, as an example class=".pagen" and in CSS, instead of <seletor> { ... }, do .pagen <seletor> { ... }.
Remembering that this is just one way to do it, you can load the scripts together with the pages, or you can only load the data and keep the templates already loaded, or even load the scripts on demand, if it is not loaded, wait for loading before loading the page.
1
You can do this in a simple way by 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>
Browser other questions tagged javascript ajax
You are not signed in. Login or sign up in order to post.
is looking for
window.location = 'http://answall.com/questions'?– Bruno Costa
Hello, Can be more explicit with examples would be easier to understand your question.
– Tiago Gomes