ajax callback function is empty

Question

It's my first time on StackOverflow, please forgive me if I forget some important information or if my question sounds stupid!

I am building a web site which generates a list once the user writes a word and hits the "Send" button. Php is responsible for extracting the required data and returning it to the web page as a list.

My problem is that I then want to pass this data in a js function. I have read a lot of answers on StackOverflow concerning this, and it sounded like a callback function is what I needed. However, my js function keeps telling me that my node is null; it seems the data returned from ajax is not accounted for.

Here are some parts of my code:

<script>
        var xmlhttp;
        function loadXMLDoc(cfunc){
            if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp=new XMLHttpRequest();
            } else  {// code for IE6, IE5
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            var us = document.getElementById("user").value;
            var ur = document.getElementById("wiki").value;
            xmlhttp.onreadystatechange = cfunc;
            xmlhttp.open("GET","contributions_old.php?user="+us+"&wiki="+ur+"",true);
            xmlhttp.send();
        }
        function myFunction()   {
            loadXMLDoc(function() {                     
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                    document.getElementById("result").innerHTML=xmlhttp.responseText;
                    var parser = new DOMParser ();
                    var responseDoc = parser.parseFromString (xmlhttp.responseText, "text/html");
                    var text1 = responseDoc.getElementById('old1').value;
                    var text2 = responseDoc.getElementById('new1').value;

                    var dmp = new diff_match_patch();
                    dmp.Diff_Timeout = 0;

                    // No warmup loop since it risks triggering an 'unresponsive script' dialog
                    // in client-side JavaScript
                    var ms_start = (new Date()).getTime();
                    var d = dmp.diff_main(text1, text2, false);
                    var ms_end = (new Date()).getTime();

                    var ds = dmp.diff_prettyHtml(d);
                    document.getElementById('outputdiv').innerHTML = ds + '<BR>Time: ' + (ms_end - ms_start) / 1000 + 's';  
                }                   
            });
        }
    </script>

It's of course the Send button that calls myFunction() at the bottom of my web page, once the user has entered a word. I have also verified that my web page, once the list has been generated, has the divs with "new1" and "old1" as ids (they are generated through my php code).

Any help would be really appreciated! I feel like I've tried everything!

Thank you! :)

Answer 1

Highly recommend using jQuery or some other lib for this.

var url = "contributions_old.php?user=" + $("#user").val() + "&wiki=" + $("#wiki").val();
$.get(url);