jquery - how to update checkbox in webgrid -


excuse me, try make webgrid, in webgrid put checkbox. want change value of checkbox. have 5 row in webgrid, in first row, value of checkbox success change. in row 2 until five, value can change. can 1 tell me, mistake?

this view

<div id="mygrid"> </div> <div>     @{         var grid = new webgrid(model.datadirilist, rowsperpage: 15, canpage: true, cansort: true, ajaxupdatecontainerid: "gridcontent");         @grid.gethtml(                            tablestyle: "row",                   alternatingrowstyle: "alt",                   columns: grid.columns(                   grid.column("id", format: @<text>  <span  class="display-mode">@item.id </span> <label id="userid" class="edit-mode">@item.id</label> </text>, style: "col1width" ),                   grid.column("nama", "nama", format: @<text>  <span  class="display-mode"> <label id="lblnama"  >@item.nama</label> </span> <input type="text" id="nama" value="@item.nama" class="edit-mode" /></text>, style: "col2width"),                   grid.column("umur", "umur", format: @<text>  <span  class="display-mode"> <label id="lblumur"  >@item.umur</label> </span> <input type="text" id="umur" value="@item.umur" class="edit-mode" /></text>, style: "col2width"),                   grid.column(header: "active", format:@<text> <span  class="display-mode"> <label id="lblactive">@item.activestatus</label> </span> <input id="chkactive" type="checkbox" @((item.active == true) ? " checked=checked" : "") name="closeselling" value="@item.active" class="edit-mode" onchange="adchange()" /></text>, style: "col2width"),                   grid.column("action", format: @<text>                                 <button class="edit-user display-mode" >edit</button>                                 <button class="save-user edit-mode"  >save</button>                                 <button class="cancel-user edit-mode" >cancel</button>                             </text>,  style: "col3width" , cansort: false)                  ));     } </div>  @section scripts     {     <script type="text/javascript">          $(document).ready(function () {             $('.edit-mode').hide();             $('.edit-user, .cancel-user').on('click', function () {                 var tr = $(this).parents('tr:first');                 tr.find('.edit-mode, .display-mode').toggle();             });             $(function () {                 $('#chkactive').click(function () {                     alert($(this).val() + ' ' + (this.checked ? 'checked' : 'unchecked'));                 });             });              $(".save-user").on("click", function () {                 var tr = $(this).parent().parent();                 var t = tr.find("#nama").val();                 var umur = tr.find('#umur').val();                 var chkactive = $('#chk').attr('checked') ? "true" : "false";                 var id = tr.find('#userid').html();                 alert(chkactive);                  $.ajax({                     url: '@url.action("updateuser", "home")',                 type: "post",                 data: { customernameid: t, userid: id, umur: umur,active: chkactive},                 datatype: 'json',                 success: function (result) {                     $("#mygrid").html('');                     $("#mygrid").html(result);                 }                 });                  tr.find("#lblnama").text(t);                 tr.find("#lblumur").text(umur);                 tr.find('.edit-mode, .display-mode').toggle();         });      }); </script>     } 

this controller

public jsonresult updateuser(string customernameid, string userid, string umur, bool active)         {             var id = convert.toint32(userid);             var intumur = convert.toint32(umur);             var dd = db.datadiris.asqueryable().where(r => r.id == id).single();             dd.id = id;             dd.nama = customernameid;             dd.umur = intumur;             dd.active = active;              db.entry(dd).state = entitystate.modified;             db.savechanges();             string message = "success";             return json(message, jsonrequestbehavior.allowget);         } 

please me

thanks

just solved issue of checkbox , mvc webgrid,
need add short script.

this solution:
in grab script things same:

var isdisabled = tr.find("#isdisabled").val(); 

&

tr.find("#lblisdisabled").text(isdisabled); 

&

"isdisabled": isdisabled, 

so far same, need add checkbox, so:

grid.column("isdisabled", "isdisabled", format: @<text> <span  class="display-mode"> <label id="lblisdisabled">@item.isdisabled</label> </span>   <input class="edit-mode" id="isdisabled" name="isdisabled" type="checkbox" value="@if (item.isdisabled){<text>true</text>}else{<text>false</text>}" @if(item.isdisabled){<text>checked</text>}/> </text>), 

instead(!) can use mvc html helper so:

@html.checkbox("showonchart", (bool)item.showonchart, new { @class = "edit-mode", value = item.showonchart }) 

eventually need add script:

<script type="text/javascript"> $(function () {     $('input:checkbox').change(function () {         if ($(this).attr("checked")) {             $(this).attr("value", true);         } else {             $(this).attr("value", false);         }     }); }); $(document).ready(function () {     $('input[type=checkbox]').each(function () {         if ($(this).attr("checked")) {             $(this).attr("value", true);         } else {             $(this).attr("value", false);         }     }); }); </script> 

if have more checkboxes in page , want exclude them use:

$('.edit-mode:checkbox').change(... 

when receiving bool in controller going:

bool? isdisabled 

just more representable if actionresult not called isdisabled input.

hope helps.


Comments

Popular posts from this blog

html - How to style widget with post count different than without post count -

How to remove text and logo OR add Overflow on Android ActionBar using AppCompat on API 8? -

javascript - storing input from prompt in array and displaying the array -