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! :)

Any reason why you're manually writing the AJAX code instead of using one of the many thoroughly tested, well documented, community supported libraries such as jQuery? — webbiedave
– webbiedave, Commented Jul 19, 2013 at 19:45
No harm in doing this in vanila JS, especially if you aren't using jQuery elsewhere. Have you tried using an absolute path to your contributions_old.php page. — jmiraglia
– jmiraglia, Commented Jul 19, 2013 at 20:09
I got the ajax code from w3School, since they have a thorough tutorial on how it works, I felt more comfortable using it this way. Will writing it with jQuery solve my problem? I think the path to contributions_old is working since my page is updated with the list extracted from it? — user2600775
– user2600775, Commented Jul 20, 2013 at 1:00

Jake N · Accepted Answer · 2013-07-19 20:06:05Z

1

Highly recommend using jQuery or some other lib for this.

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

edited Jul 19, 2013 at 20:06

Jake N

10.6k12 gold badges69 silver badges114 bronze badges

answered Jul 19, 2013 at 20:05

kcathode

943 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

John Dvorak Over a year ago

umm... if you want to suggest a library, you should do it properly and use $.serialize or (better yet) the data parameter.

kcathode Over a year ago

@JanDvorak OP doesn't mention submitting the entire form, just 2 params.

John Dvorak Over a year ago

in which case I recommend using the data parameter

user2600775 Over a year ago

I will try rewriting the code using jQuery. Thank you guys for your suggestions, I'll let you know if it works! :)

Collectives™ on Stack Overflow

ajax callback function is empty

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related