Member Avatar for edn_781

Please help me:
My code is going into an infinite loop after clicking on a link.
Here is my Code:

<html>
<head>
<title>Assignment</title>
<script language="javascript">
var records_per_page = 5;
var total_records = 35;

function pagination(current_page){
	var initial_page = 1;
	var total_page = 0;
	var page = '';
	if(total_records % records_per_page == 0)
	{
		total_page = total_records / records_per_page;
	}
	else if(total_records % records_per_page != 0)
	{
		total_page = ((total_records - (total_records % records_per_page))/records_per_page) + 1;
	}
	if(total_page == initial_page)
	{
		page = 'Page: ' + initial_page ;
	}
	else if(total_page > initial_page && current_page == initial_page)
	{
		page = 'Pages: ' + initial_page ;
	}
	else if(total_page > initial_page && current_page > initial_page)
	{
		page = 'Pages: <a href="javascript:void(0);" onclick="pagination(1)" >1</a>';
	}
	
	for(var p = initial_page + 1; p < current_page; p++)
	{
		page += ' <a href="javascript:void(0);" onclick="pagination(' + p + ')" >' + p + '</a>';
	}
	if(current_page > initial_page)
	{
		page += ' ' + current_page ;
	}
	for(var q = current_page + 1; q <= total_page; q++)
	{
		page += ' <a href="javascript:void(0);" onclick="pagination(' + q + ')" >' + q + '</a>';
	}

	document.writeln("<div id='pageNavPosition'></div>")
	var element = document.getElementById('pageNavPosition');
    element.innerHTML = page;
}
</script>
</head>
<body>
</body>
</html>

<script type="text/javascript">
	pagination(1);
</script>
  • 2 Contributors
  • 3 Replies
  • 145 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by Fest3er
Member Avatar for Fest3er

This is an easy one to screw up. You forgot your HTML 101 class: you cannot write to the document after it's been written. It's not an infinite loop; it's waiting for the rest of the new HTML document you started to write.

Move the "<div id='pageNavPosition'></div>" tags to above the </body> tag and delete the document.writeln statement. Now your function will have a proper DOM and HTML structure to search and will find the element it wants to modify.

Lose the empty bold tags between 'javascript' and the ':'; they prevent the function from working.

Finally, W3C specifies that <script> tags belong in the <body>, not the <head>. In your example, <title> should be the only thing in the <head>; the rest belongs in the <body>.

Member Avatar for edn_781

My Original Problem is here below,
Still stuck in please help, I need it immediately.
It's an php file, generated a JSON array and population by DIV into body.

<?php
// PHP array declared for JSON data
	$persons_array = array('Persons' => array('0'=> array('Id' => 1, 'FirstName' => 'Sandip', 'LastName' => 'C*.', 'Email' => 'a@b.com', 'Points' => 12),'1' => array('Id' => 2, 'FirstName' => 'Dibakar', 'LastName' => 'D#', 'Email' => 'b@b.com', 'Points' => 14),'2' => array('Id' => 3, 'FirstName' => 'Tarak', 'LastName' => 'K&', 'Email' => 't@b.com', 'Points' => 12),'3' => array('Id' => 24, 'FirstName' => 'Mark', 'LastName' => 'C', 'Email' => 'm@b.com', 'Points' => 13),'4' => array('Id' => 5, 'FirstName' => 'Eshaan', 'LastName' => 'F', 'Email' => 'de@b.com', 'Points' => 14),'5' => array('Id' => 6, 'FirstName' => 'Rehman', 'LastName' => 'G', 'Email' => 'dr@b.com', 'Points' => 13),'6' => array('Id' => 7, 'FirstName' => 'Proloy', 'LastName' => 'K', 'Email' => 'de@b.com', 'Points' => 14),'7' => array('Id' => 8, 'FirstName' => 'Shankar', 'LastName' => 'D', 'Email' => 'de@b.com', 'Points' => 14),'8' => array('Id' => 9, 'FirstName' => 'Ethan', 'LastName' => 'P', 'Email' => 'de@b.com', 'Points' => 14),'9' => array('Id' => 10, 'FirstName' => 'Rajesh', 'LastName' => 'NF', 'Email' => 'de@b.com', 'Points' => 14),'10' => array('Id' => 11, 'FirstName' => 'Eshaan1', 'LastName' => 'F1', 'Email' => 'de@b.com', 'Points' => 14),'11' => array('Id' => 12, 'FirstName' => 'Eshaan2', 'LastName' => 'F2', 'Email' => 'de@b.com', 'Points' => 14),'12' => array('Id' => 13, 'FirstName' => 'Eshaan3', 'LastName' => 'F3', 'Email' => 'de@b.com', 'Points' => 14),'13' => array('Id' => 14, 'FirstName' => 'Eshaan4', 'LastName' => 'F4', 'Email' => 'de@b.com', 'Points' => 14),'14' => array('Id' => 15, 'FirstName' => 'Eshaan5', 'LastName' => 'F5', 'Email' => 'de@b.com', 'Points' => 14)));

