I’ve created a table generated from my SQL DB of “patches” in my current “package” for this web page shown here :
<table id="PatchTable">
<tr>
<th>
Name
</th>
<th>
Date
</th>
<th>
Detach
</th>
<th>
Evironment
</th>
<th>
Platform
</th>
<th>
</th>
</tr>
@{DeploymentMVC.Models.DeploymentDb db = new DeploymentMVC.Models.DeploymentDb();
DeploymentMVC.Models.Patch[] patches = db.GetPatches(Model);
}
@foreach (var patch in patches)
{
<tr id=@string.Format("patch_{0}", patch.PatchID)>
<td class="NameDisplay">
@Html.DisplayFor(ptch => patch.PatchName)
</td>
<td class="DateDisplay">
@Html.DisplayFor(ptch => patch.PatchDate)
</td>
<td>
<input type="hidden" name="pkgID" class="pkgID" value="@Model.PackageID" />
<input type="checkbox" class="patchIds" name="patchIdString" value="@patch.PatchID" />
</td>
<td>
<div id=@string.Format("environment_{0}", patch.PatchID)>
@patch.Environment
</div>
<div class="hidden" id=@string.Format("SelectEnvironment_{0}", patch.PatchID) >
<select name="DeploymentOption" id=@string.Format("EnvironmentValue_{0}", patch.PatchID)>
<option value="Staging">Staging</option>
<option value="Live">Live</option>
</select>
</div>
</td>
<td>
@*TODO: Figure out deploy options*@
<div id=@string.Format("platform_{0}", patch.PatchID)>
@patch.Platform
</div>
<div class="hidden" id=@string.Format("SelectPlatform_{0}", patch.PatchID)>
<select name="Staging Servers" id=@string.Format("PlatformValue_{0}", patch.PatchID)>
<option value="air-cast">air-cast</option>
<option value="redshop">Redshop</option>
</select>
</div>
</td>
<td>
<div class="EditButton">
<input type="button" class="button EditButtonInput" value="" id=@string.Format("edit_{0}", patch.PatchID) />
</div>
<div class="SaveButton">
<input type="button" class="button SaveButtonInput hidden" value="" id=@string.Format("save_{0}", patch.PatchID) />
</div>
</td>
</tr>
}
</table>
And then I have another table of non-allocated “patches” that can be added to my table above ^ via a checkbox and submit button. Shown here:
<table id="newPatchTable" class="sortable">
<tr>
<th>
<div class="pointer">
Name
</div>
</th>
<th>
<div class="pointer">
Date
</div>
</th>
<th>
Location
</th>
<th>
</th>
</tr>
@{
DeploymentMVC.Models.Patch[] patchArray = DeploymentMVC.Models.DirectoryHelper.GetAllPatches();
}
@if (patchArray.Length != 0)
{
foreach (var patch in patchArray)
{
<tr id=@string.Format("addPatch_{0}", patch.PatchName.Replace(@" ", string.Empty))>
<td class="NameDisplay">
@Html.DisplayFor(modelItem => patch.PatchName)
</td>
<td class="DateDisplay">
@Html.DisplayFor(modelItem => patch.PatchDate)
</td>
<td class="LocationDisplay">
@Html.DisplayFor(modelItem => patch.PatchLocation)
</td>
<td>
<input type="checkbox" name="patchNames" class="PatchNames" value="@patch.PatchName" />
</td>
</tr>
}
}
else
{
<tr>
<td>
<div>
<a>There are no current patches to add to your package. Please go to the @Html.ActionLink("Deploy Packages", "DeployPackages", "Package")
page to see packages or refresh the page if you recently committed a change are
expecting a patch to show up here. </a><a href="sf-build:8080">Click here to go to TeamCity
to manually build your patch.</a>
</div>
</td>
</tr>
}
</table>
I have currently written some javascript to remove the selected “patches” (rows) from my un-allocated patch table (table 2), and added them to the package’s patch table (table 1). I know this is not the correct way to do so, but I could not figure out how to use clone() and be able to edit the id, class, and text of each <tr>, <td>, and <div>.
Here is my JS (I’ve removed some things because I don’t think they are necessary for my question):
$('#AddSelectedPatches').click(function () {
...
$.each($('.PatchNames:checked'), function (i, element) {
...
//Creates row in the package's "Patches" table
var newRow = '<tr id=patch_' + patchID + '>'
+ '<td class="NameDisplay">' + patchName + '</td>'
+ '<td class="DateDisplay">' + patchDate + '</td>'
+ '<td><input type="hidden" name="pkgID" class="pkgID" value=' + $('#pkgID').val() + '/>'
+ '<input type="checkbox" class="patchIds" name="patchIdString" value=' + patchID + ' /></td>'
+ '<td><div id=environment_' + patchID + '>' + patchEnvironment + '</div>'
+ '<div class="hidden" id=SelectEnvironment_' + patchID + '><select name="DeploymentOption" id="EnvironmentValue_" + patch.PatchID>'
+ '<option value="Staging">Staging</option><option value="Live">Live</option></select></div></td>'
+ '<td><div id=platform_' + patch.PatchID + '>' + patchPlatform + '</div>'
+ '<div class="hidden" id=SelectPlatform_' + patchID + '>'
+ '<select name="Staging Servers" id="PlatformValue_" + patch.PatchID><option value="1">air-cast</option>'
+ '<option value="2">Redshop</option></select></div></td><td><div class="EditButton"><input type="button" class="button EditButtonInput" value="" id=edit_' + patchID + ' />'
+ '</div><div class="SaveButton"><input type="button" class="button SaveButtonInput hidden" value="" id=save_' + patchID + ' />'
+ '</div></td></tr>';
$('#PatchTable').append(newRow);
//Removes row in "New Patches to Add" table
var patchName_noSpaces = patchName.replace(/\s/g, '')
$('#addPatch_' + patchName_noSpaces).remove();
});
return false;
});
This works for visually adding the patches (and my checkboxes work), but my EditButtonInput and hidden SaveButtonInput classes do not recognize the javascript created rows (i.e. my click events for those two classes do nothing when the JS created ones are clicked). I’ve checked for spelling mistakes but did not come across any that would cause this problem.
Please let me know if my question is not clear. Thanks!
Men this is no the better way of doing this stuff.
I recommend you tu use 2 connected list using jquery, is so simple!!!(http://jqueryui.com/demos/sortable/#connect-lists)
And then as Senad pointed you must use .live for elements in the dom that are not created when it loads.
Hope this help.