CODEWITHSUNDEEP
javascriptasp.net-mvc-4
Bikram
Bikram

Reputation: 197

How do disabled button in Script onClick even in mvc 4 razor

Hi I got a issue with JavaScript when user click on add button in table the add button will disabled which is working but not properly. it was giving issue with some Id like user click on Id="rbutton_1" then it will disable all button with Id Id="rbutton_10", Id="rbutton_11" which i want to fix My JavaScript.

Here is a HTML Table view

@foreach (var item in this.Model.CartList)
{
       <tr>
       <td class="i"><img class="i" src="@item.IconUrl"></td>
       <td>@item.ServiceName</td>
       <td><span class="fa fa-inr"></span><span>@Convert.ToInt32(@item.TotalPrice)</span></td>
       <td>
         <a href="#" id="rbutton + @item.ServiceId" onclick="onRemove(event, @item.ServiceId)" class="btn btn-danger" style="padding: 4px 5px;"><span class="glyphicon glyphicon-trash"></span></a>
       </td>
  </tr>  
}

Here is a Script on click event below:

function onClick(e, Id) {
    e.preventDefault();
    var url = '@Url.Action("CartAdd", "Home")/' + Id;
    $.get(url, function (data) {
        $(".ref").load("Detail .ref");
        $(".t").find("a[id*='rbutton_" + Id + "']").attr("disabled", "disabled").attr("onClick", "this.disabled=false");
    });
}
function onRemove(e, Id) {
    var url = '@Url.Action("CartRemove", "Home")/' + Id;
    $.get(url, function (data) {
        $(".ref").load("Detail .ref");
        $(".t").find("a[id*='rbutton_" + Id + "']").attr("disabled", false).attr("onClick", "this.disabled=true");
    });
}

This is code is helping to disable button but giving issue above I have written

$(".t").find("a[id*='rbutton_" + Id + "']").attr("disabled", "disabled").attr("onClick", "this.disabled=false");

Upvotes: 1

Views: 1481

Answers (3)

Curiousdev
Curiousdev

Reputation: 5788

Just remove * from the Selection of element as below * use as WILDCARDS in jquery so it will disabled all anchor link which will match with this string rbutton_1 so these anchor tags with this like rbutton_10 and rbutton_11will be disabled.

See also this jquery documentation for more information

$(".t").find("a[id='rbutton_" + Id + "']").attr("disabled", "disabled").attr("onClick", "this.disabled=false");

Upvotes: 1

K D
K D

Reputation: 5989

You have following ways of doing this type of structure. If your rows are fixed you can either split your rows in two parts and render them in separate table.

OR

You can render 6 TD tags instead of 2 and render two records on one row.

OR

It would personally suggest not to use TABLE and go for DIV structure where you will have more flexibility and structure will easily adjust as per rows of your dataset like following.

  <div>
                        @foreach (var item in this.Model.ServiceList)
                        {  
                            <div style="float:left;">
                                <div>
                                    <img class="i" src="@item.IconUrl" />
                                </div>
                                <div>
                                    <span>@item.Services</span>
                                </div>
                                <div>
                                    <a href="#" id="[email protected]" onclick="onClick(event, @item.Id)" class="btn btn-success bt">+ add</a>
                                </div>
                                <div><span class="fa fa-inr"></span><span>@Mobilappy.Models.Detail.Price(@item.Id)</span>
                                </div>
                            </div>                       
                        }

                </div>

You may need to add some more styles to align it properly. If you are open to use any third party CSS libraries, i would suggest to use Bootstrap and check "col-md-*" class which can do this task easily for you. You can also use beuty of CSS Tables with "display:table" , "display:table-cell","display-table-row" if you don't want to use third party CSS lib.

EDIT

The above answer is for the question you asked to fix Structure of your page. To fox issue which you just updated on your question.. you have to try following script

$(".t").find("a[id='rbutton_" + Id + "']").attr("disabled", "disabled").attr("onClick", "this.disabled=false");

Remove "*" as it will select all elements otherwise.

Upvotes: 2

Mikael Puusaari
Mikael Puusaari

Reputation: 1054

You can use Take and Skip. For the left side table use:

var tableRowsLeft = this.Model.ServiceList.Take(10);

And for the right table

var tableRowsRight = this.Model.ServiceList.Skip(10).Take(10);

But it depends on how many rows you might need to handle(this example is not very suitable if you have thousands of rows), and it would be best to handle that kind of logic in the Controller instead of in The View

Upvotes: 1

Related Questions