Last active
August 29, 2015 14:28
-
-
Save leompeters/6cffcc1e8254b4c7c720 to your computer and use it in GitHub Desktop.
Add and remove row dynamically.
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
| Add and remove row dynamically. |
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>Dynamic Rows (by LeoM)</title> | |
| <!-- Bootstrap compiled and minified CSS --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.1.1/css/bootstrap.min.css"> | |
| </head> | |
| <body> | |
| <div class="container-fluid"> | |
| <div class="row-fluid"> | |
| <div class="span12"> | |
| <h1>Dynamic Rows</h1> | |
| <legend> | |
| Sub-projects | |
| <button type="button" id="add-subproject" | |
| class="btn btn-small pull-right" > | |
| <i class="icon-plus"></i> | |
| Add a sub-project | |
| </button> | |
| </legend> | |
| <div class="row-fluid subproject"> | |
| <div class="span4"> | |
| <input type="text" class="span12 required" | |
| data-name="subproject-name" value="" /> | |
| </div> | |
| <div class="span2"> | |
| <input type="text" class="span12 toggl-hours required" | |
| data-name="subproject-time-allowed" value="" /> | |
| </div> | |
| <div class="span3"> | |
| <select data-name="subproject_toggl_task" class="span12"> | |
| </select> | |
| </div> | |
| <div class="span3"> | |
| <a class="btn btn-small btn-info save-subproject" href="#"> | |
| Save | |
| </a> | |
| <a class="btn btn-small btn-danger remove-subproject" href="#"> | |
| Remove | |
| </a> | |
| <input type="hidden" class="input-medium" | |
| data-name="subproject-project-id" value="" /> | |
| </div> | |
| </div> <!-- /#subproject --> | |
| <div id="subprojects-end"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Latest JQuery library --> | |
| <script src="http://code.jquery.com/jquery-latest.js"></script> | |
| <!-- Bootstrap compiled and minified JavaScript --> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.1.1/js/bootstrap.min.js"></script> | |
| <!-- Page JavaScript library --> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
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
| // An object literal | |
| var subProject = { | |
| projectId: 0, | |
| addSubProject: function() { | |
| var projectId = $("input[data-name='hidden-project-id']").val(); | |
| // time = new Date().getTime(); | |
| // regexp = new RegExp($(this).data("id"), "g"); | |
| divSubproject = $("<div />").attr("class", "row-fuid subproject"); | |
| // SubProject Name | |
| divSubprojectName = $("<div />") | |
| .attr("class", "span4") | |
| .appendTo(divSubproject); | |
| inputSubprojectName = $("<input />") | |
| .attr("type", "text") | |
| .attr("class", "span12 required") | |
| .attr("data-name", "subproject-name") | |
| .appendTo(divSubprojectName); | |
| // SubProject Hours | |
| divSubprojectHours = $("<div />") | |
| .attr("class", "span2") | |
| .appendTo(divSubproject); | |
| inputSubprojectHours = $("<input />") | |
| .attr("type", "text") | |
| .attr("class", "span12 toggl-hours required") | |
| .attr("data-name", "subproject-time-allowed") | |
| .appendTo(divSubprojectHours); | |
| // SubProject Toggl Taks Id | |
| divSubprojectTogglTaskId = $("<div />") | |
| .attr("class", "span3") | |
| .appendTo(divSubproject); | |
| selectSubprojectTogglTaskId = $("<select />") | |
| .attr("class", "span12") | |
| .attr("data-name", "subproject-time-allowed") | |
| .appendTo(divSubprojectTogglTaskId); | |
| // Button to remove the subproject | |
| divSubprojectActions = $("<div />") | |
| .attr("class", "span3") | |
| .appendTo(divSubproject); | |
| linkSubprojectSave = $("<a />") | |
| .attr("href", "#") | |
| .attr("class", "btn btn-small btn-info save-subproject") | |
| .text("Save") | |
| .appendTo(divSubprojectActions); | |
| spacer = $("<span />").text(" ").appendTo(divSubprojectActions); | |
| linkSubprojectRemove = $("<a />") | |
| .attr("href", "#") | |
| .attr("class", "btn btn-small btn-danger remove-subproject") | |
| .text("Remove") | |
| .appendTo(divSubprojectActions); | |
| // SubProject Project Id | |
| inputSubprojectProjectId = $("<input />") | |
| .attr("type", "hidden") | |
| .attr("data-name", "subproject-project-id") | |
| .attr("value", projectId) | |
| .appendTo(divSubprojectActions); | |
| $('#subprojects-end').before(divSubproject); | |
| }, | |
| removeSubProject: function (target) { | |
| target.closest('div.subproject').remove(); | |
| target.closest('div.subproject').hide(); | |
| } | |
| }; | |
| $(document).ready(function () { | |
| // Click on add subproject | |
| $("body").on("click", "#add-subproject", function(event) { | |
| subProject.addSubProject(); | |
| return event.preventDefault(); | |
| }); | |
| // $("#add-subproject").click( function() { | |
| // subProject.addSubProject(); | |
| // }); | |
| // Click on remove subproject | |
| $("body").on("click", ".remove-subproject", function(event) { | |
| subProject.removeSubProject($(this)); | |
| return event.preventDefault(); | |
| }); | |
| // $(".remove-subproject").click( function( e ) { | |
| // subProject.removeSubProject( e ); | |
| // }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment