Disable LinkButton on AJAX Success using jQuery in ASP.Net

Last Reply 5 months ago By dharmendr

Posted 5 months ago

hello,

i have LinkButton1 inside listview - and listview bind with database. each row has categoryname categoryid

- take label value of categoryid which is inside the listview and assign it to query string - show a popup

here is the script

    <script type="text/javascript">
        $(function () {
            $('[id*=LinkButton1]').on('click', function () {
                var id = $(this).closest('div[class="list whitebg"]').find('[id*=Label12]').html();
               
             
                var oldURL = window.location.protocol + "//" + window.location.host + window.location.pathname;
                var newUrl = oldURL + "?Id=" + id;
                if (window.history != 'undefined' && window.history.pushState != 'undefined') {
                    window.history.pushState({ path: newUrl }, '', newUrl);
                    $('#myModal').modal('show');

                    $("#<%=HiddenField1.ClientID %>").val(id);
                }
                return false;
            });
        });
</script>
    <asp:HiddenField ID="HiddenField1" runat="server" />

inside popup i have linkbutton2 and on click of linkbutton i call webmethod like this

 

<script type="text/javascript">
    $(function () {
        $("[id*=LinkButton2]").bind("click", function () {
            //check query string parameter
            //assign values to webmethod
            var biddescription = $("[id*=TextBox1]").val();
            var bidamount = $("[id*=TextBox2]").val();
            var status = 'Active';
            var username = '<%=@HttpContext.Current.User.Identity.Name%>';
            var projectid = $("[id*=HiddenField1]").val();

                
             
            var noofdays = $("[id*=TextBox3]").val();

            if (Page_ClientValidate("sendproposal")) {
                $.ajax({
                    type: "POST",
                    url: "allrequest.aspx/insertbid",
                    data: "{username: '" + username + "', projectid: '" + projectid + "', biddescription: '" + biddescription + "', bidamount: '" + bidamount + "' ,   status: '" + status + "', noofdays:'" + noofdays + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",


                   
                    success: function (response) {
                        //alert(response.responseText);

                        $("[id*=TextBox1]").val("");
                        $("[id*=TextBox2]").val("");
                        $("[id*=TextBox3]").val("");
                        $('#myModal').modal('hide');
                        $('#spnCharLeft').css('display', 'none');
                        $('#spnCharLeft2').css('display', 'none');
                        $('#lblTick').text('');
                        $('#lblTick2').text('✔ Perfect');
                    },
                    error: function (response) { alert(response.responseText); },
                    failure: function (response) { alert(response.responseText); }
                });
                return false;
            }
        });
    });
</script>

what i want is on success function of webmethod i want to disable linkbutton1 which is insider listview where labelid is equal to querystring value

please advice

Posted 5 months ago

Hi nauna,

For this you need to declare a global variable which hold the control on link button 1 click. Then after on success function disable the link button 1 and set the text.

Refer below modified code.

HTML

