Develop Reference

How to keep proportion of row with helper jquery sortable-ui

I use sortable plugin to create a table where user can drag and drop the rows to change the order. The plugin works fine but the dragged row does not keep the proportions, for example: when you drag the row, the input inside Apodo and Edad is smaller.
I tried to use the helper, but it looks even worse. How could I keep the proportions?
helper: function(e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index)
{
// Set helper cell sizes to match the original sizes
$(this).width($originals.eq(index).width());
});
return $helper;
}
$(function() {
$(".table #bodyAliniacion").sortable({
cursor: 'pointer',
placeholder: "placeholder",
forcePlaceholderSize: true,
axis: 'y',
dropOnEmpty: false,
/*helper: function(e, tr)
{
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index)
{
// Set helper cell sizes to match the original sizes
$(this).width($originals.eq(index).width());
});
return $helper;
},*/
start: function (e, ui) {
ui.item.addClass("selected");
},
stop: function (e, ui) {
ui.item.removeClass("selected");
$(this).find("tr").each(function (index) {
let idFila = this.id;
//if (idFila !== undefined){
// $("#ordenJugador-"+this.id.split("-")[1]).val(index+1);
//}
});
}
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script
src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"
integrity="sha256-6XMVI0zB8cRzfZjqKcD01PBsAy3FlDASrlC8SxCpInY="
crossorigin="anonymous"></script>
<div class="row">
<div class="col-8">
<table class="table">
<thead>
<th></th>
<th>Dorsal</th>
<th>Nombre</th>
<th>Demarcación</th>
<th>Titular</th>
<th>Apodo</th>
<th>Edad</th>
</thead>
<tbody id="bodyAliniacion">
<tr>
<td style="width:5%;">
<img alt="image" src="https://www.w3schools.com/html/pic_trulli.jpg" class="img-reponsive img-sm" width="100%">
</td>
<td style="width:7%;">
<input type="number" min="1" class="form-control">
</td>
<td style="vertical-align: middle;">
Jugador 1
</td>
<td style="width:10%;">
<select>
<option>Sin demarcación</option>
</select>
</td>
<td style="width:7%; vertical-align: middle;">
<input type="checkbox" class="form-control">
</td>
<td style="vertical-align: middle;">
<input type="text" class="form-control">
</td>
<td style="width:5%; vertical-align: middle;">
<input type="text" style="width:70%;" disabled>
</td>
<td class="float-right; col-12">
<a style="font-size: x-large;color: red;float: right;">
<i class="fa fa-arrow-circle-up"></i>
</a>
<a style="font-size: x-large;color: red;float: right;margin-right: 15;">
<i class="fa fa-arrow-circle-down"></i>
</a>
</td>
</tr>
<tr>
<td style="width:5%;">
<img alt="image" src="https://www.w3schools.com/html/pic_trulli.jpg" class="img-reponsive img-sm" width="100%">
</td>
<td style="width:7%;">
<input type="number" min="1" class="form-control">
</td>
<td style="vertical-align: middle;">
Jugador 2
</td>
<td style="width:10%;">
<select>
<option>Sin demarcación</option>
</select>
</td>
<td style="width:7%; vertical-align: middle;">
<input type="checkbox" class="form-control">
</td>
<td style="vertical-align: middle;">
<input type="text" class="form-control">
</td>
<td style="width:5%; vertical-align: middle;">
<input type="text" style="width:70%;" disabled>
</td>
<td class="float-right; col-12">
<a style="font-size: x-large;color: red;float: right;">
<i class="fa fa-arrow-circle-up"></i>
</a>
<a style="font-size: x-large;color: red;float: right;margin-right: 15;">
<i class="fa fa-arrow-circle-down"></i>
</a>
</td>
</tr>
<tr>
<td style="width:5%;">
<img alt="image" src="https://www.w3schools.com/html/pic_trulli.jpg" class="img-reponsive img-sm" width="100%">
</td>
<td style="width:7%;">
<input type="number" min="1" class="form-control">
</td>
<td style="vertical-align: middle;">
Jugador 3
</td>
<td style="width:10%;">
<select>
<option>Sin demarcación</option>
</select>
</td>
<td style="width:7%; vertical-align: middle;">
<input type="checkbox" class="form-control">
</td>
<td style="vertical-align: middle;">
<input type="text" class="form-control">
</td>
<td style="width:5%; vertical-align: middle;">
<input type="text" style="width:70%;" disabled>
</td>
<td class="float-right; col-12">
<a style="font-size: x-large;color: red;float: right;">
<i class="fa fa-arrow-circle-up"></i>
</a>
<a style="font-size: x-large;color: red;float: right;margin-right: 15;">
<i class="fa fa-arrow-circle-down"></i>
</a>
</td>
</tr>
<tr>
<td style="width:5%;">
<img alt="image" src="https://www.w3schools.com/html/pic_trulli.jpg" class="img-reponsive img-sm" width="100%">
</td>
<td style="width:7%;">
<input type="number" min="1" class="form-control">
</td>
<td style="vertical-align: middle;">
Jugador 4
</td>
<td style="width:10%;">
<select>
<option>Sin demarcación</option>
</select>
</td>
<td style="width:7%; vertical-align: middle;">
<input type="checkbox" class="form-control">
</td>
<td style="vertical-align: middle;">
<input type="text" class="form-control">
</td>
<td style="width:5%; vertical-align: middle;">
<input type="text" style="width:70%;" disabled>
</td>
<td class="float-right; col-12">
<a style="font-size: x-large;color: red;float: right;">
<i class="fa fa-arrow-circle-up"></i>
</a>
<a style="font-size: x-large;color: red;float: right;margin-right: 15;">
<i class="fa fa-arrow-circle-down"></i>
</a>
</td>
</tr>
<tr>
<td style="width:5%;">
<img alt="image" src="https://www.w3schools.com/html/pic_trulli.jpg" class="img-reponsive img-sm" width="100%">
</td>
<td style="width:7%;">
<input type="number" min="1" class="form-control">
</td>
<td style="vertical-align: middle;">
Jugador 5
</td>
<td style="width:10%;">
<select>
<option>Sin demarcación</option>
</select>
</td>
<td style="width:7%; vertical-align: middle;">
<input type="checkbox" class="form-control">
</td>
<td style="vertical-align: middle;">
<input type="text" class="form-control">
</td>
<td style="width:5%; vertical-align: middle;">
<input type="text" style="width:70%;" disabled>
</td>
<td class="float-right; col-12">
<a style="font-size: x-large;color: red;float: right;">
<i class="fa fa-arrow-circle-up"></i>
</a>
<a style="font-size: x-large;color: red;float: right;margin-right: 15;">
<i class="fa fa-arrow-circle-down"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>

Can be done, hardcoding the styles, for example:
$(function () {
$(".table #bodyAliniacion").sortable({
cursor: "pointer",
placeholder: "placeholder",
forcePlaceholderSize: true,
axis: "y",
dropOnEmpty: false,
start: function (e, ui) {
ui.item[0].children[0].children[0].style.width = "5%";
ui.item[0].children[1].children[0].style.width = "48.23px";
ui.item[0].children[4].children[0].style.width = "49.36px";
ui.item[0].children[5].children[0].style.width = "48.23px";
ui.item[0].children[6].children[0].style.width = "25.84px";
stop: function (e, ui) {},
});
});
It isn't an elegant way but you can improve it.

How to show my data on UI Grid using AngularJS in ASP.NET MVC

I have a page where I can do CRUD operations using ASP.NET MVC with AngularJS. I am showing the my Data in the html table. I want to show them with UI Grid as its in http://ui-grid.info/
Can anyone help me show the data in the UI Grid?
This is how my WebApp looks:
Controller.js
app.controller('crudController', function ($scope, crudService) {
$scope.IsNewRecordProject = 1;
loadRecordsProject();
//Function to load all Projects records
function loadRecordsProject() {
var promiseGet = crudService.getProjects(); //The Method Call from service
promiseGet.then(function (pl) { $scope.Projects = pl.data },
function (errorPl) {
$log.error('failure loading Projects', errorPl);
});
}
});
Module.js
var app;
(function () {
app = angular.module("crudModule", []);
})();
Service.js
app.service('crudService', function ($http) {
//Get All Projects
this.getProjects = function () {
return $http.get("/api/ProjectsAPI");
}
});
And this is my Project.cshtml file
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!-- page content -->
<body>
<div class="container-fluid">
<div class="header-title">
<h1>Projects</h1>
<br />
</div>
</div>
#*<div class="right_col" role="main">*#
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12" ng-controller="crudController">
<div class="col-md-7">
<div class="col-md-4 left-zero">
<div class="form-group">
<div class="col-md-5 left-zero">
<div class="form-group row">
<div class="col-md-2">
<input id="txtSearch" type="text" placeholder="Search by name..." class="form-control" Height="33" Width="200" />
</div>
<div class="col-md-2 pull-right">
<div style="margin-left: 47px;"><input id="btnSearch" type="button" value="Search" Class="btn btn-primary" /></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 pull-right">
<table style="border-collapse: separate; border-spacing: 10px 0px;">
<tr>
<td>
<select id="cbStatus" class="form-control">
<option>Active</option>
<option>Inactive</option>
</select>
</td>
<td>
<select id="cbPlatform" class="form-control">
<option>Desktop</option>
<option>Web</option>
<option>Mobile</option>
</select>
</td>
<td>
<select id="cbVerify" class="form-control">
<option>Veryfy1</option>
<option>Veryfy2</option>
</select>
</td>
<td>
<select id="cbBlank" class="form-control">
<option>Test1</option>
<option>Test2</option>
</select>
</td>
<td>
<select id="cbBlank2" class="form-control">
<option>Test1</option>
<option>Test2</option>
</select>
</td>
<td><input id="btnNewProjects" type="button" value="Create New" data-ng-click="ShowInsertPanel = !ShowInsertPanel" class="btn btn-success" /></td>
</tr>
</table>
</div>
<table class="table table-bordered" align="center">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Application</th>
<th>Status</th>
</tr>
</thead>
<tbody ng-repeat="Proj in Projects">
<tr ng-click="getProject(Proj)">
<td width="50"> <span>{{Proj.id}}</span></td>
<td width="150"> <span>{{Proj.name}}</span></td>
<td width="150"> <span>{{Proj.application}}</span></td>
<td width="150"> <span>{{Proj.status}}</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-5">
<br />
<br />
<div class="row">
<div class="col-md-12" ng-show="ShowInsertPanel">
<div class="x_panel">
<div class="x_title">
<h2>New Project <small></small></h2>
<ul class="nav navbar-right panel_toolbox">
<li class="pull-right">
<a class="close-link" data-ng-click="ShowInsertPanel = !ShowInsertPanel"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div class="dashboard-widget-content">
<table class="table table" align="center">
<tbody>
<tr>
<th>ID</th>
<td style="vertical-align: middle;"><input type="text" id="p_id" readonly="readonly" ng-model="id" class="form-control" /></td>
</tr>
<tr>
<th>Name</th>
<td style="vertical-align: middle;"><input type="text" id="p_name" required ng-model="name" class="form-control" /></td>
</tr>
<tr>
<th>Application</th>
<td style="vertical-align: middle;"><input type="text" id="p_application" required ng-model="application" class="form-control" /></td>
</tr>
<tr>
<th>Status</th>
<td style="vertical-align: middle;">
<select id="cbStatus" required ng-model="status" class="form-control">
<option>Active</option>
<option>Inactive</option>
</select>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="button" id="new" value="New" ng-click="clearProject()" class="btn btn-default" />
<input type="button" id="save" value="Save" ng-click="saveProject()" class="btn btn-success" />
<input type="button" id="delete" value="Delete" ng-click="deleteProject()" class="btn btn-danger" />
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<br />
#*</div>*#
</body>
<!-- /page content -->

You need to define the grid options and return the data as JSON. Look at the following tutorial documentation: http://ui-grid.info/docs/#/tutorial/106_binding

preventing main view rendering after rendering a partial view

i am using partial view to show some detail according to user selection in dropdown button and click a search button.and i am using javascript for laoding partial view.But afer loading partial view the main view getting load and after a moment my partial view is gone.please help.
My main view named CreateBidSecondStep
<div id="container">
<div class="wrapper white-bg">
<div class="row mar-xsm-b">
<div class="col s12 l12 m12">
<div class="step">
<span class="pull-left">Step 1 ></span>
<span class="active pull-left">Step 2 ></span>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row mar-sm-b">
<div class="col s12 m12 l12">
<form id="form1" name="form1" method="post" action="">
<div class="border-light">
<div class="heading24 mar-sm-l mar-sm-r">Bill of Material</div>
<div class="row">
<div class="col s8 m8 l8" id="billMaterial">
<div class="ProdHeading">Search</div>
<div class="pull-left">
<label class="label pull-left">Item Code</label>
#*<div class="editor-field">
#Html.DropDownList("itemcode", Model.listofallitem, "Select Item")
</div>*#
<select class="browser-default pull-left width_120" name="itemcode" id="itemcodeid" >
<option>Select Item Code</option>
#foreach(var item in Model.listofallitem)
{
<option value="#item.Value">#item.Value</option>
}
#*<option>Item Code</option>
<option>Item Code</option>
<option>Item Code</option>*#
</select>
</div>
<div class="pull-left mar-lg-l">
<label class="label pull-left">Item Name</label>
<input type="text" class="pull-left" name="cap" />
</div>
<div class="pull-left mar-lg-l">
<button class="btn waves-effect waves-light" type="submit" name="action" id="btnsearch">Search</button>
</div>
<div class="clearfix"></div>
<div class="bdr-gray-b mar-sm-t mar-sm-b"></div>
<div class="pull-left">
<label class="label pull-left width_120">Total Item Quantity</label>
<input type="number" maxlength="5" class="pull-left width_80" name="cap" />
<div class="clearfix"></div>
<label class="label pull-left width_120">Item Quantity</label>
<input type="number" class="pull-left width_80" name="cap" />
<div class="clearfix"></div>
<label class="label pull-left width_120">Location</label>
<input type="text" class="pull-left width_80" name="cap" />
</div>
<div class="pull-left mar-lg-l">
<label>Description</label>
<div class="clearfix"></div>
<textarea></textarea>
</div>
<div class="pull-left mar-lg-l mar-md-t">
<button class="btn waves-effect waves-light" style="bottom:0px" type="submit" name="action">Add to BOM</button>
</div>
</div>
<div class="col s4 m4 l4">
<div class="table_h2" id="SAPdiv">
</div>
</div>
</div>
<div class="row">
<div class="col s12 l12 m12 ">
<div class="table_h2">
<table class="TableID2">
<thead>
<tr>
<th>Item Code</th>
<th>Description</th>
<th>Quantity</th>
<th>Approved Supplied</th>
</tr>
</thead>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="row border-light mar-sm-t pad-sm">
<div class="col s12 l12 m12">
<div class="pull-left">
</div>
<div class="pull-right">
<button class="btn waves-effect waves-light" type="submit" name="action">PREVIOUS</button>
<button class="btn waves-effect waves-light" type="submit" name="action">SEND TO ADVANCE PURCHASE</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
My partial view named _CreateBidSecondStep
model List<Company.Project.Shared.BiddingSecondStepSAP>
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
#using (Html.BeginForm())
{
if (Model != null)
{
<table class="TableID2">
<thead>
<tr>
<th>Item Name</th>
<th>Item Code</th>
<th>SAP Quantity</th>
</tr>
</thead>
#foreach(var item in Model)
{
<tr>
<td>
#item.ItemId
</td>
<td>
#item.ItemName
</td>
<td>
#item.SAPQty
</td>
</tr>
}
</table>
}
}
JavaScript Code to call partial view
<script type="text/javascript">
var url = '#Url.Action("SAPPartailView", "CreateBid")';
$('#btnsearch').click(function () {
var keyWord = $('#itemcodeid').val();
$('#SAPdiv').load(url, { searchText: keyWord });
})
</script>
Partial view action
public PartialViewResult SAPPartailView(string searchText)
{
BiddingSecondStepBDC _obj=new BiddingSecondStepBDC();
List<BiddingSecondStepSAP> newlist = new List<BiddingSecondStepSAP>();
newlist = _obj.GetItemSAP(searchText);
return PartialView("_CreateBidSecondStepSAP",newlist);
}

You can use the preventDefault() method to stop the page from rendering.
$('#btnsearch').click(function (e) {
e.preventDefault();
var keyWord = $('#itemcodeid').val();
$('#SAPdiv').load(url, { searchText: keyWord });
})

twitter Bootstrap 3.x form in modal do

I have a form contained inside a Twitter Bootstrap large modal dialog.
When I click the SUBMIT button, the form does NOT submit and the modal does NOT dismiss. The submitEventHandler() function is a fully tested and debugged function ensuring that all required fields have values entered/selected before allowing a submit event to occur.
function initializeEventHandlers() {
$('#ADD_BUTTON').on('click', function() {
$('#id').val(null);
$('#level').val(null);
$('#name').val(null);
$('#edit').val(false);
$('#DEGREE_ENTRY').modal('show');
});
$('#DEGREE_FORM').submit(function() {
$('#DEGREE_ENTRY').modal('hide');
return submitEventHandler();
});
} // end function initializeEventHandlers()
<!DOCTYPE HTML>
<html class="no-js" lang="en">
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://www.lcudev.com/_css/bootstrap.min.css">
<link rel="stylesheet" href="http://www.lcudev.com/_css/open_sans.css">
<link rel="stylesheet" href="http://www.lcudev.com/_css/raleway.css">
<link rel="stylesheet" href="http://www.lcudev.com/_css/scriptina.css">
<link rel="stylesheet" href="http://www.lcudev.com/_css/glyphicons.css">
<link rel="stylesheet" href="http://www.lcudev.com/_css/glyphicons_filetypes.css">
<link rel="stylesheet" href="http://www.lcudev.com/_css/glyphicons_social.css">
<link rel="stylesheet" href="http://www.lcudev.com/_css/master.css">
<link rel="stylesheet" href="http://www.lcudev.com/_css/forms.css">
<script language="javascript" src="http://www.lcudev.com/_javascript/modernizr.custom.92742.js"></script>
<script language="javascript" src="http://www.lcudev.com/_javascript/jquery-2.1.4.min.js"></script>
<script language="javascript" src="http://www.lcudev.com/_javascript/bootstrap.min.js"></script>
<script language="javascript" src="http://www.lcudev.com/_javascript/master.js"></script>
<script language="javascript" src="http://www.lcudev.com/_javascript/forms.js"></script>
<script language="javascript">
$('document').ready(function() {
initializeEventHandlers();
});
</script>
<noscript>
<meta http-equiv="refresh" content="0;URL=/miscellaneous/no_javascript.php">
</noscript>
</head>
<body>
<div id="CONTAINER" class="container">
<header class="row">
<h1>Life Christian University</h1>
<a href="#">
<img src="http://www.lcudev.com/_images/logos/lcu_logo_logotype_lg_20th_anniv.jpg" class="img-responsive">
</a>
</header>
<div class="row">
<!-- main menu code goes here -->
</div>
<ol class="breadcrumb">
<!-- breadcrumbs <li> items goew here -->
</ol>
<div id="SYSTEM_MSG" class="alert alert-info bold col-md-12">Alert Message</div>
<section class="row">
<hgroup>
<h1>Degrees Maintenance</h1>
</hgroup>
<div class="row" style="margin-bottom: 2em;">
<div class="col-md-4 col-md-offset-8">
<a id="ADD_BUTTON" type="button" class="btn btn-primary btn-sm pull-right" href="#"><span class=\"glyphicons glyphicons-plus\"></span> Add a New Degree Code</a>
</div>
</div>
<article class="row">
<div class="col-md-6 col-md-offset-3">
<div class="table-responsive">
<table class="table table-bordered table-condensed table-striped" summary="A list of classes for this campus.">
<colgroup>
<col id="ID">
<col id="LEVEL">
<col id="NAME">
<col id="ACTIONS">
</colgroup>
<thead>
<tr>
<th scope="col" class="text-right">ID</th>
<th scope="col" class="text-center">Level</th>
<th scope="col" class="text-left">Name</th>
<th scope="col" class="text-left">Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<th class="text-center" colspan="4">There are 15 degreess defined</th>
</tr>
</tfoot>
<tbody>
<tr>
<td class="text-right">A</td>
<td class="text-center">1</td>
<td class="text-left">Associate in</td>
<td class="text-left"><a class="edit" data-id="A" data-level="1" data-name="Associate in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>
<a class="kill" data-id="A" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
</a>
</td>
</tr>
<tr>
<td class="text-right">AA</td>
<td class="text-center">1</td>
<td class="text-left">Associate of Arts in</td>
<td class="text-left"><a class="edit" data-id="AA" data-level="1" data-name="Associate of Arts in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>
<a class="kill" data-id="AA" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
</a>
</td>
</tr>
<tr>
<td class="text-right">AD</td>
<td class="text-center">1</td>
<td class="text-left">Advanced Diploma in</td>
<td class="text-left"><a class="edit" data-id="AD" data-level="1" data-name="Advanced Diploma in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>
<a class="kill" data-id="AD" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
</a>
</td>
</tr>
<tr>
<td class="text-right">B</td>
<td class="text-center">1</td>
<td class="text-left">Bachelor of</td>
<td class="text-left"><a class="edit" data-id="B" data-level="1" data-name="Bachelor of" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>
<a class="kill" data-id="B" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
</a>
</td>
</tr>
<tr>
<td class="text-right">BA</td>
<td class="text-center">1</td>
<td class="text-left">Bachelor of Arts in</td>
<td class="text-left"><a class="edit" data-id="BA" data-level="1" data-name="Bachelor of Arts in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>
<a class="kill" data-id="BA" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
</a>
</td>
</tr>
<tr>
<td class="text-right">BS</td>
<td class="text-center">1</td>
<td class="text-left">Bachelor of Science in</td>
<td class="text-left"><a class="edit" data-id="BS" data-level="1" data-name="Bachelor of Science in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>
<a class="kill" data-id="BS" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
</a>
</td>
</tr>
<tr>
<td class="text-right">CMP</td>
<td class="text-center">1</td>
<td class="text-left">Bachelor of Church Planting & Missions</td>
<td class="text-left"><a class="edit" data-id="CMP" data-level="1" data-name="Bachelor of Church Planting & Missions" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a> <a class="kill" data-id="CMP"
href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span></a>
</td>
</tr>
<tr>
<td class="text-right">D</td>
<td class="text-center">1</td>
<td class="text-left">Diploma in</td>
<td class="text-left"><a class="edit" data-id="D" data-level="1" data-name="Diploma in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>
<a class="kill" data-id="D" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
</a>
</td>
</tr>
<tr>
<td class="text-right">DLaw</td>
<td class="text-center">7</td>
<td class="text-left">Doctor of Laws in</td>
<td class="text-left"><a class="edit" data-id="DLaw" data-level="7" data-name="Doctor of Laws in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>
<a class="kill" data-id="DLaw" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
</a>
</td>
</tr>
<tr>
<td class="text-right">DMin</td>
<td class="text-center">6</td>
<td class="text-left">Doctor of Ministry in</td>
<td class="text-left"><a class="edit" data-id="DMin" data-level="6" data-name="Doctor of Ministry in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a> <a class="kill" data-id="DMin" href="#"
title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span></a>
</td>
</tr>
<tr>
<td class="text-right">DMis</td>
<td class="text-center">7</td>
<td class="text-left">Doctor of Missiology in</td>
<td class="text-left"><a class="edit" data-id="DMis" data-level="7" data-name="Doctor of Missiology in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a> <a class="kill" data-id="DMis" href="#"
title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span></a>
</td>
</tr>
<tr>
<td class="text-right">Doc</td>
<td class="text-center">7</td>
<td class="text-left">Doctor of</td>
<td class="text-left"><a class="edit" data-id="Doc" data-level="7" data-name="Doctor of" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>
<a class="kill" data-id="Doc" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
</a>
</td>
</tr>
<tr>
<td class="text-right">EdD</td>
<td class="text-center">7</td>
<td class="text-left">Doctor of Education in</td>
<td class="text-left"><a class="edit" data-id="EdD" data-level="7" data-name="Doctor of Education in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a> <a class="kill" data-id="EdD" href="#"
title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span></a>
</td>
</tr>
<tr>
<td class="text-right">M</td>
<td class="text-center">5</td>
<td class="text-left">Master of</td>
<td class="text-left"><a class="edit" data-id="M" data-level="5" data-name="Master of" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>
<a class="kill" data-id="M" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
</a>
</td>
</tr>
<tr>
<td class="text-right">MA</td>
<td class="text-center">5</td>
<td class="text-left">Master of Arts in</td>
<td class="text-left"><a class="edit" data-id="MA" data-level="5" data-name="Master of Arts in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>
<a class="kill" data-id="MA" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</article>
<div class="modal fade" id="DEGREE_ENTRY" tabindex="-1" role="dialog" aria-labelledby="classEntryModalDialog" aria-hidden="TRUE">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">New Degree Entry</h4>
</div>
<div class="modal-body">
<form id="DEGREE_FORM" name="DEGREE_FORM" role="form" method="post" action="http://admin.lcudev.com/config/degrees/index.php">
<input name="action" id="action" type="hidden" value="">
<div class="row">
<div class="col-md-4 col-md-offset-1">
<div id="id_group" class="form-group">
<label for="id" class="control-label">Degree ID*</label>
<div class="input-group">
<input name="id" id="id" type="text" class="form-control" tabindex="10" required autofocus pattern="[a-zA-Z]+" title="Please enter a new degree ID code here" placeholder="degreeID" value="">
<span class="input-group-addon input-group-sm">
<span id="id_status" class="bold"></span>
</span>
</div>
<span id="id_error" class="help-block"> </span>
</div>
</div>
<div class="col-md-5">
<div id="level_group" class="form-group">
<label for="level" class="control-label">Degree Level*</label>
<select name="level" id="level" class="form-control" tabindex="20">
<option value="">- Select -</option>
<option value="1">Freshman</option>
<option value="2">Sophomore</option>
<option value="3">Junior</option>
<option value="4">Senior</option>
<option value="5">Masters</option>
<option value="6">DMin</option>
<option value="7">PhD</option>
</select>
<span id="level_error" class="help-block"> </span>
</div>
</div>
<div class="col-md-2"> </div>
</div>
<div class="row">
<div class="col-md-9 col-md-offset-1">
<div id="name_group" class="form-group">
<label for="name" class="control-label">Degree Name*</label>
<div class="input-group">
<input name="name" id="name" type="text" class="form-control" tabindex="30" required pattern="[a-zA-Z ]+" title="Please enter the degree name here" placeholder="degree name" value="">
<span class="input-group-addon input-group-sm">
<span id="name_status" class="bold"></span>
</span>
</div>
<span id="name_error" class="help-block"> </span>
</div>
</div>
<div class="col-md-2"> </div>
</div>
</form>
</div>
<div class="modal-footer">
<button name="CANCEL" id="CANCEL" type="button" class="btn btn-link" tabindex="50" data-dismiss="modal"><span class="glyphicons glyphicons-ban"></span> Cancel & Close</button>
<button name="SUBMIT" id="SUBMIT" type="button" class="btn btn-primary" tabindex="40" form="DEGREE_FORM"><span class="glyphicons glyphicons-upload"></span> Save This Degree</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- InstanceEndEditable -->
</section>
<div class="row">
<button id="TOP" type="button" class="btn btn-xs btn-link" tabindex="32767"><span class="glyphicons glyphicons-up-arrow"></span> Back to Top of Page</button>
</div>
<footer class="row">
© Copyright 2015 by Life Christian University, Inc. • All rights reserved. • Unauthorized duplication of site content is strictly forbidden
<p id="siteseal" style="margin-top: 6px"><span id="siteseal"><script type="text/javascript" src="https://seal.godaddy.com/getSeal?sealID=zfFa5wE7mSdFUIwGJyK7j2gy8j79He28Y1eOLBZL34xkPov1I8nxgEtNv"></script></span>
</p>
</footer>
</div>
<!-- end #CONTAINER -->
<script language="javascript">
<!-- TemplateBeginEditable name="BottomScript" -->
$('#TOP').on('click', function() {
scrollToTop();
});
<!-- TemplateEndEditable -->
</script>
</body>
<!-- InstanceEnd -->
</html>
Is this a Bootstrap bug or am I missing something/using the wrong approach?

You should put the submit button inside the < form > block. The way you have used it submit button, there is no way for the browser, nor bootstrap to know the relation between these elements. Just move it inside.
<form>
....
<input type='submit'>
</form>
will work.

Collapsible table change chevron icon on click

I'm working on a table which contains hidden details for each row. Table rows are made with Bootstrap accordion.
Accordion rows and hidden details are working fine but the JS that changes the chevron icon when toggling [collapsed/expanded] is not working properly. It should change the chevron icon just on the clicked row but currently it changes the chevron icon for all rows.
I have read some related posts regarding my question and have tried them all but I'm unable to get it working. What I'm missing?
There is a Bootply Demo here
HTML
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1><i class="fa fa-file-text"></i> Maintenance Work Requests <small>List</small></h1>
<ol class="breadcrumb">
<li><i class="fa fa-home"></i> Home</li>
<li class="active">Listado de Solicitudes</li>
</ol>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-wrench"></i> Maintenance Work Requests</h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table id="solicitudes" class="table table-bordered table-hover table-striped tablesorter" style="vertical-align:middle; border-collapse:collapse">
<thead>
<tr>
<th class="header" style="text-align:center"></th>
<th class="header" style="text-align:center"># <i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Títle <i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Component<i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Created <i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Type<i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Approved By<i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Status <i class="fa fa-sort"></i></th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#1" class="accordion-toggle" style="cursor:pointer">
<td style="text-align:center"><i class="fa fa-plus-square"></i></td>
<td style="text-align:center">3325</td>
<td>Trabajo sobre Sistema Eléctrico</td>
<td>710.100.00.00 - Sistema Eléctrico</td>
<td style="text-align:center">2014/05/24</td>
<td><p class="text-info" style="text-align:center"><b>Solicitud</b></p></td>
<td style="text-align:center"></td>
<td class="info" style="text-align:center"><span class="label label-primary" style="font-size:small">Creada <i class="fa fa-bolt"></i></span></td>
</tr>
<tr>
<td colspan="8" class="hiddenRow">
<div class="accordion-body collapse" id="1">
<div class="bs-callout bs-callout-info" style="margin:0px;">
<h4><i class="fa fa-info"></i> Detalles</h4>
<p>
Details for row #1
</p>
</div>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#2" class="accordion-toggle" style="cursor:pointer">
<td style="text-align:center"><i class="fa fa-plus-square"></i></td>
<td style="text-align:center">3324</td>
<td>AVERIA: Correa transmisión Motor Aux</td>
<td>620.100.20.00 - Transmisión</td>
<td style="text-align:center">2014/05/01</td>
<td style="text-align:center"><p class="text-danger"><b>Avería</b></p></td>
<td style="text-align:center">Supervisor Mantenimiento</td>
<td class="success" style="text-align:center"><span class="label label-success" style="font-size:small">Aceptada <i class="fa fa-thumbs-o-up"></i></span></td>
</tr>
<tr>
<td colspan="8" class="hiddenRow">
<div class="accordion-body collapse" id="2">
<div class="bs-callout bs-callout-info" style="margin:0px;">
<h4><i class="fa fa-info"></i> Detalles</h4>
<p>
Details for row #2
</p>
</div>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#3" class="accordion-toggle" style="cursor:pointer">
<td style="text-align:center"><i class="fa fa-plus-square"></i></td>
<td style="text-align:center">3327</td>
<td>Revisión Panel Eléctrico</td>
<td>710.100.60.10 - Panel Nº 1</td>
<td style="text-align:center">2014/04/27</td>
<td style="text-align:center"><p class="text-info"><b>Solicitud</b></p></td>
<td style="text-align:center"></td>
<td class="warning" style="text-align:center"><span class="label label-warning" style="font-size:small">Revisión <i class="fa fa-eye"></i></span></td>
</tr>
<tr>
<td colspan="8" class="hiddenRow">
<div class="accordion-body collapse" id="3">
<div class="bs-callout bs-callout-info" style="margin:0px;">
<h4><i class="fa fa-info"></i> Detalles</h4>
<p>
Details for row #3
</p>
</div>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#4" class="accordion-toggle" style="cursor:pointer">
<td style="text-align:center"><i class="fa fa-plus-square"></i></td>
<td style="text-align:center">3323</td>
<td>Chequeo cableado catenaria</td>
<td>320.200.60.30 - Catenaria</td>
<td style="text-align:center">2014/04/26</td>
<td style="text-align:center"><p class="text-info"><b>Solicitud</b></p></td>
<td style="text-align:center"></td>
<td class="danger" style="text-align:center"><span class="label label-danger" style="font-size:small">Rechazada <i class="fa fa-thumbs-o-down"></i></span></td>
</tr>
<tr>
<td colspan="8" class="hiddenRow">
<div class="accordion-body collapse" id="4">
<div class="bs-callout bs-callout-info" style="margin:0px;">
<h4><i class="fa fa-info"></i> Detalles</h4>
<p>
Details for row #4
</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div><!-- /.row -->
<div>
<p><button type="button" onclick="location.href='#Url.Action(" index",="" "maintworequests",="" null)';return="" false;"="" class="btn btn-primary btn-lg" style="font-size: 25px"><i class="fa fa-mail-reply"></i> Volver</button></p>
</div>
</div><!-- /#page-wrapper -->
JS
$('tr').on('shown.bs.collapse', function(){
$(this).parent().find(".fa-plus-square").removeClass("fa-plus-square").addClass("fa-minus-square");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".fa-minus-square").removeClass("fa-minus-square").addClass("fa-plus-square");
});

Change your .parent() to .prev() or .prev('tr')
$('tr').on('shown.bs.collapse', function(){
$(this).prev('tr').find(".fa-plus-square").removeClass("fa-plus-square").addClass("fa-minus-square");
}).on('hidden.bs.collapse', function(){
$(this).prev('tr').find(".fa-minus-square").removeClass("fa-minus-square").addClass("fa-plus-square");
});

This should work:
$(".accordion-toggle").on("click", function () {
if($(this).find(".fa").hasClass("fa-plus-square")) {
$(this).find(".fa").removeClass("fa-plus-square").addClass("fa-minus-square");
} else {
$(this).find(".fa").removeClass("fa-minus-square").addClass("fa-plus-square");
}
});