auto refresh a div using javascript

问题

SITUATION I am trying to auto refresh a tag defined within an article in Joomla 2.5

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js">         </script> 
     <script> 
     var auto_refresh = setInterval(
     function()
     {
     alert("testing");
     $('#results').fadeOut('slow').load('#results').fadeIn("slow");
     }, 20000);
     </script-->

     <div id="results">
     {szakitable  csv = "http://127.0.0.1/msedcl/Archives/status2.csv" csvseparator=","  width= 430}
     {/szakitable}
     </div>

The above code makes use of an extension called szaki tables, which allows csv file to be directly embedded into an article. I require that the div should reload every 20 seconds so that the changes made in the csv file get reflected on the webpage. PROBLEM When i call "$('#results').fadeOut('slow').load('#results').fadeIn("slow");" what happens is the entire page is reloaded within the div area. This is not what I require.

Any suggestion please!

回答1:

Did you try this?

$('#results').fadeOut('slow').load('{current_page.html} #results').fadeIn("slow");

Replace {current_page.html} with the file name of the document

Another way using callbacks

$('#results').fadeOut('slow', function(){
    $(this).load('index.html #results').fadeIn("slow")
});

回答2:

See .load() is required to load external data from other page to current page without refreshing the whole page.

As i see your code you are loading the div #results which won't work at all.

From the DOCS:

`Loading Page Fragments:`

The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

`example:`

$('#result').load('ajax/test.html #container');

What this will load is this gets the test.html and find the element with id of container and loads it inside of element result on current page.

So in your case:

var auto_refresh = setInterval(function(){
   alert("testing");
   $('#results').fadeOut('slow').load('targetpage.php #results').fadeIn("slow");
 }, 20000); //-------------------------^^^^^^^^^^^^^^---required

or if you are loading it with someother way then you can do this:

$('#results').fadeOut('slow').fadeIn("slow");

来源：https://stackoverflow.com/questions/15378310/auto-refresh-a-div-using-javascript

标签

jquery

joomla2.5