How can I click a link but not reload the page?

Question

I have an ordering system that everytime you click the up or down arrow it adds 1 or removes 1 from the order of the list. Each time the link is clicked the page refreshes.

is there a way to avoid the refresh but still update and show the new order on the page?

My list

<div class="row select-order">
    <ol>
        @foreach (var item in Model)
        {
            <li>                    
                    @item.TaskName
                    @if (item.TaskType != (short)OBTaskTypes.SignOn && item.TaskType != (short)OBTaskTypes.Finalize)
                    {

                        <a href="@Url.Action("SetTaskOrder", "OBClientSetupTasks", new { id = item.SetupID, tid = item.TaskID, oldOrder = (short)item.TaskOrder, newOrder = ((short)item.TaskOrder + 1)})"><i class="fa fa-arrow-down"></i></a>
                        <a href="@Url.Action("SetTaskOrder", "OBClientSetupTasks", new { id = item.SetupID, tid = item.TaskID, oldOrder = (short)item.TaskOrder, newOrder = ((short)item.TaskOrder - 1) })"><i class="fa fa-arrow-up"></i></a>
                    }                    
            </li>
        }
    </ol>
</div>

Each time one of those href's is clicked it sets the order and refreshes.

Answer 1

I would really look at it one more time and be sure that you need use an anchor tag for this. Maybe a button would be better. If it has to be, then you have to prevent the default event from happening.

http://api.jquery.com/event.preventdefault

$('.select-order a').click(function( event ) {
  event.preventDefault();
  // Do other stuff if needed
});

Demo: https://jsfiddle.net/wxddszct