Remove Anchor Link HREF attribute after click using jQuery

Last Reply 8 months ago By pandeyism

Posted 8 months ago

disable page navigation and modal popup after first button click how can we disable page navigation and modal popup after first button click... from second click onwards replace above with an alert as alert("pop and navigation is disabled after first click"); .this is a continuation of previous question

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript">
        $(function () {
            GetProduct();
        });
        function Getproductname(ele) {
            $(ele).html($(ele).closest('div').find('.sproductname').html());
            $(".modal-body #lblName").html("Id is :" + $(ele).data('id') + " Name is : " + $(ele).closest('div').find('.sproductname').html());
            $(".modal-body #lblName").css("color", "red");
            if ($(ele).attr("ClickCount") == undefined || $(ele).attr("count") < 1) {
                $(ele)[0].href = window.open("http://www.google.in", "_blank", "toolbar=yes");
            }
            else
            {
                 //this code does not works...but it is the model
                 //disable popup also along with disabling navigation links after first click
                 alert("pop and navigation is disabled after first click");//enable this  alert after first click
             }
             $(ele).attr("ClickCount", 1);
        }

        function GetProduct() {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "WebService.asmx/GetData",
                data: {},
                dataType: "json",
                success: function (data) {
                    var table = $('#tblgrid');
                    var rows = "";
                    for (var i = 0; i < data.d.length; i++) {
                        rows += "<div class=trclass>" +
                        "<tr><td class=tdcolumn>" +
                        "<div class=tablediv>" +
                        "<div class=Productid>" + data.d[i].ProductId + "</div>" +
                        "<div class=sproductname>" + data.d[i].ProductName + "</div><br />" +
                        '<p><a class="btn btdeal" target="_blank" onclick = Getproductname(this) data-id="' + data.d[i].ProductId + '" id=btnDeal role="button" data-toggle="modal" data-target="#DesPopUp" >submit</a></p>' +
                        "</div></td></tr></div>"
                    }
                    table.append(rows);
                },
                failure: function (response) { alert(response.d); },
                error: function (response) { alert(response.d); }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="modal fade" id="DesPopUp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body" id="listOfNotes">
                        <p>
                            Some text in the modal.</p>
                        <asp:Label ID="lblName" runat="server" />
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <table id="tblgrid">
        </table>
    </div>
    </form>
</body>
</html>

 

This question does not have replies that have been liked.