CODEWITHSUNDEEP
javascriptjqueryhtml
Rob
Rob

Reputation: 137

JavaScript work only one time

I face with some problem. I have page and make auto refresh div(table) content everything works fine and i have table with filters from javascript, but after refresh filters gone. I try call again filters function but nothing happen.

Why dont work filterJS() again with setInterval script?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Main Page</title>

    <script type="text/javascript" src="filter/tablefilter.js"></script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="refresh">
<table id="tab" class="my" >
	<tr>
		<th>World Regions</th>
		<th>Population ( 2007 Est.)</th>
		<th>Population % of World</th>
		<th>Internet Usage, Latest Data</th>
		<th>% Population ( Penetration )</th>
		<th>Usage % of World</th>
		<th>Usage Growth 2000-2007</th>
	</tr>
	<tr>
		<td>Africa</td>
		<td>933,448,292</td>
		<td>14.2 %</td>
		<td>32,765,700</td>
		<td>3.5 %</td>
		<td>3.0 %</td>
		<td>625.8%</td>
	</tr>
	<tr>
		<td>Asia</td>
		<td>3,712,527,624</td>
		<td>56.5 %</td>
		<td>389,392,288</td>
		<td>10.5 %</td>
		<td>35.6 %</td>
		<td>240.7 %</td>
	</tr>
	<tr>
		<td>Europe</td>
		<td>809,624,686</td>
		<td>12.3 %</td>
		<td>312,722,892</td>
		<td>38.6 %</td>
		<td>28.6 %</td>
		<td>197.6 %</td>
	</tr>
	<tr>
		<td>Middle	East</td>
		<td>193,452,727</td>
		<td>2.9 %</td>
		<td>19,382,400</td>
		<td>10.0 %</td>
		<td>1.8 %</td>
		<td>490.1 %</td>
	</tr>
</table>
</div>

<script language="javascript" type="text/javascript">
//<![CDATA[	
function filterJS(){
	var table2_Props = 	{					
					col_0: "select",
					col_5: "none",
					display_all_text: " [ Show all ] ",
					sort_select: true
				};
	setFilterGrid( "tab",table2_Props );}
//]]>

filterJS();

	$(document).ready(function(){
		setInterval(function() {
            filterJS();
			$('.refresh').load(document.URL +  ' .refresh');}, 2000);
	});
</script>

</body>
</html>

Upvotes: 0

Views: 1401

Answers (3)

Alexus
Alexus

Reputation: 952

If you are trying to delay the script to ensure the filters run AFTER the table is loaded, it will only work until your network is slow... so quite a bad way of doing it. Instead:

$(document).ready(function(){
      $('#myTable').load(document.URL +  ' #myTable', function() {
          filterJS();
      });
});

This way you use a callback function which will execute every time after the load is complete.

Add your recursion accordingly.

Upvotes: 0

epascarello
epascarello

Reputation: 207501

Call it after the table is updated, use the callback argument that load() provides

setInterval(function() { $('#myTable').load(document.URL +  ' #myTable', filterJS);}, 2000);

and you really should look into using setTimeout and not interval so if the server takes awhile to respond, the calls do not start to pile up.

function filterJS() {
    var table2_Props = {
        col_0: "select",
        col_1: "select",
        col_3: "none",
        display_all_text: " [ All ] ",
        sort_select: true
    };
    setFilterGrid("myTable", table2_Props);
    window.setTimeout(reloadData, 2000);
};

function reloadData() {
    $('#myTable').load(document.URL + ' #myTable', filterJS);
}

Upvotes: 2

elzi
elzi

Reputation: 5672

Set it up to call the function recursively in the callback, and use setTimeout instead of interval

function getTable() {
  $('#myTable').load(document.URL + ' #myTable', function() {
    setTimeout(function(){
      getTable();
    }, 2000)
  });
}

Upvotes: 0

Related Questions