Remove JS file via JS

Asked

Viewed 1,597 times

2

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

I am loading the pages with the jquery command .load('Home.jsp'). What happens is that when I open the Home page, the files are loaded normally, but when I open Contacts, the js of the Home conflict with the js of Contacts. The conflict occurs because there are functions with the same name, but imagined that when overlapping one page with the other the 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>

js menu.

$(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);
}

js contact.

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

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

javascript java jquery jsp
  • 1

    If you can explain better the problem you have in particular and, if possible, show code you have done where this problem is. Your question is too broad, see Help Center How to Ask.

  • 1

    Strange to run twice... If the function is reset, it should run only once. Has some functional example link for us to see?

  • @bfavaretto I have no way to publish any example. But I also thought that the function would be redefined and would have no problem. But when I look at the Development Tool, I can access both JS. Even by "removing" the other page with the .load.

2 answers

2

You can use functions located in variables and 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 headache, make each js file with its uniquely named functions, is a pattern in small and large projects, if it is 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 only upload the required JS files in each page.

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

0


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

Example

Menu.jsp:

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

js menu.

$(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);
}

js contact.

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

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

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

Thank you.

Browser other questions tagged javascript java jquery jsp

You are not signed in. Login or sign up in order to post.