locked
Best JS scripting to use RRS feed

  • 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!!

    Tuesday, April 10, 2018 5:37 PM

All replies

  • 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

    Wednesday, April 11, 2018 3:24 AM
  • 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>
    }

    Wednesday, April 11, 2018 8:05 PM
  • 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

     

    Tuesday, April 17, 2018 2:35 AM
  • 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.

    Wednesday, April 18, 2018 2:13 PM
  • User-333609119 posted

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

    Thank you!

    Thursday, April 26, 2018 10:53 PM
  • 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/

    Thursday, April 26, 2018 11:02 PM
  • 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?

    Monday, September 9, 2019 11:50 PM
  • 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>
    Tuesday, September 10, 2019 8:39 PM