jquery - Asynchronous call that updates db -


i have kendogrid editable textbox on each row. textboxes autofilled data db upon load.

i asynchronously save changes made textboxes. right im unable access textboxes on input....

code:

@model ienumerable<dtofacility> @{     layout = null; }  <script>     $(document).ready(function () {         $('tbody > tr > td > div.col-xs-s > :text').on('propertychange input', function (e) {             console.log('first' + $(this).val());         });     });  </script>  <div id="screen">     @using (html.beginform(new { id = "gridform" }))     {         <div id="systempreferences">             <div class="panel panel-primary ">                 <div class="panel-heading col-xs-12 clearfix">                     <div class="col-xs-12">                         <h2 class="pull-left mt5">grid</h2>                          <hr>                     </div>                 </div>                 <div class="panel-body">                     <div class="panel-action-bar">                         @(html.kendo().grid<dtofacility>()                               .name("grid")                               .columns(columns =>                                   {                                       columns.bound(e => e.facility);                                       columns.bound(e => e.number)                                              .clienttemplate(                                                  @"<div class='col-xs-2'><input type='text' class='form-control' id='codebox' value='#= value #' maxlength='3'/></div> "                                           );                                   })                               .pageable(pager => pager.messages(info => info.empty("no results found")))                               .htmlattributes(new { style = "overflow-y: hidden;" })                               .datasource(datasource => datasource                                                             .ajax()                                                             .pagesize(6)                                                             .read(read => read.action("data", "mycontroller"))                               )                               )                     </div>                 </div>             </div>         </div>     } </div> 

markup:

<tbody role="rowgroup">  <tr data-uid="27c8a881-1d6b-4e0b-b897-c6b04a185cd6" role="row"> <td role="gridcell">facility  1</td> <td role="gridcell"><div class="col-xs-2"><input type="text" class="form-control" id="codebox" value="bgg" maxlength="3"></div> </td></tr>  <tr class="k-alt" data-uid="5ed6cee8-9365-42db-b711-f2aaa2c69adf" role="row"> <td role="gridcell">facility 2</td> <td role="gridcell"><div class="col-xs-2"><input type="text" class="form-control" id="codebox" value="abc" maxlength="3"></div>  </td></tr>  <tr data-uid="da8ba253-0fc0-4dc7-a110-7b4bda6b8a35" role="row"> <td role="gridcell">facility 3</td> <td role="gridcell"><div class="col-xs-2"><input type="text" class="form-control" id="codebox" value="def" maxlength="3"></div> </td></tr>  <tr class="k-alt" data-uid="36d2e72f-b3cb-4dd6-8fd3-f62f3a5a26e7" role="row"> <td role="gridcell">facility 4</td> <td role="gridcell"><div class="col-xs-2"><input type="text" class="form-control" id="codebox" value="ghi" maxlength="3"></div>  </td></tr> </tbody> 

[after , forth in comments above, "answer"-worthy may emerging...]

its pulling data , inserting grid. if firing jquery before data loaded, how fix that? have jquery @ bottom of view.

therein appears rub. jquery code in question executes when document loads, appear after document loads, kendo grid makes ajax request data , populate grid.

so see 2 potential options...

perhaps kendo has event or callback can invoke after asynchronous operation completes? don't know product enough demonstrate, suspect product mature enough have that.

as alternative, can make use of .on() higher-level dom element catch events of dynamically created elements. might work:

$(document).on('propertychange input', 'tbody > tr > td > div.col-xs-2 > :text', function (e) {     // ... }); 

note handler attached document itself, exist when document loads. (technically can attached non-changing element in hierarchy between target element(s) , top level.) , filters events based on selector.


Comments

Popular posts from this blog

authentication - Mongodb revoke acccess to connect test database -

r - Update two sets of radiobuttons reactively - shiny -

ios - Realm over CoreData should I use NSFetchedResultController or a Dictionary? -