I have a table which should have an option to add a row and delete a row. I used jquery to insert HTML and it worked perfectly, but I was told this method may have drawbacks and I should rather consider cloning. After doing some more research, I tried implementing it in my website. It doesn't seem to be working.
My html code:
<div class="row">
<div class="col-md-12">
<br/>
<!--A card inside the second tab, and the table is inside the card-->
<div class="card">
<div class="header">
<h4 class="title">1.1 Teaching</h4>
<p class="category">Please Add the Courses taught in the academic year</p>
</div>
<div class="content">
<div class="content table-responsive table-full-width" id="t_table">
<table class="table table-hover table-striped" id="t_tab_logic">
<thead>
<th>#</th>
<th>Course</th>
<th>Section</th>
<th>Session</th>
<th>Term</th>
<th>Day/Evening</th>
<th>%age Taught</th>
<th>Load/Overload</th>
<th>Enrolment</th>
<th>Number of T.As/IAs</th>
</thead>
<tbody>
<tr class="tr_clone">
<td>
1
</td>
<td>
<input type="text" name='t_name0' placeholder='Name' class="form-control"/>
</td>
<td>
<input type="text" name='t_section0' placeholder='Section' class="form-control"/>
</td>
<td>
<input type="text" name='t_session0' placeholder='Session' class="form-control"/>
</td>
<td>
<input type="number" name='t_term0' placeholder='Term' class="form-control"/>
</td>
<td>
<input type="text" name='t_day0' placeholder='D/E' class="form-control"/>
</td>
<td>
<input type="number" name='t_%age0' placeholder='%age' class="form-control"/>
</td>
<td>
<input type="text" name='t_load0' placeholder='Load/Over' class="form-control"/>
</td>
<td>
<input type="number" name='t_enrolment0' placeholder='#' class="form-control"/>
</td>
<td>
<input type="number" name='t_number0' placeholder='#' class="form-control"/>
</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-sm-2">
<a id="t_add_row" class="btn btn-primary btn-fill pull-left">Add Row</a>
</div>
<div class="col-sm-2 col-sm-offset-8">
<a id="t_delete_row" class="btn btn-submit btn-fill pull-right">Delete Row</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And my java script code looks like:
$(document).ready(function () {
$("#t_add_row").live('click', function(){
var $tr = $(this).closest('.tr_clone');
var $clone = $tr.clone();
$clone.find(":text").val('');
$tr.after($clone);
});
});
I would also like to implement the delete row link, which I felt would be implemented after I implement the add row link.
Any help would be greatly appreciated, thank you for being patient, I am sort of a beginner at jQuery.
try this code
$("body").on('click','#t_add_row', function(){
var tr = $('#t_tab_logic .tr_clone:last');
var clone = tr.clone();
clone.find("input").val('');
tr.after(clone);
});
Related
I am trying to intercept changes to a WooCommerce Extra product options datetimepicker component. Essentially, it's just a datetimepicker.
I have:
<script>
var box = document.getElementById("myDateTimePicker");
//console.log("#devlog: Active");
box.addEventListener("blur", function(){
var selectedDate = box.value;
console.log(selectedDate);
});
</script>
Which is almost working. It outputs the previous value contained by the datetimepicker, not the value it has just been changed to.
I've tried a range of events in the eventListener but nothing seems to do the trick. Could some kind soul put me out my misery and clue me in to how to get the NEW value from the datetimepicker when it is changed? Thanks.
Update:
Here is the html from the form. The component I'm fighting with is the date-picker inside the last <tr>.
<form class="cart" action="http://blahblahblah:8888/product/191/" method="post" enctype='multipart/form-data'>
<input type="hidden" id="thwepof_product_fields" name="thwepof_product_fields" value="name_of_skater,tel_number,which_day" />
<table class="thwepo-extra-options thwepo_simple" cellspacing="0">
<tbody>
<tr>
<td colspan="2" class="section-title">
<h3 class="">Mandatory information</h3></td>
</tr>
<tr class="">
<td class="label leftside">
<label class="label-tag ">Name of skater</label> <abbr class="required" title="Required">*</abbr></td>
<td class="value leftside">
<input type="text" id="name_of_skater" name="name_of_skater" value="" class="thwepof-input-field validate-required">
</td>
</tr>
<tr class="">
<td class="label leftside">
<label class="label-tag ">Telephone number</label> <abbr class="required" title="Required">*</abbr></td>
<td class="value leftside">
<input type="tel" id="tel_number" name="tel_number" value="" class="thwepof-input-field validate-required">
</td>
</tr>
<tr class="">
<td class="label leftside">
<label class="label-tag ">Pick a day <b>only</b></label> <abbr class="required" title="Required">*</abbr></td>
<td class="value leftside">
<input type="text" autocomplete="off" id="which_day" name="which_day" value="" class="thwepof-input-field thwepof-date-picker validate-required" data-readonly="no">
</td>
</tr>
</tbody>
</table>
<div class="quantity hidden">
<input type="hidden" id="quantity_5e583e6ca4c48" class="qty" name="quantity" value="1" />
</div>
<button type="submit" name="add-to-cart" value="191" class="single_add_to_cart_button button alt">Add to basket</button>
</form>
You can try this:
document.getElementById('myDateTimePicker').onChange = function() {
console.log(document.getElementById('myDateTimePicker').value);
}
You might be able to use this.value, but I wrote it the long way just in case.
Hope this helps.
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
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 });
})
I have list of packages. All of them are radio buttons. When clicked, i get list of price options who are also radio button, but only first price option, others are normal buttons.
When i click on package radio button, i need first price option also checked and active, so it can show some values inside of it. Others needs to be closed.
<div class="col-md-12 packageList">
<h4 class="col-sm-4"><input class="col-sm-1" id="id_radio26"
type="radio" value="26" name="radio"> Paket 1</h4>
<h4 class="col-sm-3">Credits:<span> 20</span></h4>
<h4 class="col-sm-3">Duration: <span>2min</span></h4>
<h4 class="col-sm-2"><span>$200</span>/Month</h4>
</div>
<br>
<div class="package" id="package26">
<label>Price Option: </label>86
<label class="hideRadio">
<input class="price_option" type="radio"
value="86"
name="price_option" checked="checked">
</label>
<br>
<div class="col-md-12 valuesInput">
<div class="" id="price_option_div_86">
<div class="col-md-4 valuesTable">
<table class="table table-striped table-hover">
<thead>
<tr class="bg-primary content-box-header">
<th>Values</th>
</tr>
</thead>
<tbody>
<th>
Vrednost 31<br>
<input type="hidden"
name="value-86[]"
value="Vrednost 31">
</th>
</tbody>
<tbody>
<th>
Vrednost 32<br>
<input type="hidden"
name="value-86[]"
value="Vrednost 32">
</th>
</tbody>
</table>
</div>
</div>
</div>
<label class="hideRadio">
<button class="price_option" type="button"
name="price_option" value="91">
Alternative Payment
</button>
</label>
<br>
<div class="col-md-12 valuesInput">
<div class="" id="price_option_div_91">
<div class="col-md-4 valuesTable">
<table class="table table-striped table-hover">
<thead>
<tr class="bg-primary content-box-header">
<th>Values</th>
</tr>
</thead>
<tbody>
<th>
assd<br>
<input type="hidden"
name="value-91[]"
value="assd">
</th>
</tbody>
<tbody>
<th>
asdasd<br>
<input type="hidden"
name="value-91[]"
value="asdasd">
</th>
</tbody>
</table>
</div>
</div>
</div>
</div>
This is my script for now:
/*Radio buttons */
$('div[id^="package"]').hide();
$('body').on('click', 'input[id^="id_radio"]', function () {
$('div[id^="package"]').hide();
$('#package' + $(this).val()).show();
console.log($(this).val());
});
$('div[id^="price_option_div"]').hide();
$('body').on('click', '.price_option', function () {
$('div[id^="price_option_div_"]').hide();
$("#price_option_div_" + $(this).val()).show();
console.log($(this).val());
});
I assume that u cant change your HTML Code and add some Classes. Therefore you could use something like this:
/* Radio buttons */
// set variables
var $packages = $('div[id^="package"]'),
$priceOptions = $('div[id^="price_option_div"]'),
priceOptionNr;
// hide stuff
$packages.hide();
$priceOptions.hide();
$('input[id^="id_radio"]').on('click', function () {
// hide stuff
$packages.hide();
$priceOptions.hide();
// safe price option value
priceOptionNr = $('#package' + $(this).val())
.find('.price_option').val();
// show specific price option + connected div
$('#package' + $(this).val()).show()
.find('#price_option_div_' + priceOptionNr).show();
});
$('.price_option').on('click', function () {
$priceOptions.hide();
$("#price_option_div_" + $(this).val()).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 packageList">
<h4 class="col-sm-4"><input class="col-sm-1" id="id_radio26" type="radio" value="26" name="radio"> Paket 1</h4>
<h4 class="col-sm-3">Credits:<span> 20</span></h4>
<h4 class="col-sm-3">Duration: <span>2min</span></h4>
<h4 class="col-sm-2"><span>$200</span>/Month</h4>
</div> <br>
<div class="package" id="package26">
<label>Price Option: </label>86
<label class="hideRadio"> <input class="price_option" type="radio" value="86" name="price_option" checked="checked"> </label> <br>
<div class="col-md-12 valuesInput">
<div class="" id="price_option_div_86">
<div class="col-md-4 valuesTable">
<table class="table table-striped table-hover">
<thead>
<tr class="bg-primary content-box-header"> <th>Values</th> </tr>
</thead>
<tbody>
<th> Vrednost 31<br> <input type="hidden" name="value-86[]" value="Vrednost 31"></th>
</tbody>
<tbody>
<th> Vrednost 32<br> <input type="hidden" name="value-86[]" value="Vrednost 32"></th>
</tbody>
</table>
</div>
</div>
</div>
<label class="hideRadio"> <button class="price_option" type="button" name="price_option" value="91"> Alternative Payment</button> </label> <br>
<div class="col-md-12 valuesInput">
<div class="" id="price_option_div_91">
<div class="col-md-4 valuesTable">
<table class="table table-striped table-hover">
<thead>
<tr class="bg-primary content-box-header">
<th>Values</th>
</tr>
</thead>
<tbody>
<th> assd<br> <input type="hidden" name="value-91[]" value="assd"></th>
</tbody>
<tbody>
<th> asdasd<br> <input type="hidden" name="value-91[]" value="asdasd"></th>
</tbody>
</table>
</div>
</div>
</div>
</div>
I'm building an app using sailjs and angularjs, I've a problem on form when to try input a data to database. Here is my form
If I'm input attibute a copy of the object or and array created and a fieldset attributes created on form sub attribute.
$scope.productcustom.templateAttribute = angular.copy($scope.templateAttribute);
_.each($scope.productcustom.variant, function (variant, index) {
//variant.type = 'variant';
variant.index = index;
if (variant.attribute.length > 0) {
_.each(variant.attribute, function (attribute, $index) {
attribute.key = $scope.productcustom.templateAttribute[$index];
})
}
})
and this my view
<div class="grid-100 form-group">
<table class="table">
<tr ng-repeat="template in templateAttribute">
<td>{{template}}</td>
<td>
<button type="button" class="button button-xs button-error button-labeled"
ng-click="removeItem( $index, templateAttribute )">
<span class="button-label"><i class="icon icon-minus-circled"></i></span>
delete
</button>
</td>
</tr>
<tr>
<td>
<input class="form-control input-small" placeholder="attribute name" ng-model="attributeKey"/>
</td>
<td>
<button type="button" class="button button-small button-default button-labeled"
ng-click="addItem(attributeKey, templateAttribute)">
<span class="button-label"><i class="icon icon-plus-circled"></i></span>
add
</button>
</td>
</tr>
</table>
</div>
<div class="grid-100" ng-repeat="template in templateAttribute">
<div class="panel panel-info">
<div class="panel-heading">
<h2 class="panel-title">{{template}}</h2>
</div>
<div class="panel-body">
<table class="table" ng-repeat="variant in productcustom.variant">
<thead>
<tr>
<th>name</th>
<th>additional price</th>
<th colspan="2">file</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<input class="form-control input-small" placeholder="name" ng-model="variant.attribute[$index].name" />
</td>
<td>
<input class="form-control input-small" placeholder="tambahan harga" ng-model="variant.attribute[$index].value" />
</td>
<td rowspan="2">
<button type="button" class="button button-small button-default button-labeled"
ng-click="addItem( product.materials, material)">
<span class="button-label"><i class="icon icon-plus-circled"></i></span>
add
</button>
</td>
</tr>
<tr>
<td colspan="3">
<file-uploader
class="form-control"
max-size="1000"
allowed-extensions="png,jpeg,jpg"
result-model="variant.attribute[$index].gallery"
ng-required="true">
</file-uploader>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I tried to input some sub attributes data not create. This is my partial code controller. So how to insert data like an above form ? please advance
Straight from the docs:
Usage
angular.copy(source, [destination]);
https://docs.angularjs.org/api/ng/function/angular.copy
So do this:
angular.copy($scope.templateAttribute, $scope.productcustom.templateAttribute);
Note, that Destination must be of the same type as source (so both are Arrays or both are Objects). If it's the case that they don't match up, you may have to copy to a new variable and continue the transformation with the new var.