Javascript does not pick up pages added later

Asked

Viewed 513 times

3

I’m in trouble, which begs a big question.

I’m developing a website that has a standard structure, which makes GET calls on Jquery to search for new HTML pages for certain parts of the page.

Example: I click on a link and the page change is done without the page reloading.

But here’s the problem. The pages added later by Ajax, which has some elements that use code in JavaScript, as slides, charts, maps, among other elements, are added correctly, but these cited elements do not work, only if they are incorporated right at the beginning of the site (as soon as the site is loaded).

What should I do to ensure that this does not occur and that these elements function correctly?

javascript jquery html get

  • Welcome to Sopt, good first, Check your code? we can’t guess your problem. beware of informality when posting, no GRIP code, it can copy, work, generate errors on the console etc.

  • Thanks Isvaldo! Actually, the problem is much more theoretical. Actually, there’s no way I can put any of this here for you, because this is the whole site, with really big codes. I wonder if, in theory, this should happen, by the fact of pulling a page later and all.

  • @Renégustavo your problem is in your Jquery, which only takes the existing items on the screen, and when you make the Ajax request, it does not bother to put the events and functions in your new code. For example $( "#target" ).click(function() {
 alert( "Handler for .click() called." );
});this is a standard click evendo, but if you use your Ajax it will not work. You would have to use: $('#salvaHorarioAvulso').on('click', function () {
 CriaHorarioAvulso();
 }); this way Jquery always keeps listening and seeing the page codes.

  • @Marlontiedt, I get it and I know what it’s like. This has to do with the question of functions that load maps, graphs and other things, at the time of loading, without any user action?

2 answers

2

I believe you’re using the wrong technology for the intended purpose. It is possible to do what you want using javascript + jquery, but it is not the best way to do it.

To do the way you are doing I recommend creating new files with just the snippet of code that will be changed, example:

index.html

...
<div id="container">
 [aqui_vai_o_conteúdo_carregado]
</div>
...

External.html

<div>
  <h2>Um titulo qualquer</h2>
  <p> Esse é o conteúdo que será carregado dentro do container ao clicar em algum link </p>
</div>

In theory you should only upload the necessary content into the container instead of reloading all the html, which would be more costly to process. And only after this upload should you initialize the plugins. Checking this load with javascript and jquery can be very annoying, so I recommend frameworks for this.

I recommend studying: Angularjs, Emberjs Or if you prefer something lighter and simpler: Reactjs, Mithriljs, Riotjs

All of these frameworks have unique methods for SPA (Single Page Applications) development, such as content Binder, routes, initializers etc...

  • 1

    Thank you very much for the friendly comment! What you’re telling me to do, in relation to the files with snippets of code, is exactly what I do, but unfortunately it happens what I told you. I will study what you recommended. Thank you very much!

1

You can use $.getScript to load the external js. See this example I tested here locally.

What is done is this: $.get is used to pull the test.html file, and $.getScript to pull the js corresponding to it.

In the test.html there is an onclick button, and the function of that button is in js.js.

html base.

<script src="jquery.js"></script>

<script>
$(function() {

$("#chamada1").click(function() {

$.get("teste.html", function( data ) {
$.getScript("js.js");
$("#conteudo").html(data);
}); 

}); 

});
</script>

<input type="button" value="chamada1" id="chamada1" />

<div id="conteudo"></div>

html test.

<input type="button" value="clique" onclick="alerta1()">

js.js

function alerta1() {
alert("esse é o alerta 1");
}

  • Thank you so much for the reply friend! I understood perfectly what you said, but I have a question. The same code . js that I am using on this "test.html" page that is being inserted by GET, I am using on the structural page, where the test is imported. Even so I should use the . getScript?

  • If you already make the js call on the main page don’t need to pull on getScript either.

  • Got it! Unfortunately the JS does not work on these external pages added later.

Browser other questions tagged javascript jquery html get

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