How to implement up and down voting of a particular thread

+1 vote
If you have used Edureka for a while, you surely have used the function of vote up and down of the question and answer. I notice Edureka uses <a> anchor. But I don't know how to POST the data to server. I think it's JavaScript associated with this <a>, but I can't find it. How can I implement it?
Jun 3, 2020 in Java-Script by kartik
• 37,520 points
1,305 views

1 answer to this question.

0 votes

Hello @kartik,

Yes, JavaScript is involved. There are two parts: Hooking up a handler for the click events on the voting "buttons", and sending data to the server.

Here's a complete example code:

HTML:

<div class="article" data-itemid="427">
<a href="voteup"   class="vote up"  >Up</a>
<a href="votedown" class="vote down">Down</a>
<!-- ...the contents of the item... -->
</div>

JavaScript:

document.addEventListener("click", function(event) {
    // Regardless of the below, we handle the event, so "consume" it
    event.stopPropagation();
    event.preventDefault();

    // Get the anchor element
    var voteLink = event.target.closest("a.vote");
    if (!voteLink) {
        // Didn't find one, bail
        return;
    }

    // See if the vote has already been done or is in progress
    if (voteLink.classList.contains("done") || voteLink.classList.contains("inprogress")) {
        // Ignore the click, possibly tell the user why
        return;
    }

    // Get the vote type
    var voteType = voteLink.classList.contains("up") ? "up" : "down";

    // Get the item we"re voting on
    var item = voteLink.closest(".article");

    // Get its ID
    var itemId = item.getAttribute("data-itemid");

    // If we didn"t get an ID...
    if (!itemId) {
        // ...report error
        return;
    }

    // Mark "in progress" and initiate the vote; action continues
    // in our callbacks below
    voteLink.classList.add("inprogress");

     var body = new FormData();
    body.append("itemId", itemId);
    body.append("voteType", voteType);
    fetch("savevote", {
        method: "POST",
        body:   body
    })
    .then(function(res) {
        if (!res.ok) {
            throw new Error("HTTP error " + res.status);
        }
        return res.text(); // or `res.json()` if you return JSON
    })
    .then(function(data) {
        if (data === "ok") { // Or whatever
            voteLink.classList.add("done");
        } else {
            // Report an error to the user, the server couldn"t record the vote
        }
    })
    .catch(function(error) {
        // Ajax failed, handle/report problem
    })
    .finally(function() {
        // Not in progress anymore
        voteLink.classList.remove("inprogress");
    });
});

 Hope it helps!!

answered Jun 3, 2020 by Niroj
• 82,880 points

Related Questions In Java-Script

0 votes
1 answer

How to implement useEffect() so the list on the front page updates only when a name change has been detected?

Hello @kartik, Instead of passing the entire object ...READ MORE

answered Jun 1, 2020 in Java-Script by Niroj
• 82,880 points
961 views
0 votes
1 answer

How to list the properties of a JavaScript object?

Hii @kartik, Use Reflect.ownKeys(): var obj = {a: 1, b: ...READ MORE

answered Jun 8, 2020 in Java-Script by Niroj
• 82,880 points
995 views
0 votes
1 answer

How to replace all occurrences of a string?

Hello @kartik, As an alternative to regular expressions ...READ MORE

answered Aug 28, 2020 in Java-Script by Niroj
• 82,880 points
813 views
0 votes
1 answer

How can I make a div stick to the top of the screen once it's been scrolled to?

Hello @kartik, Using javascript: var initTopPosition= $('#myElementToStick').offset().top; ...READ MORE

answered Sep 4, 2020 in Java-Script by Niroj
• 82,880 points
806 views
+1 vote
1 answer

How to make anchor tag with routing using Laravel?

Hey @kartik, First you have to go to ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,880 points
22,937 views
0 votes
1 answer

What is redirection in Laravel?

Named route is used to give specific ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,880 points
2,959 views
0 votes
1 answer

How to install Laravel via composer?

Hello, This is simple you just need to ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,880 points
2,894 views
+1 vote
1 answer

What are named routes in Laravel and How can specify route names for controller actions?

Hey @kartik, Named routing is another amazing feature of ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,880 points
44,358 views
0 votes
1 answer

How to Change the selected value of a drop-down list with jQuery?

Hello @kartik, With hidden field you need to ...READ MORE

answered Sep 9, 2020 in Java-Script by Niroj
• 82,880 points
2,812 views
0 votes
1 answer

How can I send a message to a particular client with socket.io?

Hii, You can try the code below: io.to(socket.id).emit("event", data); whenever ...READ MORE

answered Apr 27, 2020 in Java-Script by Niroj
• 82,880 points
27,803 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP