Refreshing only 1 DIV via PHP after submit form

Question

I have a comments board on my page, to which I load different topics according to the page the user is on with XMLHttpRequest in a changeTopic() function. I originally had this at the end of my submit form php:

header('Location: http://' . $_SERVER['HTTP_HOST'] . $_POST['page']);

The problem is that I don't want to refresh the whole page, only the DIV that contains the messages. I tried running the changeTopic() function by inserting it inside script tags with echo. For one, I couldn't get .$_GET['topic']. working inside echo even if I made a variable of it first, but also I tried running the function by hard inserting one of the possible values with the following results:

1) While the messages section refreshed right, I lost the form as it's contained in the index.html while I only load the messages from an external gettopic.php with query string.

2) I got a weird result where I lost an external file that was loaded into a completely different div altogether. This file changes the hash of the main page, which is checked with every refresh and the right file is loaded according the hash, so using the whole page refresh never resulted in this.

// EDIT

function changeTopic(topic) {
        if (topic=="") {
            document.getElementById("messagelist").innerHTML="";
            return;
        }
        if (window.XMLHttpRequest) {
            xmlhttp=new XMLHttpRequest();
        }
        else {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                document.getElementById("messagelist").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("POST", "gettopic.php?t="+topic,true);
        xmlhttp.send();
    }

The main application on my page is a SVG map which I've done with RaphaelJS. The user can load information pages into another div 'info' from this SVG map. The pages are loaded with a similar function which in addition changes the #hash and runs the changeTopic() as well to change the message board so people can have a conversation about each topic.

The PHP form takes the normal filled info as well as the hidden 'pageid' which is set by the current page the user is browsing, and sends it to the database. The different messages are sorted by this pageid so the changeTopic() function only brings the right messages: gettopic.php?t=topic ('pageid').

After submitting the form I'd like only the messagespart to refresh and the form to clear. At the moment it's either a whole page refresh (user looses their position on the SVG map) or partial refresh where I lose the form (get a blank spot instead) and that weird information-page missing.

Answer 1

you can do something like this:

var ajaxfoo = function(obj) {
    var xmlHttp = null;
    try {
        xmlHttp = new XMLHttpRequest();
    }catch(e) {
        try {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }catch(e) {
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            }catch(e) {
                xmlHttp = null;
            }
        }
    }if (xmlHttp) {
        obj.method = obj.method.toUpperCase();
        xmlHttp.open(obj.method, obj.url, true);
        xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        if(obj.method == 'POST') {
            if(typeof(obj.params) != 'undefined') {
                xmlHttp.setRequestHeader("Content-length", obj.params.length);
            }
        }
        xmlHttp.setRequestHeader("Connection", "close");
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4) {
                var json = eval(xmlHttp.responseText);
                if(json.success) {
                    if(typeof(obj.success) == 'function'){obj.success(xmlHttp.responseText);}
                }
                else {
                    if(typeof(obj.failure) == 'function') {obj.failure(xmlHttp.responseText);}
                }
            }
        };
        if(obj.method == 'POST' && typeof(obj.params) != 'undefined') {
            xmlHttp.send(obj.params);
        }
        else {
            xmlHttp.send(null);
        }
    }
};

function callfoo(topicname) {
    ajaxfoo({
        method: 'GET',
        url: 'gettopic.php?t='+topicname,
        success: function(response) {
            var json = eval(response);
            alert('success callback function! '+json.data);
        },
        failure: function(response) {
            var json = eval(response);
            alert('failure callback function! '+json.data);
        }
    });
}

and in

success: function(response) {
            var json = eval(response);
            alert('success callback function! '+json.data);
        },

you can add your innerHTML stuff :)

the gettopic.php

should then echo something like:

{success: true, data: [{id: 1, "title": "test title", "description": "moo"},{id: 2, "title": "test title", "description": "moo"},{id: 3, "title": "test title", "description": "moo"}]}

And the you can access this by calling

json.data[0].title
json.data[1].title
json.data[2].title
json.data[0].description
...

so you can simply build your innerHTML stuff by doing something like

doc....innerHTML = '<h2>'+json.data[0].title+'</h2>';

Answer 2

Use jQuery - great tool. It could look like

$(function(){
    //when you want to reload your div, just put this line
    $("#div_element").load('your_new_page.php');    
});

and that's it !

Answer 3

I'm quite confused about what you are doing, but XMLHttpRequest should be the one running changeTopic() in the readystatechange handler.