Need to refresh DIV on AJAX call...

I am using an AJAX script to add links to a 'My Links' section on a navigation menu.

I have the links being added to a database, and My Links then displays the relevant records from the database.

The script is working perfectly to update the database, and return a 'link added' message.

However, because it's all done without a page refresh, the My Links section does not update to reflect the changes made.

Can you help sort this out so that links are added/removed to the database (this is already done) AND the My Links section updates to show the current output from the database?

I am willing to pay (a little!) to get this done - for someone who knows what they're doing, I'm sure it's a 5 minute job.

The My links section are held in a div with an id of 'quicklinks', and the AJAX code being used to add to the database is as follows:

/* ---------------------------- */
/* XMLHTTPRequest Enable */
/* ---------------------------- */
function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_type = new XMLHttpRequest();
}
return request_type;
}

var http = createObject();

/* -------------------------- */
/* INSERT */
/* -------------------------- */
/* Required: var nocache is a random number to add to request. This value solve an Internet Explorer cache issue */
var nocache = 0;
function insert(str) {
// Optional: Show a waiting message in the layer with ID login_response
document.getElementById('response_advice').innerHTML = "Adding link..."
// Required: verify that all fileds is not empty. Use encodeURI() to solve some issues about character encoding.
//var stuff = encodeURI(document.getElementById('site_url').value);
//var site_name = encodeURI(document.getElementById('site_name').value);
// Set te random number to add to URL request
nocache = Math.random();
// Pass the login variables like URL variable
http.open('get', 'insert.php?'+str+'&nocache = '+nocache);
http.onreadystatechange = insertReply;
http.send(null);
}
function insertReply() {
if(http.readyState == 4){
var response = http.responseText;
// else if login is ok show a message: "Site added+ site URL".
document.getElementById('insert_response').innerHTML = ''+response;
document.getElementById('response_advice').innerHTML = "Link added"
}
}

/* -------------------------- */
/* REMOVE */
/* -------------------------- */

function remove(str) {
// Optional: Show a waiting message in the layer with ID login_response
document.getElementById('response_advice').innerHTML = "Removing link..."
// Required: verify that all fileds is not empty. Use encodeURI() to solve some issues about character encoding.
//var stuff = encodeURI(document.getElementById('site_url').value);
//var site_name = encodeURI(document.getElementById('site_name').value);
// Set te random number to add to URL request
nocache = Math.random();
// Pass the login variables like URL variable
http.open('get', 'remove.php?'+str+'&nocache = '+nocache);
http.onreadystatechange = removeReply;
http.send(null);
}
function removeReply() {
if(http.readyState == 4){
var response = http.responseText;
// else if login is ok show a message: "Site added+ site URL".
document.getElementById('insert_response').innerHTML = ''+response;
document.getElementById('response_advice').innerHTML = "Link removed"
}
}

Code (markup):

Let me know if you can help!

 

There are atleast 2 ways to achieve what you want.
1. If the database record is created successfully, manipulate the DOM and append the new element representing the new link.
2. If the the database record is inserted successfully, program it to echo all links use the innerHTML property to set the it to the new links list.

 

I think I see where you're going...

Am I right in thinking that where option two is concerned, we're replacing the content of the links div with the new links from the database as opposed to reloading the original content itself?

 

How about this?

Reloads the <div> content at the bottom of the page


Good luck

<div class="links">

		<script type="text/javascript">
		function Ajax(){
		var xmlHttp;
			try{	
			xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
			}
			catch (e){
				try{
				xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
				}
			catch (e){
			    try{
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
				}
			catch (e){
				alert("No AJAX!?");
				return false;
				}
			}
		}

		xmlHttp.onreadystatechange=function(){
			if(xmlHttp.readyState==4){
			document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText;
			setTimeout('Ajax()',4000);
		}
		}

		window.onload=function(){
		setTimeout('Ajax()',4000);
		}
		</script>

		<div id="ReloadThis">
			<?php

			require('./code.php');
			?>
		</div>	

	</div>

Code (markup):