Created
October 25, 2013 02:01
-
-
Save johnculviner/7148395 to your computer and use it in GitHub Desktop.
Code for the post ILM blog post Building Rich Web Apps: jQuery & MVC vs. Angular.js & WebAPI
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //ID selectors are less than ideal due to conflict potential, but often necessary with jQuery | |
| var $tbody = $('#grid').find('tbody'); | |
| //the template for another item, the index will replace ### | |
| var todoListTemplate = $('#item-template').html(); | |
| $('#addTodo').on('click', function (e) { | |
| var nextItemIdx = $tbody.find('tr').length; | |
| //the template for another item, the index will replace ### | |
| var nextItem = todoListTemplate.replace(/###/g, nextItemIdx); | |
| $tbody.append(nextItem); | |
| //block click handler bubble, don't forget or this will cause the form to post! | |
| return false; | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $('.delete-todo').on('click', function (e) { | |
| var $deleteTargetRow = $(e.target).closest('tr'); | |
| var $siblingsAfter = $deleteTargetRow.nextAll(); | |
| $deleteTargetRow.remove(); | |
| $siblingsAfter.each(function () { | |
| //shift indexes accordingly so the MVC model binder still functions server side | |
| //and client validation still works client side | |
| var $row = $(this); | |
| var newIndex = $row.index(); | |
| var oldRowNbr = newIndex + 2; | |
| var newRowNbr = newIndex + 1; | |
| //re-wire up elements with ids | |
| //so client side validation still works | |
| $row.find('[id]').each(function () { | |
| this.id = this.id.replace("_" + oldRowNbr + "__", "_" + newRowNbr + "__"); | |
| }); | |
| //rewire up elements with indexor for client validation and server side model binding to work | |
| $row.find('[id]').each(function () { | |
| this.id = this.id.replace("_" + oldRowNbr + "__", "_" + newRowNbr + "__"); | |
| }); | |
| $row.find('[data-valmsg-for]').each(function () { | |
| var current = $(this).prop('data-valmsg-for'); | |
| $(this).prop('data-valmsg-for', current.replace("[" + oldRowNbr + "]", "[" + newRowNbr + "]")); | |
| }); | |
| $row.find('[name]').each(function () { | |
| this.name = this.name.replace("[" + oldRowNbr + "]", "[" + newRowNbr + "]"); | |
| }); | |
| }); | |
| return false; //block click handler bubble | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <tr> | |
| <td> | |
| <input data-val="true" data-val-required="The IsCompleted field is required." id="Items_###__IsCompleted" name="Items[###].IsCompleted" type="checkbox" value="false" > | |
| <input name="Items[###].IsCompleted" type="hidden" value="false"> | |
| <span class="field-validation-valid" data-valmsg-for="Items[###].IsCompleted" data-valmsg-replace="true"></span> | |
| </td> | |
| <td> | |
| <input data-val="true" data-val-required="The Task field is required." id="Items_###__Task" name="Items[###].Task" type="text" > | |
| <span class="field-validation-valid" data-valmsg-for="Items[###].Task" data-valmsg-replace="true"></span> | |
| </td> | |
| <td> | |
| <select data-val="true" | |
| data-val-number="The field Priority must be a number." | |
| data-val-range="The field Priority must be between 1 and 10." | |
| data-val-range-max="10" | |
| data-val-range-min="1" | |
| data-val-required="The Priority field is required." | |
| id="Items_###__Priority" name="Items[###].Priority"> | |
| <option value="1">1</option> | |
| <option value="2">2</option> | |
| <option value="3">3</option> | |
| <option value="4">4</option> | |
| <option value="5">5</option> | |
| <option value="6">6</option> | |
| <option value="7">7</option> | |
| <option value="8">8</option> | |
| <option value="9">9</option> | |
| <option value="10">10</option> | |
| </select> | |
| <span class="field-validation-valid" data-valmsg-for="Items[###].Priority" data-valmsg-replace="true"></span> | |
| </td> | |
| <td> | |
| <button class="btn btn-danger delete-todo"> | |
| <span class="glyphicon glyphicon-remove-sign"></span> | |
| </button> | |
| </td> | |
| </tr> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment