2

i would like to disabled asp=action link after one click i have a foreach loop to display my book in table in my view my asp-action for add book in the cart is in the loop but i want to disabled just the book who already in the cart not all books

 <a asp-action="AcheterLivre" asp-Controller="Achat" asp-route-id="@item.Isbn" id="disabled" onclick="return myFunction(this);"> Ajouter

i try something with jquery but its dont work well

i tried this

 <script>
function myFunction() {
    $("#disabled").one("click", function () {
        alert("this book is already in the cart");
    });
}

i have this function in my class its verify if the books is in the cart maybe i should use it ?

public bool IsPresent(string isbn)
    {
        //rechercher si l'isbn correspond a un livre de la liste
        AchatLivreViewModel livre = ListeElements.Find(element => element.Isbn == isbn);
        if (livre != null)
        {
            return true;
        }
        else
        {
            return false;
        }
    }
Mélanie N'hammoucha
  • 51
  • 8

2 Answers2

1

try this:

<a href="/Home/About" target="_blank" yetClickable="1" onclick="return foo(this);">  Ajouter </a>

And your Javascript:

    function foo(input) {
        if ($(input).attr('yetClickable') === '1') {
            $(input).attr('yetClickable', '0');
            return true;
        }
        else {
            // this false returning will counteract the effect of click event on the anchor tag
            return false;
        } 
    }

Once an Item is removed from the cart, again you need javascript to select that Item by its Id and change the yetClickable attribute back to 1 (in order to be clickable).

Note: This idea above (upon your scenario) works until the page is not reloaded. Otherwise, you need to handle ADD/Remove operations on the Cart through Ajax.

Hope this helps.

A. Nadjar
  • 2,440
  • 2
  • 19
  • 20
  • Thank you but its dont seem to work :( what is the yetClickable attributes? – Mélanie N'hammoucha Aug 10 '19 at 15:38
  • I ran the code successfully on MVC 5.2. yetClickable is just an attribute as arbitrary html property we added to store the status of each tag inside itself. – A. Nadjar Aug 10 '19 at 16:10
  • For DOM properties like checked, disabled and readonly, the proper way to do this (as of JQuery 1.6) is to use prop. Please see this link: https://stackoverflow.com/questions/5995628/adding-attribute-in-jquery As you can see in this thread: https://stackoverflow.com/questions/14935191/adding-data-attribute-to-dom you can use .attr() to add data attribute to an html tag. – A. Nadjar Aug 10 '19 at 16:20
  • i dont know if i do something wrong but its dont disable my link – Mélanie N'hammoucha Aug 10 '19 at 17:40
1

Why not trying this simple approach:

<tbody>
    @foreach (var item in Model)
            {            
                <tr>
                    <td>
                        @item.Isbn
                    </td>                
                    <td>
                        @item.Titre
                    </td>
                    <td>
                        <label class="btn btn-primary" style="padding:0"><a href="/Home/About" class="ADD2CART" style="display:block">Add to Cart</a></label>
                    </td>
                    <td>
                        <label class="btn btn-danger" style="padding:0"><a href="/Home/About" class="RemoveFromCART" style="display:block">Remove From Cart</a></label>
                    </td>

                </tr>                    
        }
</tbody>

And in your javascript, if you don't want to use Ajax, you can manage your cart items all on client side using an array of objects, Let's name it CartItems:

    var CartItems = [];

    $('.ADD2CART').click(function () {
            if ($(this).closest('tr').hasClass("ExistingInCart")) {
                alert('Already in Cart !!');                
            }
            else {
                // add this item to the Cart through Ajax or 
                // local javascript object: e.g.: 
                CartItems.push({
                    ISBN: $(this).closest('tr').find('td:eq(0)').text().trim(),
                    Title: $(this).closest('tr').find('td:eq(1)').text().trim(),
                });
                $(this).closest('tr').addClass("ExistingInCart");                
            }

            return false; //to prevent <a> from navigating to another address
        });





        $('.RemoveFromCART').click(function () {

            $(this).closest('tr').removeClass("ExistingInCart");

            var isbn = $(this).closest('tr').find('td:eq(0)').text().trim();
            CartItems = CartItems.filter(x => x.ISBN !== isbn);

            return false;
        });

Once you need to submit or post the page, you have all the already selected books in CartItems array.

To add this javascript code to your view, choose one of the options:

  1. Put this block at the bottom of your view and copy the above script inside the <script></script> tag:

    @section scripts{ <script> .... copy it here ... </script> }

  2. copy the script code inside a newFile.js and add it to your view

    <script src="~/Scripts/jquery-3.3.1.min.js"></script>

    <script src="~/Scripts/newFile.js"></script>

  3. You may decide to bundle this newFile.js

A. Nadjar
  • 2,440
  • 2
  • 19
  • 20