CODEWITHSUNDEEP
jqueryasp.net-mvcdatatable
Krish
Krish

Reputation: 307

Datatable.js: The page postbacks while clicking edit button in the datatable

enter image description here

enter image description here

Script

  <script type="text/javascript">

        $(function() {
           // $.noConflict();
            $('#customerGrid').DataTable({
                "columnDefs": [  
                    { "targets": [0], "visible": false }
                ]
            });
        });

        function startEdit(obj) {            
            $(".inline-view").show();
            $(".inline-edit").hide();
            $(obj).closest('tr').find("td .inline-view").hide();
            $(obj).closest('tr').find("td .inline-edit").show();
        }
        function onCancelEdit() {
            $(".inline-view").show();
            $(".inline-edit").hide();            
        }
    </script>

Index.chtml

<thead>
 <th>
      @Html.DisplayNameFor(model => model.FirstName)
 </th>
</thead>


<tbody>
   @foreach (var item in Model)
      {                                                
         <td>
           <div class="inline-view">
               @Html.DisplayFor(modelItem => item.FirstName)
           </div>
           <div class="inline-edit" style='display:none;'>
               @Html.EditorFor(modelItem => item.FirstName)
           </div>
      </td>



 <td>
      <div class="inline-view">
            <button class="editBtn" onclick='startEdit(this);'>Edit</button>
      </div>
      <div class="inline-edit" style="display:none">
            <input class="saveButton" type="submit" id="saveBtn" value="Save" data-eid="@item.CustomerId" />
            <button id="cancelBtn" onclick='oncancelEdit(); return false;'>Cancel</button>
      </div>
</td>
}
</tbody>

I'm using datatable with adminlte 3 theme. Whenever I click the edit button in the datatable as in Image 1 it postbacks the page again. No error was thrown. Don't know what I'm missing here.

When I click the edit button it should simply switch from view mode to edit mode. That's what I'm trying to do. Above is the code for the same.

FYI: Just showed/included one column in the question to give clarity.

Upvotes: 0

Views: 351

Answers (1)

palaѕн
palaѕн

Reputation: 73906

A button with no type attribute acts as type="submit", and will attempt to submit form data when clicked. Thus you are getting postbacks in your page. Try to add type="button" to it and it will work fine like:

<button type="button" class="editBtn" onclick='startEdit(this);'>Edit</button>

Upvotes: 2

Related Questions