Rendering a link in classic ASP and then changing it with jquery

Question

I have a link that i am rendering on page load using an if statement in classic asp, something like the following:

// SQL stuff up here

<% if not rs.eof then %>
    <a href="#" class="link" data-mediatype="on" data-id="<%=somevar%>"><i class="fa-star"></i></a>
<% else %>
    <a href="#" class="link" data-mediatype="off" data-id="<%=somevar%>"><i class="fa-star-o"></i></a>
<% end if %>

I'm also using a jQuery click event to post some of the data to an ajax request, like so;

$(document).ready(function(){

    $('.link').click(function(e) {

        e.preventDefault();

        var mediatype = $(this).data('mediatype');
        var id = $(this).data('id');

        $.ajax({
            url: '/post/url/here.asp',
            data: { 'media_type': mediatype, 'id': id },
            type: 'POST',
            success: function(result) {
                location.reload();
            }
        });

    });

});

If a record is found then the data-mediatype="on" and the <i> class="fa-star", but if no record is found, then the data-mediatype="off" and the <i> class="fa-star-o"

Then when you click the link, it posts to the ajax.

On success of the ajax call, the page reloads using location.reload() and it works.

Ideally I would like to do this without a page reload. but im not sure how to go about it as the SQL needs to run to decide which link to show.

Any help would be greatly appreciated.

Answer 1

I don't think you need to reload the whole page - just toggle the clicked link to be the other link (unless the click can change multiple links - it is unclear):

$('.link').click(function(e) {

        e.preventDefault();
        var $clicked = $(this),
            $icon = $clicked.children('i');

        var mediatype = $clicked.data('mediatype');
        var id = $clicked.data('id');

        $.ajax({
            url: '/post/url/here.asp',
            data: { 'media_type': mediatype, 'id': id },
            type: 'POST',
            success: function(result) {
              if (mediaType == 'on') {                /* swap icon and mediaType */
                $clicked.data('mediatype', 'off');
                $icon.removeClass('fa-star').addClass('fa-star-o');
              } else {
                $clicked.data('mediatype', 'on');
                $icon.removeClass('fa-star-o').addClass('fa-star');
              }
            }
        });

    });