<script type='text/javascript'>
    var link;
    $(document).ready(function () {
        $('#spnCharLeft').css('display', 'none');
        var maxLimit = 1000;
        var minLimit = 15;
        var charactersLeft;
        $('#<%= TextBox1.ClientID %>').keyup(function () {
            var lengthCount = this.value.length;
            if (lengthCount > minLimit) {
                $('#lblTick').text('✔ Perfect');
                $('#lblTick').css('color', '#00ff21')

                charactersLeft = maxLimit - lengthCount + ' Characters Left';
            }
            if (lengthCount > maxLimit) {
                $('#lblTick').text('X You have exceed the limit character');
                $('#lblTick').css('color', 'red')
                charactersLeft = 'Maximum length Exceeded';
            }
            if (lengthCount < minLimit) {
                $('#lblTick').text('15 Min characters required');
                $('#lblTick').css('color', 'red')
                charactersLeft = maxLimit - lengthCount + ' Characters Left';
            }
            $('#spnCharLeft').css('display', 'block');
            $('#spnCharLeft').text(charactersLeft);
        });
        $("[id*=LinkButton2]").bind("click", function () {
            var biddescription = $("[id*=TextBox1]").val();
            var bidamount = $("[id*=TextBox2]").val();
            var status = 'Active';
            var username = 'Test';
            var projectid = $("[id*=HiddenField1]").val();
            var noofdays = $("[id*=TextBox3]").val();
            if (Page_ClientValidate("sendproposal")) {
                $.ajax({
                    type: "POST",
                    url: "allrequest.aspx/insertbid",
                    data: "{username: '" + username + "', projectid: '" + projectid + "', biddescription: '" + biddescription + "', bidamount: '" + bidamount + "' ,   status: '" + status + "', noofdays:'" + noofdays + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        $("[id*=TextBox1]").val("");
                        $("[id*=TextBox2]").val("");
                        $("[id*=TextBox3]").val("");
                        $('#myModal').modal('hide');
                        $('#spnCharLeft').css('display', 'none');
                        $('#spnCharLeft2').css('display', 'none');
                        $('#lblTick').text('');
                        $('#lblTick2').text('✔ Perfect');
                        // $("[id*=LinkButton1]").enabled = false;
                        // $("[id*=LinkButton1]").val = "Proposal sent";
                        $(link).attr("disabled", "disabled");
                        $(link).text("Proposal sent");
                    },
                    error: function (response) { alert(response.responseText); },
                    failure: function (response) { alert(response.responseText); }
                });
                return false;
            }
        });
        $('[id*=LinkButton1]').on('click', function () {
            link = $(this);
            var id = $(this).closest('div[class="list whitebg"]').find('[id*=Label12]').html();
            var oldURL = window.location.protocol + "//" + window.location.host + window.location.pathname;
            var newUrl = oldURL + "?Id=" + id;
            if (window.history != 'undefined' && window.history.pushState != 'undefined') {
                window.history.pushState({ path: newUrl }, '', newUrl);
                $('#myModal').modal('show');
                $("#<%=HiddenField1.ClientID %>").val(id);
            }
            return false;
        });

        (function () {
            var showChar = 400;
            var ellipsestext = "...";

            $('.truncate').each(function () {
                var content = $(this).html();
                if (content.length > showChar) {

                    var c = content.substr(0, showChar);
                    var h = content;
                    var html = '<div class="truncate-text" style="display:block">' + c + '<span class="moreellipses">' + ellipsestext + '&nbsp;&nbsp;<a href="" class="moreless more" style="color:#bd59e2; font-weight:bold; font-style:normal;">more</a></span></span></div><div class="truncate-text" style="display:none">' + h + '<a href="" class="moreless less" style="color:#bd59e2; font-weight:bold; font-style:normal;">Less</a></span></div>';

                    $(this).html(html);
                }

            });

            $(".moreless").click(function () {
                var thisEl = $(this);
                if (thisEl.hasClass("less")) {
                    thisEl.closest('.truncate-text').prev('.truncate-text').toggle();
                    thisEl.closest('.truncate-text').slideToggle();
                } else {
                    thisEl.closest('.truncate-text').toggle();
                    thisEl.closest('.truncate-text').next('.truncate-text').fadeToggle();
                }
                return false;
            });
            /* end iffe */
        } ());

        /* end ready */
    });
