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>

jQuery is JavaScript. You can read its source code if you want to extract certain bits to use without loading the whole library. — Quentin
– Quentin, Commented Oct 29, 2011 at 18:30
What value does it give it to you to not use jQuery?? jQuery is JavaScript and renders your code much easier to read, more maintainable, cross-browser...all in all, less pain in writing certain scenarios and less bugs. — Juri
– Juri, Commented Oct 29, 2011 at 18:42
@Juri really? "easier to read and more maintainable". Is my example really harder to read? — Raynos
– Raynos, Commented Oct 29, 2011 at 18:46
@Raynos It is -- not that it's not a well written example -- but jQuery [if used correctly], like any higher-level abstraction, can make code "easier and more maintainable" ;-) [jQuery -- or other such libraries -- also takes care of a number of browser quirks including even trivial ones like addEventListener vs attachEvent.] — user166390
– user166390, Commented Oct 29, 2011 at 18:58
@Raynos I'd say: yes :). The problem is majorly if you have a good JavaScript programmer he codes also without jQuery and might be productive and write good code as well. But if you take the avg. programmer, he'll commit much more bugs, write uglier, less maintainable, horrifying code and would probably need a lot longer. On the other side, jQuery would provide him a higher abstraction, he has to write less code (hence commit to less bugs) and the code will result in being more maintainable and readable as well :) — Juri
– Juri, Commented Oct 29, 2011 at 19:06

Raynos · Accepted Answer · 2011-10-29 18:59:38Z

5

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

You should also read up on ES5.1

edited Oct 29, 2011 at 18:59

answered Oct 29, 2011 at 18:39

Raynos

170k57 gold badges359 silver badges399 bronze badges

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

4 Comments

user166390 Over a year ago

Some newer browsers support document.querySelectorAll.

Raynos Over a year ago

@pst yes but you should only use QSA when you need it rather then when you are lazy.

user166390 Over a year ago

@Raynos I use libraries because I'm lazy. I don't care what the library uses as long as it "just works" :-) Just pointing it out, largely because I just learned of it a week ago...

Raynos Over a year ago

@pst I like hand optimising! I also dont know whether I should use QSA for QSA("tag.class")

Collectives™ on Stack Overflow

How to express jquery ajax call with only javascript?

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