Best JS scripting to use

Question

User-333609119 posted

Hello my dear friends!

I'm looking for the best/most efficient JS client side scripting language that will allow users on my fantasy sports site to add athletes from one table to another, or remove athletes from their table.

https://imgur.com/XxU8Gpy

Will add more info if/when needed.

Any info would be greatly appreciated, thank you!!

Answer 1

User1400794712 posted

Hi nbrglobalinc,

Do you mean that move athletes from one div to another? We can get the html element of this athlet and move it to another div. For example:

<div id="ChooseLeft" style="border:1px grey solid; width:48%;min-height:100px;display:inline-block;float:left;">
    <p value="1"><span>A</span><input type="button" value="+" class="add" onclick="move(this)" /><input type="button" value="-" class="remove" onclick="remove(this)" /></p>
    <p value="2"><span>B</span><input type="button" value="+" class="add" onclick="move(this)" /><input type="button" value="-" class="remove" onclick="remove(this)" /></p>
    <p value="3"><span>C</span><input type="button" value="+" class="add" onclick="move(this)" /><input type="button" value="-" class="remove" onclick="remove(this)" /></p>
    <p value="4"><span>D</span><input type="button" value="+" class="add" onclick="move(this)" /><input type="button" value="-" class="remove" onclick="remove(this)" /></p>
</div>
<div id="ChooseRight" style="border:1px grey solid; width:48%;min-height:100px;display:inline-block;"></div>
<script>
    function move(button) {
        var p = button.parentElement;
        if (button.parentElement.parentElement.id == "ChooseLeft") {
            document.getElementById("ChooseRight").append(p)
        } else {
            document.getElementById("ChooseLeft").append(p)
        }
    }
    function remove(button) {
        button.parentElement.remove();
    }
</script>

Best Regards,

Daisy

Answer 2

User-333609119 posted

Almost! But more like FanDuel, where when you select an athlete from the 1st table of all available athletes, you click on the + button and it adds that athlete to your roster on the right, which gives you the ability to click the - button to remove them.

I have started an attempt at it using ajax + jQuery:

<input type="button" id="addAthleteToRoster" class="btn-success" value="+" />

@section Scripts {
    <script>
        $(document).ready(function () {
            $('#addAthleteToRoster').click(function () {
                $.ajax({
                    type: "POST",
                    url: "@(Url.Action("AddAtheleteToRoster", "Contest"))"
                });
            });
        });
    </script>
}

Answer 3

User283571144 posted

Hi nbrglobalinc,

According to your description, I couldn't understand your requirement clearly.

Could you please tell me why you want to use ajax?

In my opinion, we could use jquery directly to achieve your requirement.

Like below image shows:

If you could post more details about your requirement, it will be more easily for us to find the solution.

Best Regards,

Brando

 

Answer 4

User-333609119 posted

I have a fantasy sports site, like FanDuel, that I have written in C#/.NET Core/Razor. When entering a contest, the user is given a list of athletes they can add to their own roster. The image example you have given would be a perfect fit for when a user adds an athlete, and if the user doesn't want that athlete, they can remove them from their roster, which adds them back to the list of available athletes.

Answer 5

User-333609119 posted

Anyone have an idea of how to implement Brando's reply above?

Thank you!

Answer 6

User2053451246 posted

Have you looked into jQuery multiselect.js?  I've had great results with it and it's very easy to implement.

http://loudev.com/

Answer 7

User-333609119 posted

I got this to work after taking some time off from it.

Is there a way to do this from one table to another table?

Answer 8

User-333609119 posted

Was able to get this to work in tables.

<script>
    function insert(o) {
        var p = $(o).closest('tr');
        copyTable = $('#chooseRight tbody');
        cloneRow = p.clone();
        copyTable.append(cloneRow);
        p.remove();
    }
</script>