</script>
<div class="greybg">
    <div class="container">
        <div class="heading">
            <h2>
                <i class="fa fa-list c-l-grey"></i>Availble
                <asp:Label ID="Label1" runat="server" Text="Pro" CssClass="pro"></asp:Label>jects
            </h2>
        </div>
        <asp:Label ID="Label7" runat="server" Text="Total Available Projects"></asp:Label>
        <asp:Label ID="Label8" runat="server" Text="Label" CssClass="label label-warning"></asp:Label>
        <span class="pull-right">Available Offers
            <asp:Label ID="Label9" runat="server" Text="Label" CssClass="label label-danger"></asp:Label>
        </span>
        <div class="freejob">
            <div class=" list whitebg">
                <div class="thumbnail">
                    <div class="row bold">
                        <div class="col-md-2">
                            Date:
                        </div>
                        <div class="col-md-8 nopadding">
                            Project Details
                        </div>
                        <div class="col-md-1 center">
                            Budget
                        </div>
                        <div class="col-md-1 center">
                            Offers
                        </div>
                    </div>
                </div>
            </div>
            <asp:ListView ID="ListView1" runat="server" OnItemDataBound="ListView1_ItemDataBound">
                <ItemTemplate>
                    <div class="list whitebg">
                        <div class="thumbnail">
                            <div class="caption">
                                <asp:Label ID="Label12" runat="server" Text='<%# Eval("projectid") %>'></asp:Label>
                                <asp:LinkButton ID="LinkButton1" runat="server" data-toggle="modal" data-target="#myModal"
                                    CssClass="color-btn pull-right">
                                    Send
                                    <asp:Label ID="Label6" runat="server" Text="Pro" CssClass="pro"></asp:Label>posal
                                </asp:LinkButton>
                            </div>
                            <div class="row">
                                <div class="col-md-2">
                                    <asp:Label ID="Label3" runat="server" Text='<%# Eval("projectdate") %>'></asp:Label>
                                </div>
                                <div class="col-md-8 nopadding">
                                    <h5>
                                        <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("buyerimage") %>' CssClass="img-circle pull-left"
                                            Width="30px" Height="30px" />
                                        <asp:Label ID="Label2" runat="server" Text='<%# Eval("title") %>'></asp:Label>
                                        <br />
                                        <small>
                                            <div class="truncate">
                                                <%# Eval("description") %>
                                            </div>
                                        </small>
                                    </h5>
                                </div>
                                <div class="col-md-1 bold center">
                                    <asp:Label ID="Label4" runat="server" Text='<%# Eval("budget") %>'></asp:Label></div>
                                <div class="col-md-1 center">
                                    <asp:Label ID="Label5" runat="server" Text='<%# Eval("totaloffer") %>'></asp:Label></div>
                            </div>
                        </div>
                    </div>
                    <hr class="nomargin" />
                </ItemTemplate>
            </asp:ListView>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content sahdow">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">
                    Send
                    <asp:Label ID="Label10" runat="server" Text="Pro" CssClass="pro"></asp:Label>posal</h4>
            </div>
            <div class="modal-body greybg nopadding">
                <div class="form form-horizontal noshadow greybg nopadding">
                    <div class="form-group padding ">
                        Description<asp:RegularExpressionValidator Display="Dynamic" ControlToValidate="TextBox1"
                            ID="RegularExpressionValidator3" ValidationExpression="^[\s\S]{15,1000}$" runat="server"
                            ErrorMessage="Minimum 15 and Maximum 1000 characters required." CssClass="required"
                            ValidationGroup="sendproposal"></asp:RegularExpressionValidator><asp:RequiredFieldValidator
                                ID="RequiredFieldValidator1" ValidationGroup="sendproposal" runat="server" ErrorMessage="Required"
                                ControlToValidate="TextBox1" CssClass="required" SetFocusOnError="True"></asp:RequiredFieldValidator>
                        <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox>
                        <span id="lblTick"></span><span id="spnCharLeft" style="color: #a33acb" class="pull-right">
                        </span>
                    </div>
                    <div class="form-group">
                        <div class="col-md-5 ">
                            <asp:Label ID="Label11" runat="server" Text="Pro" CssClass="pro"></asp:Label>
                            Cost:
                            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" ValidationGroup="sendproposal"
                                runat="server" ErrorMessage="Required" ControlToValidate="TextBox2" CssClass="required"></asp:RequiredFieldValidator>
                        </div>
                        <div class="col-md-5 ">
                            Delivery Time
                            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" ValidationGroup="sendproposal"
                                runat="server" ErrorMessage="Required" ControlToValidate="TextBox3" CssClass="required"></asp:RequiredFieldValidator>
                        </div>
                        <div class="col-md-2">
                            <br />
                            <asp:LinkButton ID="LinkButton2" runat="server" ValidationGroup="sendproposal" CssClass="color-btn pull-right"
                                Width="100%">Send</asp:LinkButton>
                        </div>
                    </div>
                    <div class="form-group">
                    </div>
                    <br />
                </div>
            </div>
        </div>
    </div>
</div>
<asp:HiddenField ID="HiddenField1" runat="server" />

 


Posted 5 months ago
dharmendr says:
$(link).attr("disabled", "disabled");

 Replace the above line with the below.

$(link).prop("disabled", true);