Remove JS file via JS

2

I have a site that has the fixed side menu and the other part loads the pages. For each page of the site I made a js file. For example: Home.jsp I have the file home.js, Contacts.jsp I have the contacts.js.

I'm loading the pages with the jquery .load('Home.jsp') command. What happens is that when I open the Home page, the files are loaded normally, however when I open the Contacts, the Home js conflicts with the Contacts js. The conflict occurs because there are functions with the same name, but imagined that overlapping a page with the other js of the old would be "deleted."

Does anyone know if via JS I can effectively delete a JS file from the browser? Or if I have to clear some cache, or something like that.

Example:

Menu.jsp:

<div>
    <div id="home">Home</div>
    <div id="contato">Contatos</div>
</div>

menu.js

$(document).ready(function(){
     $("#home").click(function(){
         //.dconteudo è uma div onde jogo as páginas que serão exibida no site 
         $(".dconteudo").load("home.jsp")
     });

     $("#contato").click(function(){
         //.dconteudo è uma div onde jogo as páginas que serão exibida no site 
         $(".dconteudo").load("contato.jsp")
     });
});

Home.jsp

....
<head>
  <script type="text/javascript" src="home.js"></script>
</head>...

Contact.jsp

....
<head>
  <script type="text/javascript" src="contato.js"></script>
</head>...

home.js

function carregaFundo(){
     $("#fundo").show(200);
}

contact.js

function carregaFundo(){
     $("#fundo").show(200);
}

When I call home.jsp and then the contact.jsp, when loading the contact.jsp, the function loadFl () is called twice, that is, once for the home.js file and once for the file contact.js

    
asked by anonymous 16.06.2014 / 14:45

2 answers

0

Well, first I apologize, because the example was wrong. The problem of making two calls to the same method is that I was using the .on() method of Jquery , for the same button.

Example

Menu.jsp:

<div>
    <div id="home">Home</div>
    <div id="contato">Contatos</div>
</div>

menu.js

$(document).ready(function(){
     $("#home").click(function(){
         //.dconteudo è uma div onde jogo as páginas que serão exibida no site 
         $(".dconteudo").load("home.jsp")
     });

     $("#contato").click(function(){
         //.dconteudo è uma div onde jogo as páginas que serão exibida no site 
         $(".dconteudo").load("contato.jsp")
     });
});

Home.jsp

....
<head>
  <script type="text/javascript" src="home.js"></script>
</head>...

Contact.jsp

....
<head>
  <script type="text/javascript" src="contato.js"></script>
</head>...

home.js

$(document).ready(function(){
    $('body').on('click', '#btnConfirmar', carregaFundo);
});

function carregaFundo(){
     $("#fundo").show(200);
}

contato.js

$(document).ready(function(){
    $('body').on('click', '#btnConfirmar', carregaFundo);
});

function carregaFundo(){
     $("#fundo").show(200);
}

That is, .on() puts the event twice on the Button.

Thank you.

    
23.06.2014 / 01:17
2

You can use functions located in variables and you could even clean them (optionally) before loading the next js file:

foo = function() { }
foo = undefined; // isso limpa a função... porém é opcional, a próxima linha faria isso
foo = function() { console.log("It works!"); }
foo();

But this would only give you more headaches, make each js file with its named functions only, it's a pattern in small and large projects, if it's easier to use function prefixes in each file, so you do not lose:

function home_load() { }
function home_btn1Click() {  }

function contato_submitForm() { }
function contato_btn1Click() { }
  

Remember to load only the required JS files in each   page.

Another suggestion: Try not to replicate function calls, if home already does, contato should not do ... just leave specific functions on the contact page

    
16.06.2014 / 15:06