at the time of recharging a div, the script that is inside the div is not recharged

Question

at the time of recharging a div, the script that is inside the div is not recharged

Navigation

#1 by (0 votes)

0

my code is as follows:

<?php
$r= rand(0,9);
echo"
<html>
<head>
<title>Alertas</title>
<script src='web/view/js/jquery-2.0.3.min.js'></script>
<script src='web/view/js/main.js'></script>      
</head>
<body>
<div id='contenedor'>
<div id='alerta'>alerta aleatoria: 
$r<script>alert('esto es una alerta')</script>
</div></div>
<script>RefrescarAlerta()</script>
</body>
</html>";
?>

and the javascript function inside the main.js is:

function RefrescarAlerta()
{
     $(this).ready(function() {
      setInterval( function(){       
    $('#contenedor').load('index.php #alerta');  
   }, 7000 );
});
}

the div is updated, as you will see, generating the random numbers without having to reload the page, but it does not show me the alert script anymore ('this is an alert'); which is inside the div, so that the script is only executed at the time of loading the page for the first time, as I do to continue running that script after it refreshes the div that succeeds every 8 sec.

javascript jquery html php ajax

asked by 27.12.2017 в 00:30

source

1 answer

Include .js file in an Angular Component 4 Screenshot on Android (Phone)

score 0 · Answer 1

The problem is how the .load() call is being made, as explained in the jQuery documentation (my translation):

When you call .load() using a URL without a suffix selector expression, the content is passed to .html() before removing the scripts. This causes the script blocks to be executed before they are discarded. If .load() is called with a selector expression next to the URL, then the scripts will be removed before updating the DOM, and therefore will not be executed.

Here, any JavaScript that is loaded in #a as part of the document will run successfully.
$( "#a" ).load( "article.html" );
Instead, in the following case, the document script blocks that are loaded in #b will be deleted and will not be executed:
$( "#b" ).load( "article.html #target" ); 

The code you share falls within the second case (there is a selector just after the URL to load) and therefore the scripts are not executed.

To solve this problem you can choose several options. Here I leave a couple of them that occur to me:

1) Break the PHP file in two

If you change the PHP to break index.php in two files: index.php and alert.php (which would contain only the% share% co_), then in the JavaScript, instead of doing:

$('#contenedor').load('index.php #alerta');

you just have to do that:

$('#contenedor').load('alerta.php');

that would no longer have a selector behind the URL and that's why the scripts would run. The files would look like this:

index.php

<?php
echo"
<html>
<head>
<title>Alertas</title>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='main.js'></script>      
</head>
<body>
<div id='contenedor'>";

include("alert.php");

echo"
</div>
<script>RefrescarAlerta()</script>
</body>
</html>";
?>

alert.php

<?php
$r= rand(0,9);
echo "<div id='alerta'>alerta aleatoria: 
$r<script>alert('esto es una alerta $r')</script>
</div>";

main.js

function RefrescarAlerta()
{
  $(this).ready(function() {
    setInterval( function(){       
      $('#contenedor').load('alert.php');  
    }, 7000 );
  });
}

2) Move the script to a function inside main.js

Since the script does not run at <div id="alerta"> , if it does not contain anything that depends on PHP , you could move it to a function inside the main.js file and call that function when it is completed the .load() . Something like this:

index.php

<?php
$r= rand(0,9);
echo"
<html>
<head>
<title>Alertas</title>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='main2.js'></script>      
</head>
<body>
<div id='contenedor'>
<div id='alerta'>alerta aleatoria: 
$r
</div></div>
<script>RefrescarAlerta()</script>
</body>
</html>";
?>

main.js

function scriptDentroDelAlert() {
  alert('esto es una alerta')
}

function RefrescarAlerta()
{
  $(this).ready(function() {
    setInterval( function(){       
      $('#contenedor').load('index.php #alerta', scriptDentroDelAlert);
    }, 7000 );
  });
}

The problem with this solution is that if you want to do something that depends on values generated in PHP, then things get a bit complicated (you could pass the values in .load() hidden or% input and read them from JS ).