How to express jquery ajax call with only javascript?

Question

Can you help me convert this jquery to javascript? Thanks.

    <script>
        $(document).ready(function() {
            $("a.false").click(function(e) {
                $(this).closest("tr.hide").hide("slow");
                var main_id = this.title;
                var display = "false";
                e.preventDefault();
                $.ajax({
                    url: "/useradminpage",
                    data: {main_id: main_id, display: display},
                    success: function(data) {
                    //display_false();
                    }
                });
            });
        });
    </script>

Answer 1

Yes you can, but your going to have to learn ES5, DOM4 & XHR2.

// Create the toArray utility
var toArray = function (obj) {
    var arr = [];
    for (var i = 0, len = obj.length; i < len; i++) {
        arr[i] = obj[i];    
    }
    return arr;
};

You need an toArray utility to manipulate NodeList and HTMLCollection.

var as = toArray(document.getElementsByClassName("false")).filter(function (el) {
    return el.tagName === "A";
});

Here you need to get all the class='false' elements and then filter then by whether they are <a> elements.

as.forEach(function (el) {
    var parentTr = el.parentNode;
    do {
        if (parentTr.tagName === "TR" && parentTr.classList.contains("hide")) {
            return; 
        }
        parentTr = parentTr.parentNode;
    } while (parentTr !== null);

For each element you want to find the parent <tr>. You do this by looping up the parentNode chain as shown. You also need to handle the parentTr === null case more elegantly

    el.addEventListener("click", function (ev) {
        // Make a CSS3 animation class
        parentTr.classList.add("hide-slow");
        var main_id = this.title;
        var display = "false";

Attach a click handler. Change your jQuery hide animation to be done with hard ware accelerated CSS3

        var xhr = new XMLHttpRequest();
        xhr.open("GET", "/useradminpage");
        xhr.addEventListener("readystatechange", function (ev) {
            if (xhr.readyState === XMLHTTPRequest.DONE) {
                // display_false();   
            } 
        });
        xhr.send({
            main_id: main_id,
            display: display 
        });

Open a XHR2 request. Point it at your url with the GET method. Then attach a readystatechange listener and finally send data down the request.

    }); 
});

Disclaimer: Browser support is a pain. You will need the following shims

• ES5-shim
• DOM-shim
• XHR2 shim doesn't exist. I'll write one at some point.

Further reading:

The interfaces I have used are

• Element
• EventTarget
• XMLHTTPRequest

You should also read up on ES5.1