Member Avatar for lcyew

I have a table displaying some leave information about staff. In the table, the value for "from" date, "to" date and leave entitlement for staff is retrieved from the database and are allowed for update. I'm using onChange function to keep the table updated wherever there is any of the value is updated. Everything is working fine.

However, there is a problem is that....every time the page is reloaded (after onChange function is called), it is "scrolled back" to the top of the page again. This causes inconvenient, especially when i'm having a lengthy page (the table is a long listed one).

Is there any way i can improve this, to have a more convenient webpage for my users?

Thanks for any help:)

  • 3 Contributors
  • 4 Replies
  • 93 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by kylegetson

Recommended Answers

All 4 Replies

Member Avatar for diafol

I think this deserves to go into the Javascript forum. It ain't php.

Put an anchor in the table tag:

<table><a name="datetable"></a>

Your refresh code:

window.location="http://www.example.com/dates.php#datetable";

Obviously, you'd change the url above to the page in question, just keep the '#datetable' on the end.

Member Avatar for kylegetson

You could use an ajax request, so the page wouldnt reload, it would just be sent without the user knowing. You wouldnt want that to be done onChange though, you would need to change it to onBlur.

If ajax isnt for you, the anchor would be the another solution, your users will still notice a slight 'jump' but it would bring them back to where they were.

Member Avatar for lcyew

First, sorry if i posted this in this wrong place.

Thanks for ardav's solution, I've tried and it's working.

kylegetson, ajax request method as you mentioned, could you provide some example on how should i use it?

Thanks you guys for helping.

Member Avatar for kylegetson

Heres the sample from SACK Simple Ajax Code Kit

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>Simple AJAX Code-Kit (SACK) Demonstration</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="author" content="Gregory Wild-Smith" />
	<meta name="copyright" content="Gregory Wild-Smith" />
	<style type="text/css" media="screen">
		@import url( style.css );
	</style>
	<script type="text/javascript" src="tw-sack.js"></script>
<script type="text/javascript">
var ajax = new sack();

function whenLoading(){
	var e = document.getElementById('replaceme'); 
	e.innerHTML = "<p>Sending Data...</p>";
}

function whenLoaded(){
	var e = document.getElementById('replaceme'); 
	e.innerHTML = "<p>Data Sent...</p>";
}

function whenInteractive(){
	var e = document.getElementById('replaceme'); 
	e.innerHTML = "<p>getting data...</p>";
}

function whenCompleted(){
	var e = document.getElementById('sackdata'); 
	if (ajax.responseStatus){
		var string = "<p>Status Code: " + ajax.responseStatus[0] + "</p><p>Status Message: " + ajax.responseStatus[1] + "</p><p>URLString Sent: " + ajax.URLString + "</p>";
	} else {
		var string = "<p>URLString Sent: " + ajax.URLString + "</p>";
	}
	e.innerHTML = string;	
}

function doit(){
	var form = document.getElementById('form');
	ajax.setVar("myTextBox", form.mytext.value); // recomended method of setting data to be parsed.
	ajax.requestFile = "sackdemo.php";
	ajax.method = form.method.value;
	ajax.element = 'replaceme';
	ajax.onLoading = whenLoading;
	ajax.onLoaded = whenLoaded; 
	ajax.onInteractive = whenInteractive;
	ajax.onCompletion = whenCompleted;
	ajax.runAJAX();
}
</script>
</head>
<body>
<h1>SACK Demo Page</h1>
<p><small>&#xA9;2005 Gregory Wild-Smith (http://www.twilightuniverse.com/)</small></p>
<p>Here you can play around with some of the options of SACK and it gives some example code on how to use it. This is a really basic example, but it should be a good starting point. Enjoy playing with my SACK.</p>
<h2>Playground</h2>
<form id="form" method="post" action="sackdemo.php">
<fieldset><legend>Play with these to change the output...</legend>
	<label for="method">Method</label>
	<select id="method" name="method">
		<option value="GET">GET</option>
		<option value="POST">POST</option>
	</select>
	<label for="mytext">Mytext(custom text)</label><textarea id="mytext" name="mytext">Some Dummy Text...</textarea>
</fieldset>
	<input type="submit" onClick="doit(); return false;" onDblClick="doit(); return false;" />
</form>
<div id="replaceme"></div>
<div id="sackdata"></div>
</body>
</html>

sackdemo.php

<?php
ob_start();
	print_r($_POST);
$postdata = ob_get_clean();

ob_start();
	print_r($_GET);
$getdata = ob_get_clean();

ob_start();
	print_r($_SERVER);
$serverdata = ob_get_clean();

$string = "<p>The following data was recieved:</p>\n<table id=\"demo\">\n<thead><tr><th>POST data</th><th>GET data</th></tr></thead>\n<tr><td>$postdata</td><td>$getdata</td></tr>\n</table>\n";
echo $string;
?>

thats a basic example of an ajax request. Doing your post this way will avoid having to refresh the page. Youll want to use onBlur not onChange to call the doit() function, that way it sends the request when their focus leaves the input box.

Hope that helps

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.