How do I manipulate the jQuery Clone to remove an attribute - javascript

I have a table with rows where data is populated through the foreach.
I am using :last selector to select the element and clone to add new row. Whereas using remove to delete the rows.
While populating the result using foreach, I have disabled few fields, I am looking for a workaround on how to remove the disabled attribute for the particular element.
Prefilled the data for ease
$("#add_row").on("click", function (e) {
var $tableBody = $('#tab_logic').find("tbody"),
$trLast = $tableBody.find("tr:last"),
$trNew = $trLast.clone();
$trLast.after($trNew);
});
$("#delete_row").click(function () {
$('#tab_logic #tab_logic_body tr:last').remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tab_logic" id="tab_logic">
<thead class="orange ">
<tr>
<th>
Product Name
</th>
<th>
HSN Code
</th>
<th class="center">
GST
</th>
<th>
Quantity
</th>
<th>
Rate(per Nos)
</th>
<th>
Amount
</th>
</tr>
</thead>
<tbody id="tab_logic_body">
#foreach ($invoice_details as $items) // Can be ignored
<tr>
<td>
<input type="text" class="product_name autocomplete" placeholder="" value="Product Name" disabled>
</td>
<td>
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<input type="text" class="hsn_code autocomplete" placeholder="" value="HSNCODE">
</div>
</div>
</div>
</td>
<td>
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<input type="text" class="gst autocomplete" placeholder="GST" name="gst[]"
readonly="readonly" value="18">
</div>
</div>
</div>
</td>
<td>
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<input type="number" name='quantity[]' placeholder='Enter Qty' class="form-control qty"
step="0" min="0" value="1" />
</div>
</div>
</div>
</td>
<td>
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<input type="number" name='product_price[]' placeholder='Enter Price'
class="form-control product_price" step="0" min="0" value="100" />
</div>
</div>
</div>
</td>
<td>
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<input type="number" name='row_total_amount[]' placeholder='Total Amount'
class="form-control row_total_amount" step="0" min="0" value="118" />
</div>
</div>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
<table>
<thead>
<tr>
<th>
<th class="right">
<button type="button" class="btn z-depth-1" id="add_row"><i class="material-icons">add_box</i>
</button>
<button type="button" class="btn z-depth-1 red" id="delete_row"><i class="material-icons">remove</i>
</button>
</th>
</th>
</tr>
</thead>
</table>


To achieve this you can use find() within the $trNew to retrieve all disabled form controls. Then you can use prop('disabled', false) to enable them again:
$trNew.find(':input[disabled]').prop('disabled', false);
$("#add_row").on("click", function(e) {
var $tableBody = $('#tab_logic').find("tbody"),
$trLast = $tableBody.find("tr:last"),
$trNew = $trLast.clone();
$trLast.after($trNew);
$trNew.find(':input[disabled]').prop('disabled', false);
});
$("#delete_row").click(function() {
$('#tab_logic #tab_logic_body tr:last').remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tab_logic" id="tab_logic">
<thead class="orange ">
<tr>
<th>Product Name</th>
<th>HSN Code</th>
<th class="center">GST</th>
<th>Quantity</th>
<th>Rate(per Nos)</th>
<th>Amount</th>
</tr>
</thead>
<tbody id="tab_logic_body">
<tr>
<td>
<input type="text" class="product_name autocomplete" placeholder="" value="Product Name" disabled>
</td>
<td>
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<input type="text" class="hsn_code autocomplete" placeholder="" value="HSNCODE">
</div>
</div>
</div>
</td>
<td>
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<input type="text" class="gst autocomplete" placeholder="GST" name="gst[]" readonly="readonly" value="18">
</div>
</div>
</div>
</td>
<td>
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<input type="number" name='quantity[]' placeholder='Enter Qty' class="form-control qty" step="0" min="0" value="1" />
</div>
</div>
</div>
</td>
<td>
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<input type="number" name='product_price[]' placeholder='Enter Price' class="form-control product_price" step="0" min="0" value="100" />
</div>
</div>
</div>
</td>
<td>
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<input type="number" name='row_total_amount[]' placeholder='Total Amount' class="form-control row_total_amount" step="0" min="0" value="118" />
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>
<th class="right">
<button type="button" class="btn z-depth-1" id="add_row"><i class="material-icons">add_box</i></button>
<button type="button" class="btn z-depth-1 red" id="delete_row"><i class="material-icons">remove</i></button>
</th>
</th>
</tr>
</thead>
</table>

Related

append form rows using JS

Hello I have an HTML form and want to be able to add or delete rows dynamically.
ie just by a click on an Icon or a text the entire form row should be duplicated and by clicking on a text or icon the duplicated row should be deleted.
I know JavaScript append can solve this but I don't know how to implement it since my my HTML has needed php tags in them.
the drop-downs options are getting it values from a db and some other input fields are also getting it's values from a db hence the reason I have PHP tags in there.
Below is the attached code.
Kindly help me with how I can append the row with the appended form working just like the parent row
<div class="col-xl-8 col-md-12">
<form>
<div class="card">
<div class="card-header">
<h3 class="card-title"><strong class="text-success" style="cursor: pointer;"><?=ucwords($clientName)?></strong> REP'S INFORMATION</h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="form-group">
<label class="form-label">Reps Name<span class="text-red">*</span></label>
<input type="text" name="" class="form-control" required="">
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="form-group">
<label class="form-label">E-Mail<span class="text-red">*</span></label>
<input type="email" name="" class="form-control" required="">
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="form-group">
<label class="form-label">Phone No.<span class="text-red">*</span></label>
<input type="text text-dark" class="form-control" name="client_contact2" required="" id="client_contact2" onkeypress="return restrictAlphabets(event)" onpaste="return false;" ondrop="return false;" autocomplete="off" required="">
<input type="date" name="" value="<?=date("Y-m-d")?>" hidden="">
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">ADD DEVICE(S) INFORMATION</h3>
</div>
<div class="card-body">
<?php
if ($clientType === $slaClient) {
?>
<table id='dyntbl' class='table border text-nowrap text-md-nowrap table-striped mb-0'>
<thead>
<tr>
<th class="text-center" >Device Brand</th>
<th class="text-center">Device Model</th>
<th class="text-center">Serial Number</th>
<th class="text-center" style="width:10%">SLA Device</th>
<th><button type="button" class=" btn text-success" data-name='add'><i class="fe fe-plus-circle" data-id='ad' style="font-size:1.6em;"></i></button></th>
</tr>
</thead>
<tbody class="field_wrapper " id="table_body">
<tr>
<td>
<select class="form-control form-select brand" data-bs-placeholder="Select" name="brand[]" required="" id="brand" onchange="checkDeviceStatus()">
<?php
$readALL = "SELECT * FROM productbrands WHERE deleted = 0";
$displayAll = mysqli_query($conn,$readALL);
while($rowFetchAll = mysqli_fetch_array($displayAll)){
$brandName = $rowFetchAll['brandName'];
$brandid = $rowFetchAll['brandID'];
?>
<option value="<?=$brandid?>"><?=$brandName?></option>
<?php } ?>
</select>
</td>
<td>
<select class="form-control form-select model" data-bs-placeholder="Select" name="model[]" required="" id="model" onchange="checkDeviceStatus()">
<?php
$readALL1 = "SELECT * FROM productmodels WHERE deleted = 0";
$displayAll1 = mysqli_query($conn,$readALL1);
while($rowFetchAll1 = mysqli_fetch_array($displayAll1)){
$modelName = $rowFetchAll1['modelName'];
$modelid = $rowFetchAll1['modelID'];
?>
<option value="<?=$modelid?>"><?=$modelName?></option>
<?php } ?>
</select>
</td>
<td><input type="text" name="serialNo" class="form-control serialNo" id="serialNo" onchange="checkDeviceStatus()"></td>
<!-- The input field below is to get value from AJAX -->
<td><input type="text" name="deviceLevel" class="form-control" readonly="" id="deviceLevel">
<!-- End of Input field -->
</td>
<input type="text" name="" id="client" value="<?=$clientID?>" hidden="" class="client">
<td><button type="button" class=" btn text-danger" data-name="del"><i class="fe fe-minus-circle" style="font-size:1.6em;"></i></button></td>
</tr>
</tbody>
</table>
<?php } ?>
<?php
if ($clientType === $nonSla) {
?>
<table class='table border text-nowrap text-md-nowrap table-striped mb-0'>
<thead>
<tr>
<th>Product Model Non-SLA</th>
<th>Serial Number Non-SLA</th>
<th>Device Status Non-SLA</th>
<th><button type="button" class=" btn text-success" data-name='add'><i class="fe fe-plus-circle" data-id='ad' style="font-size:1.6em;"></i></button></th>
</tr>
</thead>
<tbody class="field_wrapper " id="table_body">
<tr>
<td><input type="text" name="" class="form-control" ></td>
<td><input type="text" name="" class="form-control"></td>
<td><input type="text" name="" class="form-control"></td>
<td><button type="button" class=" btn text-danger" data-name="del"><i class="fe fe-minus-circle" style="font-size:1.6em;"></i></button></td>
</tr>
</tbody>
</table>
<?php } ?>
</div>
</div>
</form>
</div>

Here is basic example:
const table_row_html = `
<tr>
<th scope="row">{{ROW_NO}}</th>
<td>Mark</td>
<td>
<select class="form-select" name="modal[]"">
<option selected>Open this select menu</option>
<option value=" 1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</td>
<td>#mdo</td>
<td><a class="btn btn-danger btn-sm delete" href="#">Remove</a></td>
</tr>`;
$(document).on("click", ".table a.insert", function() {
const table_body = $(this).closest(".table").find("tbody");
table_body.append(
table_row_html.replace("{{ROW_NO}}", table_body.children("tr").length + 1)
);
return false;
});
$(document).on("click", ".table a.delete", function() {
$(this).closest("tr").remove();
return false;
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
<th scope="col">
<a class="btn btn-primary insert" href="#">Add</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>
<select class="form-select" name="modal[]" ">
<option selected>Open this select menu</option>
<option value=" 1 ">One</option>
<option value="2 ">Two</option>
<option value="3 ">Three</option>
</select>
</td>
<td>#mdo</td>
<td><a class="btn btn-danger btn-sm delete " href="# ">Remove</a></td>
</tr>
</tbody>
</table>
</div>

How to add name attribute if checkbox is checked and if it is unchecked than remove

I added a checkbox inside a for loop, so I want only the checkbox that is checked to have a name attribute.
I tried but when I clicked on the second checkbox, the name of the first attribute is not removed.
Here is my code :
$("input:checkbox").on('click', function() {
var $box = $(this);
if ($box.is(":checked")) {
var group = "input:checkbox[name='" + $box.attr("name") + "']";
$(group).prop("checked", false);
$box.prop("checked", true);
} else {
$box.prop("checked", false);
}
});
$('select ,input[type=checkbox] ').on('change', function() {
var selector = $(this).closest("tr")//get closest tr
//get select valus
var id = selector.attr('data-id');
// var package_name = selector.find('.visa_type').val();
var processing_type = selector.find(".processing_type option:selected").text();
// alert(processing_type)
var processing_price = selector.find(".processing_type option:selected").val();
// alert(processing_price)
var add = selector.find(".package_price").text(processing_price)
var total = add.val()
var date = selector.find('.travel_date').val();
if(selector.find('input[type=checkbox]').prop("checked") == true){
//id
selector.find('.id').attr('name','id')
//visa_type
selector.find('.visa_type').attr('name','visa_type');
//processing_type
selector.find(".processing_type").attr('name','processing_type');
//traveldate
selector.find('.travel_date').attr('name','travel_date');
//total
selector.find(".package_price").attr('name','total','value',total)
}else if(selector.find('input[type=checkbox]').prop("checked") == false){
//id
selector.find('.id').attr('name','')
//visa_type
selector.find('.visa_type').attr('name','');
//processing_type
selector.find(".processing_type").attr('name','');
//traveldate
selector.find('.travel_date').attr('name','');
//total
selector.find(".package_price").attr('name','')
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-responsive" id="flip-scroll">
<thead>
<tr>
<th scope="col">Visa Option</th>
<th scope="col">Processing Type</th>
<th height="60" scope="col">Travel Date</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr class="valid-container">
<input type="hidden" class="id" value="1">
<td style="cursor:pointer;" width="200"><input type="checkbox" name="c1" class="checkbox"> <output class="visa_type" style="font-size:14.5px !important;" value="90 days single visa">90 days single visa</output></td>
<td height="52" width="158">
<select class="custom-select processing_type" required="">
<option value="15000" selected="">Normal</option>
<option value="20000">Express</option>
</select>
</td>
<td width="190" height="60">
<div class="input-group date" data-date-format="dd.mm.yyyy">
<div class="input-group mb-2">
<input type="text" class="form-control travel_date" value="dd.mm.yyyy" placeholder="dd.mm.yyyy">
<div class="input-group-text"><i class="ti-calendar"></i></div>
<div class="input-group-addon">
</div>
<div class="input-group-prepend">
</div>
</div>
</div>
</td>
<td width="166">AED <output class="package_price">15000</output>.00</td>
</tr>
<tr class="valid-container">
<input type="hidden" class="id" value="2">
<td style="cursor:pointer;" width="200"><input type="checkbox" name="c1" class="checkbox"> <output class="visa_type" style="font-size:14.5px !important;" value="30 days">30 days</output></td>
<td height="52" width="158">
<select class="custom-select processing_type" required="">
<option value="11" selected="">Normal</option>
<option value="22">Express</option>
</select>
</td>
<td width="190" height="60">
<div class="input-group date" data-date-format="dd.mm.yyyy">
<div class="input-group mb-2">
<input type="text" class="form-control travel_date" value="dd.mm.yyyy" placeholder="dd.mm.yyyy">
<div class="input-group-text"><i class="ti-calendar"></i></div>
<div class="input-group-addon">
</div>
<div class="input-group-prepend">
</div>
</div>
</div>
</td>
<td width="166">AED <output class="package_price">11</output>.00</td>
</tr>
<tr class="valid-container">
<input type="hidden" class="id" value="3">
<td style="cursor:pointer;" width="200"><input type="checkbox" name="c1" class="checkbox"> <output class="visa_type" style="font-size:14.5px !important;" value="90 days">90 days</output></td>
<td height="52" width="158">
<select class="custom-select processing_type" required="">
<option value="22" selected="">Normal</option>
<option value="33">Express</option>
</select>
</td>
<td width="190" height="60">
<div class="input-group date" data-date-format="dd.mm.yyyy">
<div class="input-group mb-2">
<input type="text" class="form-control travel_date" value="dd.mm.yyyy" placeholder="dd.mm.yyyy">
<div class="input-group-text"><i class="ti-calendar"></i></div>
<div class="input-group-addon">
</div>
<div class="input-group-prepend">
</div>
</div>
</div>
</td>
<td width="166">AED <output class="package_price">22</output>.00</td>
</tr>
</tbody>
</table>

As you need to select only one checkbox at a time you can remove checked from other checkboxes whenever any checkbox is checked using $('tbody > tr .checkbox').not(this).prop('checked',false); then you just need to loop through your trs to add or remove name attributes.
Demo Code:
$('input[type=checkbox] ').on('change', function() {
$('tbody > tr .checkbox').not(this).prop('checked',false);//remove checked from other checkbox
//loop thrugh trs
$("tbody > tr").each(function() {
//add or remove name attribute
var selector = $(this)
if (selector.find('input[type=checkbox]').prop("checked") == true) {
selector.find('.visa_type').attr('name', 'visa_type');
selector.find(".processing_type").attr('name', 'processing_type');
selector.find('.travel_date').attr('name', 'travel_date');
} else if (selector.find('input[type=checkbox]').prop("checked") == false) {
selector.find('.visa_type').attr('name', '');
selector.find(".processing_type").attr('name', '');
selector.find('.travel_date').attr('name', '');
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-responsive" id="flip-scroll">
<thead>
<tr>
<th scope="col">Visa Option</th>
<th scope="col">Processing Type</th>
<th height="60" scope="col">Travel Date</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr class="valid-container">
<input type="hidden" class="id" value="1">
<td style="cursor:pointer;" width="200"><input type="checkbox" name="c1" class="checkbox"> <output class="visa_type" style="font-size:14.5px !important;" value="90 days single visa">90 days single visa</output></td>
<td height="52" width="158">
<select class="custom-select processing_type" required="">
<option value="15000" selected="">Normal</option>
<option value="20000">Express</option>
</select>
</td>
<td width="190" height="60">
<div class="input-group date" data-date-format="dd.mm.yyyy">
<div class="input-group mb-2">
<input type="text" class="form-control travel_date" value="dd.mm.yyyy" placeholder="dd.mm.yyyy">
<div class="input-group-text"><i class="ti-calendar"></i></div>
<div class="input-group-addon">
</div>
<div class="input-group-prepend">
</div>
</div>
</div>
</td>
<td width="166">AED <output class="package_price">15000</output>.00</td>
</tr>
<tr class="valid-container">
<input type="hidden" class="id" value="2">
<td style="cursor:pointer;" width="200"><input type="checkbox" name="c1" class="checkbox"> <output class="visa_type" style="font-size:14.5px !important;" value="30 days">30 days</output></td>
<td height="52" width="158">
<select class="custom-select processing_type" required="">
<option value="11" selected="">Normal</option>
<option value="22">Express</option>
</select>
</td>
<td width="190" height="60">
<div class="input-group date" data-date-format="dd.mm.yyyy">
<div class="input-group mb-2">
<input type="text" class="form-control travel_date" value="dd.mm.yyyy" placeholder="dd.mm.yyyy">
<div class="input-group-text"><i class="ti-calendar"></i></div>
<div class="input-group-addon">
</div>
<div class="input-group-prepend">
</div>
</div>
</div>
</td>
<td width="166">AED <output class="package_price">11</output>.00</td>
</tr>
<tr class="valid-container">
<input type="hidden" class="id" value="3">
<td style="cursor:pointer;" width="200"><input type="checkbox" name="c1" class="checkbox"> <output class="visa_type" style="font-size:14.5px !important;" value="90 days">90 days</output></td>
<td height="52" width="158">
<select class="custom-select processing_type" required="">
<option value="22" selected="">Normal</option>
<option value="33">Express</option>
</select>
</td>
<td width="190" height="60">
<div class="input-group date" data-date-format="dd.mm.yyyy">
<div class="input-group mb-2">
<input type="text" class="form-control travel_date" value="dd.mm.yyyy" placeholder="dd.mm.yyyy">
<div class="input-group-text"><i class="ti-calendar"></i></div>
<div class="input-group-addon">
</div>
<div class="input-group-prepend">
</div>
</div>
</div>
</td>
<td width="166">AED <output class="package_price">22</output>.00</td>
</tr>
</tbody>
</table>

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 });
})

Add row dynamically

I want to add a new bootstrap row with one click, I tried this, but I only get a new row with number, not the copy of a complete row:
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr>
<th class="text-center">
Comment
</th>
<th class="text-center">
Price
</th>
<th class="text-center">
Type
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
<div class="smart-widget sm-right ">
<label for="client" class="field prepend-icon required-field">
<select id="client" name="client" class="chosen-select" data-placeholder="Select..."></select>
</label>
</div>
</td>
<td>
<br>
<div class="smart-widget sm-right ">
<label for="cop" class="field prepend-icon required-field">
Price
<input type="text" name="cop" id="cop" class="gui-input">
</label>
</div>
</td>
<td>
<div class="smart-widget sm-right ">
<label for="client" class="field prepend-icon required-field">
<label for="client" class="control-label"> Type</label>
<select id="client" name="client" class="chosen-select" data-placeholder="Select..."></select>
</label>
</div>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
<a id="add_row" class="btn btn-default pull-left">Add Row</a>
<a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
Script:
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td>")
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
});
Why only add new row with number of row instead of row with two dropdowns and one field?
Thanks in advance!

Simply because that what you have passed in "<td>"+ (i+1) +"</td>".
You could add the content of default row #addr0 in every row you add :
$('#addr'+i).html($('#addr0').html());
Hope this helps.
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html($('#addr0').html());
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr>
<th class="text-center">
Comment
</th>
<th class="text-center">
Price
</th>
<th class="text-center">
Type
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
<div class="smart-widget sm-right ">
<label for="client" class="field prepend-icon required-field">
<select id="client" name="client" class="chosen-select" data-placeholder="Select..."></select>
</label>
</div>
</td>
<td>
<br>
<div class="smart-widget sm-right ">
<label for="cop" class="field prepend-icon required-field">
Price
<input type="text" name="cop" id="cop" class="gui-input">
</label>
</div>
</td>
<td>
<div class="smart-widget sm-right ">
<label for="client" class="field prepend-icon required-field">
<label for="client" class="control-label"> Type</label>
<select id="client" name="client" class="chosen-select" data-placeholder="Select..."></select>
</label>
</div>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
<a id="add_row" class="btn btn-default pull-left">Add Row</a>
<a id='delete_row' class="pull-right btn btn-default">Delete Row</a>

You have to get previous HTML code into new row.
<script>
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
lastobj = "#addr"+""+(i-1);
content = $(lastobj).html();
$('#addr'+i).html(content);
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
});
</script>
Also use ID to get their value or using an arrays.

Categories

Resources