CODEWITHSUNDEEP
javascriptc#ajaxasp.net-mvcrazor
BiGBaDWolF
BiGBaDWolF

Reputation: 39

Add/Remove button Ajax only show one

I have 2 buttons with this ajax and they both show on the page,how can i make it that only Add to favorites button is shown and when i click it the Remove From Favorites button takes it place ?

function Fav(gameId) {
  var url = '@Url.Action("AddToCollection", "UserCollection")';
  $.ajax({
    url: url,
    type: 'GET',
    data: {
      gameId: gameId,
    },
  });
};

function UnFav(gameId) {
  var url = '@Url.Action("RemoveFromCollection", "UserCollection")';
  $.ajax({
    url: url,
    type: 'GET',
    data: {
      gameId: gameId
    },
  });
};

<button class="btn-link" onclick="Fav(@Model.Id)"><i class="fa fa-heart"></i>Add To Collection</button>

<button class="btn-link " onclick="UnFav(@Model.Id)"><i class="fa fa-heart-broken"></i>Remove From Collection</button>

Upvotes: 1

Views: 261

Answers (2)

BiGBaDWolF
BiGBaDWolF

Reputation: 39

This is the final result that i was looking for

const urls = {
  "AddToCollection": '@Url.Action("AddToCollection","UserCollection",new { gameId = Model.Id })',
  "RemoveFromCollection": '@Url.Action("RemoveFromCollection","UserCollection",new { gameId = Model.Id })'
}

function Fav(gameId, action) {
  $.ajax({
    url: urls[action],
    type: 'GET',
    data: {
      gameId: gameId,
    },
  });
};

$(function() {
  const whichButton = "AddToCollection"; // set which one to show here using whatever method

  $(".btn-link[data-action=" + whichButton + "]").show();
  $(".btn-link").on("click", function() {
    Fav(this.dataset.id, this.dataset.action)
    $(this).siblings().hide();
    $(this).siblings().show();
    $(".btn-link[data-action=" + whichButton + "]").hide();
  });
});
.hide {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="favDiv">
  <button class="btn-link hide" data-action="AddToCollection" data-id=""><i class="fa fa-heart"></i>Add To Collection</button>
  <button class="btn-link hide" data-action="RemoveFromCollection" data-id=""><i class="fa fa-heart-broken"></i>Remove From Collection</button>
</div>

Upvotes: 0

mplungjan
mplungjan

Reputation: 178215

Try something like this.

DRY (Don't Repeat Yourself)

const urls = {
  "AddToCollection": '@Url.Action("AddToCollection","UserCollection")',
  "RemoveFromCollection": '@Url.Action("RemoveFromCollection","UserCollection")'
}

function Fav(gameId, action) {
  $.ajax({
    url: urls[action],
    type: 'GET',
    data: {
      gameId: gameId,
    },
  });
};

$(function() {
  const whichButton = "AddToCollection"; // set which one to show here using whatever method
  
  $(".btn-link[data-action="+whichButton+"]").show(); 
  $(".btn-link").on("click", function() {
    Fav(this.dataset.id, this.dataset.action)
    $(this).siblings().hide();
  });
});
.hide { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="favDiv">
  <button class="btn-link hide" data-action="AddToCollection" data-id=""><i class="fa fa-heart"></i>Add To Collection</button>
  <button class="btn-link hide" data-action="RemoveFromCollection" data-id=""><i class="fa fa-heart-broken"></i>Remove From Collection</button>
</div>

Upvotes: 2

Related Questions