Remove Anchor Link HREF attribute after click using jQuery

Last Reply 7 months ago By pandeyism

Posted 7 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>

 

Posted 7 months ago

Hi jovceka,

Refer below sample.

HTML

<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());
            if ($(ele).attr("ClickCount") == undefined || $(ele).attr("count") < 1) {
                $(ele).removeAttr("data-target");
                alert("pop and navigation is disabled after first click");
                $(ele).href = window.open("http://www.google.in", "_blank", "toolbar=yes");
            }
            else {
                $(ele).attr("data-target", "#DesPopUp");
                $(".modal-body #lblName").html("Id is :" + $(ele).data('id') + " Name is : " + $(ele).closest('div').find('.sproductname').html());
                $(".modal-body #lblName").css("color", "red");
            }
            $(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" >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>

WebService 

C# 

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
  
/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
    [WebMethod]
    public Products[] GetData()
    {
        List<Products> details = new List<Products>();
        string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        string query = "SELECT TOP 5 ProductId,ProductName FROM Products ORDER BY ProductId ASC";
        SqlCommand cmd = new SqlCommand(query);
        using (SqlConnection con = new SqlConnection(conString))
        {
            using (var sda = new SqlDataAdapter())
            {
                DataTable TableData = new DataTable();
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                TableData.Clear();
                sda.Fill(TableData);
                foreach (DataRow dtrow in TableData.Rows)
                {
                    Products user = new Products();
                    user.ProductId = Convert.ToInt32(dtrow["ProductId"].ToString());
                    user.ProductName = dtrow["ProductName"].ToString();
                    details.Add(user);
                }
            }
        }
  
        return details.ToArray();
    }
  
    public class Products
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
    }
}

VB.Net 

Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Services
  
' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class WebService
    Inherits System.Web.Services.WebService
  
    <WebMethod()>
    Public Function GetData() As Products()
        Dim details As List(Of Products) = New List(Of Products)()
        Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Dim query As String = "SELECT TOP 5 ProductId,ProductName FROM Products ORDER BY ProductId ASC"
        Dim cmd As SqlCommand = New SqlCommand(query)
        Using con As SqlConnection = New SqlConnection(conString)
            Using sda = New SqlDataAdapter()
                Dim TableData As DataTable = New DataTable()
                cmd.Connection = con
                sda.SelectCommand = cmd
                TableData.Clear()
                sda.Fill(TableData)
                For Each dtrow As DataRow In TableData.Rows
                    Dim user As Products = New Products()
                    user.ProductId = Convert.ToInt32(dtrow("ProductId").ToString())
                    user.ProductName = dtrow("ProductName").ToString()
                    details.Add(user)
                Next
            End Using
        End Using
  
        Return details.ToArray()
    End Function
  
    Public Class Products
        Public Property ProductId As Integer
        Public Property ProductName As String
    End Class
  
End Class

Screenshot