CODEWITHSUNDEEP
javascriptjquery
theMark
theMark

Reputation: 11

Javascript binding on 'click' and preventDefault() not working

Fairly new to JavaScript. When the page loads, it binds the removeFav/addFav function to the click event of the anchor tag. Everything works as intended, but when user clicks on the link, it takes user to the top of the page. I tried a preventDefault() in different places of each of the functions. It would stop the click default, but it would prevent the rest of the code from running or break the functionality.

Is preventDefault() still the right way to go? Where should preventDefault() go? How can I stop the page from returning to the top every time the link is clicked. Any help would be appreciated.

JavaScript Code:

 // Add a favorite
 function addFav() {
    var id = $(this).data('id');
    var url = '/listings/' + id + '/favorite';
    $.ajax({
      url: url,
      type: 'put',
      success: function(){
        $('this')
          .addClass('active')
          .off('click')
          .on('click', removeFav)
        ;
        console.log("success in add function");
      },
      error: function() {
        console.log("error in add function");
      }
   });
 }

  // Remove a favorite
  function removeFav() {
    var id = $(this).data('id');
    var url = '/listings/' + id + '/unfavorite';
    $.ajax({
      url: url,
      type: "post",
      dataType: "json",
      data: {"_method":"delete"},
      success: function(){
        $('this')
          .removeClass('active')
          .off('click')
          .on('click', addFav)
        ;
      console.log("success in remove function")
      },
      error: function() {
        console.log("error in remove function")
      }
     });
  }

  // Attach the add or remove event handler to favorite links
  function attachFavHandler() {
   $('a#fav').each( function() {
    var status = $(this).hasClass('active');
    if (status) {
      $(this).on('click', removeFav);
    } else {
      $(this).on('click', addFav);
    }
    console.log(status)
   });
  }

  // Lets get the 'favorites' party started
  attachFavHandler();

Rails Code:

          <% if user_signed_in? %>
            <% if current_user.favorites.where(:listing_id => listing.id).first.nil? %>
              <%= link_to "", "", :id => "fav", :class => "", :'data-id' => "#{listing.id}" %>
            <% else %>
              <%= link_to "", "", :id => "fav", :class => "active", :'data-id' => "#{listing.id}" %>
            <% end %>
          <% end %>

Upvotes: 0

Views: 1513

Answers (1)

Joerg
Joerg

Reputation: 3823

What you need to do is call the preventDefault() method on the event itself. To get the event, you'll need to pass in the event to your handlers - which the event bindings already do automatically.

So all you need to do is use this event in your handlers.

function removeFav(e) {
    e.preventDefault()
    ...
}

Upvotes: 1

Related Questions