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 class="fa-star", but if no record is found, then the data-mediatype="off" and the 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.

1 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);
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');
}
}
});

});


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.