jquery to javascript converted but not working

Question

my initial code was in jquery + ajax and i tried to write it in javascript but its not working now. Can anyone tell me where's the mistake and why its not showing anything when i run through the server? i checked in the console and there is no error either

my code in JQ

$(document).ready(function(){

    findteacher = function() {
        var file = "course.php?course="+ $("#course").val();
        $.ajax({
            type : "GET",
            url : file,
            datatype : "text",
            success : function(response) {
                var file2 = response.split(",");
                $("#courseInfo").html("The course: " + file2[0] + " Taught by: " + file2[1]);
            }
        });
    }

    clear = function() {
        $("#courseInfo").html("");
    };

    $("#course").click(clear);
    $("#go").click(findteacher);
});

My code in JS

function findteacher () {

    var file = "course.php" + document.getElementById('course');

    function callAjax(){
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function(){
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
                document.getElementById('courseInfo').innerHTML =   xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", file, true);
        xmlhttp.send(null);

        var file2 = callAjax.split(",");
        document.getElementById('courseInfo').text("The course: " + file2[0] + " Taught by: " + file2[1]);
    }
    document.getElementById('go').onclick(findteacher)
}   
window.onload = findteacher;

ok its fixed but now i get this in the console Uncaught RangeError: Maximum call stack size exceeded — chichiKoala
– chichiKoala, Commented Apr 27, 2015 at 22:06
My guess is you're calling findteacher() inside findteacher. — Barmar
– Barmar, Commented Apr 27, 2015 at 22:10

Barmar · Accepted Answer · 2015-04-27 22:12:14Z

1

You're missing ?course= in file. You're not getting .value of the course element. callAjax.split(",") makes no sense -- callAjax is a function, not a string -- you should be using xmlhttp.responseText.split(",") in the onreadystatechange function. onclick is a property you assign to, not a method, so .onclick(findteacher) should be onclick = findteacher; and you shouldn't do this inside the function, it should be done just once when the page is loaded.

function findteacher () {

    var file = "course.php?course=" + document.getElementById('course').value;

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
            var file2 = xmlhttp.responseText.split(",");
            document.getElementById('courseInfo').innerHTML = "The course: " + file2[0] + " Taught by: " + file2[1];
        }
    }
    xmlhttp.open("GET", file, true);
    xmlhttp.send(null);
}   

function clear () {
    document.getElementById('courseInfo').innerHTML = '';
}

window.onload = function() {
    document.getElementById('go').onclick = findteacher;
    document.getElementById('course').onclick = clear;
}

edited Apr 27, 2015 at 22:12

answered Apr 27, 2015 at 22:07

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

1 Comment

chichiKoala Over a year ago

sir, you are a genius! thank you so much! btw there is a typo on funtion clear()

Collectives™ on Stack Overflow

jquery to javascript converted but not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related