//Array converting into JSON
	$json_array = json_encode($persons_array);
?>

<html>
<head>
<title>Assignment</title>
<!--CSS for table-->
<style type="text/css">
 #persons {
    display: table;
    }

  #row  {
    display: table-row;
    }

  #cell {
    display: table-cell;
	width: 100px;
	height: 30px;
	border: 1px solid #000;
	float: left;
    }
</style>
<script type="text/javascript">
var records_per_page = 5;
var php_array = <?php echo $json_array;?>; // getting the JSON
var i=0;
var total_records = php_array.Persons.length; //Length of the JSON records

function table_show(current_page){
	var from = (current_page - 1) * records_per_page;
	var to = from + records_per_page;
	document.writeln("<div id='persons'>");
	document.writeln("<div id='row'><div id='cell'><B>First Name</B></div><div id='cell'><B>Last Name</B></div><div id='cell'><B>Email</B></div><div id='cell'><B>Points</B></div></div>");
	for(i = from; i < to; i++)
	{  
	  document.writeln("<div id='row'>");
	  document.writeln("<div id='cell'>"+php_array.Persons[i].FirstName+"</div><div id='cell'>"+php_array.Persons[i].LastName+"</div><div id='cell'>"+php_array.Persons[i].Email+"</div><div id='cell'>"+php_array.Persons[i].Points+"</div>");
	  document.writeln("</div>");
	}
	document.writeln("</div>");
	document.writeln("<div id='pageNavPosition'></div>")
}

function pagination(current_page){		//Function pagination starts here
	var initial_page = 1;
	var total_page = 0;
	var page = '';
	if(total_records % records_per_page == 0)
	{
		total_page = total_records / records_per_page;
	}
	else if(total_records % records_per_page != 0)
	{
		total_page = ((total_records - (total_records % records_per_page))/records_per_page)+1;
	}
	if(total_page == initial_page)
	{
		page = 'Page: <div id="current_page" style="display: inline">' + initial_page + '</div>';
	}
	else if(total_page > initial_page && current_page == initial_page)
	{
		page = 'Pages: <div id="current_page" style="display: inline">' + initial_page + '</div>';
	}
	else if(total_page > initial_page && current_page > initial_page)
	{
		page = "Pages: <a href='javascript: void(0)' onclick='javascript: pagination(1)'>1</a>";
	}
	
	for(var p = initial_page + 1; p < current_page; p++)
	{
		page += " <a href='javascript: void(0)' onclick='javascript: pagination(" + p + ")'>" + p + "</a>";
	}
	if(current_page > initial_page)
	{
		page += '<div id="current_page" style="display: inline"> ' + current_page + '</div>';
	}
	for(var q = current_page + 1; q <= total_page; q++)
	{
		page += " <a href='javascript:void(0)' onclick='javascript: pagination(" + q + ")' >" + q + "</a>";
	}
	table_show(current_page);
	var element = document.getElementById('pageNavPosition');
    element.innerHTML = page;

}
</script>

</head>
<body>
</body>
</html>
<script type="text/javascript">
	pagination(1);
</script>
Member Avatar for Fest3er

You have a much larger problem. You have your JS code generating PHP code. JS code only runs on the browser, which knows nothing of PHP. PHP code runs only on the server, when can only generate JS code, not execute it. Search through my last 10-15 posts here. One of them should describe this situation well enough.

You need to get straight:

  • Which code is generated (PHP, HTML, and/or JS)
  • Where code is generated (on the server, in the browser)
  • Where code is executed (on the server, in the browser)
  • Where code cannot be executed (HTML & JS on the server, PHP in the browser)

and rewrite your program accordingly.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.