I have the following scenario:
HTML:
<script src="JS1.js">
<script src="JS2.js">
In JS1 I have the following:
$(document).ready(function(){
var pagina = "site1";
iniciarSite();
});
In JS2 I have the following:
function iniciarSite(){
if(pagina == "site1"){
alert("Estou no site 1");
}
}
The error is that the 'page' variable does not exist in this context.
You must declare the variable globally.
var pagina;
$(document).ready(function(){
pagina = "site1";
iniciarSite();
});
or
$(document).ready(function(){
window.pagina = "site1";
iniciarSite();
});
Another alternative is to pass the variable by parameter.
I do not recommend using global variables. Let's look at some possibilities to avoid this.
A { ... } object is a flexible way to pass multiple parameters when needed, as if it were a map.
$(document).ready(function(){
iniciarSite({
pagina: "site1",
outroAtributo: 10
});
});
function iniciarSite(args){
if(args.pagina == "site1"){
alert("Estou no site 1");
}
}
I do not consider it an elegant solution, after all it's still a global variable, but it's better to put all the junk in one place than to have "loose" and "spilled" variables throughout the code.
var pageConfig = {
pagina: "site1" //valor default
};
$(document).ready(function(){
//necessário apenas se o valor mudar durante a execução
//pageConfig.pagina = "site1";
iniciarSite();
});
function iniciarSite(){
if(pageConfig.pagina == "site1"){
alert("Estou no site 1");
}
}
It's a kick, but I believe that the JavaScript file that sets the value of the pagina variable is a specific file included in a specific HTML, while the other JavaScript file is a general file included on several pages.
If this is the case, the following example would be more appropriate:
Specific file:
//define as propriedades da página atual
var pageAttributes = {
pagina: "site1"
/*Outras propriedades da página*/
};
General file:
//lê propriedades da página específica e inicializa o site
$(function() {
if (pageAttributes) { //verifica se existem propriedades, caso contrário não faz nada
if (pageAttributes.pagina == "site1") {
alert("Estou no site 1");
}
}
});
In the example above, the pageAttributes object stores page-specific settings. That would not even have to be in a separate JavaScript. This type of information can go inside the same HTML.
Just remember that the specific script should always be included before the general script.
A more drastic solution, but one I consider more flexible and adequate, would be not page-oriented code, but rather the components on the page.
This means that, instead of a code that "knows" which page it is on, it would be better for a code that "reacts" properly on any page.
How to do this? There are several ways.
Imagine a scenario where you want to decorate your tables with the Data Tables plugin, using the dataTables() command. The problem is that only the search screens have tables.
At first you could do something like this:
function iniciarSite(args){
if(args.pagina == "pesquisa-paises"){
$('#tabela-paises').dataTables();
}
if(args.pagina == "pesquisa-estados"){
$('#tabela-estados').dataTables();
}
if(args.pagina == "pesquisa-municipios"){
$('#tabela-municipios').dataTables();
}
}
However, we could generalize this very easily using a special class, for example decorate-dt . With a slight modification in the tables ( <table class="decorate-dt"> ) our code could end like this:
function iniciarSite(args){
$('.decorate-dt').dataTables();
}
It would always run and would not do anything if you did not find tables with the CSS class.
What if you needed to customize one or another table with specific parameters? Just use data-* attributes in the corresponding tags, so the entire configuration stays in the HTML, no script required.
Plugins recognized as DataTables and Bootstrap JavaScript plugins have native support for this type of structure.
For own routines, use jQuery.data() to read the specific settings.
Incidentally, even if you want to keep checking which page you're on you could still use this technique. Put a date attribute on your ( <body data-pagina="site1">) and then access the attribute.) Example:
function iniciarSite(args){
var pagina = $('body').data('pagina');
if (pagina == "site1") {
alert("Estou no site 1");
}
}