In my input form the user needs to be able to input multiple lines of data. I achieve this by making an ajax call to submit the information and then it will clone that row and append it to my table body so the user can enter more data. They can do this as many times as they want. However, I want to be able to disable the previous whenever a new row is created.
This is what I currently have to try to solve this problem. It works for the first two rows, as in when I click add on the first row it creates a new one and the previous items are disabled. However, when I click on add again to create another row, row three, that row is automatically disabled. I'm assuming because it's cloning the first row. If anyone has any ideas on how to fix this is greatly appreciated! Thanks!
$('#tableData').on('click', 'button.addRow', (e) => {
const cloneRow = $('#tableData tbody tr').first();
e.preventDefault();
let data = {
project_id: getPid,
imp_or_ann: $(".imp_or_ann").last().val(),
category: $(".category").last().val(),
cost: $(".cost").last().val(),
hours: $(".hours").last().val()
}
$.ajax({
url: '/costs_hours',
type: 'POST',
data: data
}).then(
cloneRow.clone().appendTo('#tableData tbody').find(".cost, .hours").val(''),
$(".imp_or_ann:not(:last)").attr("disabled", true),
$(".category:not(:last)").attr("disabled", true),
$(".cost:not(:last)").attr("disabled", true),
$(".hours:not(:last)").attr("disabled", true),
)
});
This is the HTML
<div class="row">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active" aria-current="page">Costs and Hours</li>
</ol>
</nav>
<form action='/costs_hours' id="formData" method="POST">
<div class="card border-secondary w-100 text-light" style="background-color: #333f48">
<h5 style="background-color: #bf5700;" class="card-header">Costs & Hours</h5>
<div class="card-body w-100 text-end">
<div id="errors" class="text-start"></div>
<table id="tableData" class="table text-light text-center mt-3">
<thead>
<tr>
<th scope="col">Implementation or Annual</th>
<th scope="col">Category</th>
<th scope="col">Costs</th>
<th scope="col">Hours</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="input-group mb-3">
<div class="input-group mb-3">
<select name="imp_or_ann" class="form-select imp_or_ann"
id="inputGroupSelect01">
<option disabled selected>Choose...</option>
<option>Implementation</option>
<option>Annual</option>
</select>
</div>
</div>
</td>
<td>
<div class="input-group mb-3">
<div class="input-group mb-3">
<select name="category" class="form-select category" id="inputGroupSelect01">
<option disabled selected>Choose...</option>
<option>EMO</option>
<option>Analysts</option>
<option>Maintenance</option>
<option>ETS</option>
<option>BOT</option>
<option>OtherUT</option>
<option>Materials</option>
<option>Non-UT Contract</option>
<option>Contingency</option>
</select>
</div>
</div>
</td>
<td>
<div class="input-group mb-3">
<input name="cost" type="text" class="cost form-control">
</div>
</td>
<td>
<div class="input-group mb-3">
<input name="hours" type="text" class="hours form-control">
</div>
</td>
<td>
<button type="button" style="background-color: #bf5700;"
class="btn btn-warning text-light addRow"><i
class="fas fa-plus-circle"></i> Add
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="row text-center my-3">
<div class="col-11 text-end">
<button disabled id="next" type="button" class='btn btn-success'><a id="link"
class="text-white">Next</a>
</button>
</div>
</div>
</div>
</form>
</div>
The issue is indeed the first row. You are cloning it after inputs within it are disabled
Create a clone() of it when page loads and before anything is disabled within that row. If there are any preset values in first row you can reset them in the cloned version
Then append a clone of that clone as needed and prior to that append disable other inputs
Simplified working version of add and disable:
const $table = $('#tableData'),
$tbody = $table.find('tbody'),
$cloneRow = $tbody.find('tr').first().clone();
$table.on('click', 'button.addRow', (e) => {
e.preventDefault();
$tbody.find(':input').prop('disabled', true);
$tbody.append($cloneRow.clone());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active" aria-current="page">Costs and Hours</li>
</ol>
</nav>
<form action='/costs_hours' id="formData" method="POST">
<div class="card border-secondary w-100 text-light" style="background-color: #333f48">
<h5 style="background-color: #bf5700;" class="card-header">Costs & Hours</h5>
<div class="card-body w-100 text-end">
<div id="errors" class="text-start"></div>
<table id="tableData" class="table text-light text-center mt-3">
<thead>
<tr>
<th scope="col">Implementation or Annual</th>
<th scope="col">Category</th>
<th scope="col">Costs</th>
<th scope="col">Hours</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="input-group mb-3">
<div class="input-group mb-3">
<select name="imp_or_ann" class="form-select imp_or_ann"
id="inputGroupSelect01">
<option disabled selected>Choose...</option>
<option>Implementation</option>
<option>Annual</option>
</select>
</div>
</div>
</td>
<td>
<div class="input-group mb-3">
<div class="input-group mb-3">
<select name="category" class="form-select category" id="inputGroupSelect01">
<option disabled selected>Choose...</option>
<option>EMO</option>
<option>Analysts</option>
<option>Maintenance</option>
<option>ETS</option>
<option>BOT</option>
<option>OtherUT</option>
<option>Materials</option>
<option>Non-UT Contract</option>
<option>Contingency</option>
</select>
</div>
</div>
</td>
<td>
<div class="input-group mb-3">
<input name="cost" type="text" class="cost form-control">
</div>
</td>
<td>
<div class="input-group mb-3">
<input name="hours" type="text" class="hours form-control">
</div>
</td>
<td>
<button type="button" style="background-color: #bf5700;"
class="btn btn-warning text-light addRow"><i
class="fas fa-plus-circle"></i> Add
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="row text-center my-3">
<div class="col-11 text-end">
<button disabled id="next" type="button" class='btn btn-success'><a id="link"
class="text-white">Next</a>
</button>
</div>
</div>
</div>
</form>
</div>
Related
When a click event occurs on a table, I want to pass the values of the relevant row into the modal. I wrote a code like this, but the values of the top row are always passed into the modal. What I want to do is to show the values in the row I clicked in the modal. How can I provide this?
my table codes here:
<table class="table align-middle" id="customerTable">
<thead class="table-light">
<tr>
<th class="sort" data-sort="name">Name Surname</th>
<th class="sort" data-sort="company_name">Phone Number</th>
<th class="sort" data-sort="leads_score">Note</th>
<th class="sort" data-sort="phone">Status</th>
<th class="sort" data-sort="location">Personal Name</th>
<th class="sort" data-sort="tags">Data Name</th>
<th class="sort" data-sort="action">Edit</th>
</tr>
</thead>
<tbody class="list form-check-all">
{% for x in model %}
<tr>
<td class="table-namesurname">{{x.name}}</td>
<td class="table-phonenumber">{{x.phonenumber}}</td>
<td class="table-note">{{x.note}}</td>
<td class="table-status">{{x.status}}</td>
<td class="table-callname">{{x.callname}}</td>
<td class="table-dataname">{{x.dataname}}</td>
<td>
<ul class="list-inline hstack gap-2 mb-0">
<li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Edit">
<a class="edit-item-btn" id="call-button" href="#showModal" data-bs-toggle="modal" data-id="{{x.id}}"><i class="ri-phone-line fs-16"></i></a> <!-- Here is the edit button -->
</li>
</ul>
</td>
</tr>
{% endfor %}
</tbody>
</table>
my modal here
<div class="modal fade" id="showModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header bg-light p-3">
<h5 class="modal-title" id="exampleModalLabel"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
</div>
<form action="">
<div class="modal-body">
<input type="hidden" id="id-field" />
<div class="row g-3">
<div class="col-lg-12">
<div>
<label for="company_name-field" class="form-label">Name Surname</label>
<input type="text" id="call-name-surname" class="form-control" placeholder="Enter company name" value="" required />
</div>
</div>
<div class="col-lg-12">
<div>
<label for="company_name-field" class="form-label">Phone Number</label>
<input type="email" id="call-phone-number" class="form-control" placeholder="Enter company name" value="" required />
</div>
</div>
<!--end col-->
<div class="col-lg-12">
<div>
<label for="leads_score-field" class="form-label">Note</label>
<input type="text" id="call-note-field" class="form-control" placeholder="Enter lead score" value="" required />
</div>
</div>
<!--end col-->
<div class="col-lg-12">
<div>
<label for="phone-field" class="form-label">Status</label>
<input type="text" id="call-status-field" class="form-control" placeholder="Enter phone no" value="" required />
</div>
</div>
<div class="col-lg-12">
<div>
<label for="phone-field" class="form-label">Personal Name</label>
<input type="text" id="call-persnoel-name" class="form-control" placeholder="Enter phone no" value="" required />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="hstack gap-2 justify-content-end">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Kapat</button>
<button type="submit" class="btn btn-success" id="add-btn">Kaydet</button>
</div>
</div>
</form>
</div>
</div>
</div>
and the my script codes
<script type="text/javascript">
$(document).ready(function () {
$("#call-button").click(function() {
var nameSurname = $(this).closest('tr').find('.table-namesurname').text();
var phoneNumber = $(this).closest('tr').find('.table-phonenumber').text();
var note = $(this).closest('tr').find('.table-note').text();
var status = $(this).closest('tr').find('.table-status').text();
var callName = $(this).closest('tr').find('.table-callname').text();
var dataName = $(this).closest('tr').find('.table-dataname').text();
$("#call-name-surname").val(nameSurname)
$("#call-phone-number").val(phoneNumber)
$("#call-note-field").val(note)
$("#call-status-field").val(status)
$("call-persnoel-name").val(callName)
});
});
</script>
console output
Gökan 905387532589 <empty string> Aranmadı ece datatest
The problem here is that the values of the clicked element in the table are not coming. Whichever I click, the values of the element at the top of the table are displayed. How can I solve this problem?
HTML id attribute should be unique, adding multiple elements with the same id, when you select, you will only get the first element that has this id, you need to select the rows by class, you have edit-item-btn class for the button.
<script type="text/javascript">
$(document).ready(function () {
$(".edit-item-btn").click(function() {
var nameSurname = $(this).closest('tr').find('.table-namesurname').text();
var phoneNumber = $(this).closest('tr').find('.table-phonenumber').text();
var note = $(this).closest('tr').find('.table-note').text();
var status = $(this).closest('tr').find('.table-status').text();
var callName = $(this).closest('tr').find('.table-callname').text();
var dataName = $(this).closest('tr').find('.table-dataname').text();
$("#call-name-surname").val(nameSurname)
$("#call-phone-number").val(phoneNumber)
$("#call-note-field").val(note)
$("#call-status-field").val(status)
$("call-persnoel-name").val(callName)
});
});
I'm adding dynamically a selected box items.
I want when I check a check-box set the value or the selected option of all the additional selected-box to the selected option of the first selected box.
So I'm using the following code to add dynamically input fields.
$(document).ready(function() {
$("body").on("click", ".add_new_frm_field_btn", function() {
var random = 1 + Math.floor(Math.random() * 1000); //generate random values..
var index = $(".form_field_outer").find(".form_field_outer_row").length + 1;
//added data-index and outer..class
$(".form_field_outer").append(
`<div class="col-12 outer" data-index="${index}_${random}">
<div class="card-body form_field_outer_row">
<div class="form-row">
<div class="form-group col-md-2">
<label for="inputState">Casting</label>
<select class="form-control maintCostField" name="rows[${index}][id_casting]" id="id_casting" >
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div> </div></div> `);
$(".form_field_outer").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
$(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="btn btn-primary btn-lg pl-4 pr-0 check-button">
<label class="custom-control custom-checkbox mb-0 d-inline-block">
<input type="checkbox" class="custom-control-input" id="checkAll">
<span class="custom-control-label"> </span>
</label>
</div>
<div class="row">
<div class="col-12">
<div class="card mb-4 form_field_outer ">
<div class="card-body form_field_outer_row outer" data-index="1">
<input type="hidden" id="id_projet_casting" name="id_projet_casting" />
<div class="form-row">
<div class="form-group col-md-2">
<label for="inputState">Casting</label>
<select class="form-control maintCostField" name="rows[1][id_casting]" id="id_casting">
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
<button type="button" class="btn btn-primary btn-lg top-right-button mr-1 add_new_frm_field_btn">Ajouter un nouveau casting</button>
</div>
<div class="casting_details">
<div class="casting_details2">
<div class="d-flex flex-row mb-6">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I want when I Add a multiple additional selected-box and I check the checked box all the additional selected-box get the same selected option of the first selected-box.
That means when I add the first row and I select option1 , all the additional rows should get the option1 as the first additional row.
I'm still a beginner in jQuery and JavaScript, is it possible to do this and is it possible to do it with jQuery or JavaScript?
First you need to set unique id for each select item: id="id_casting${index}".
Then you set selected option if your check box has checked:
var checked = $("#checkAll").is(':checked')
if (checked)
$("#id_casting" + index).val($("#id_casting").find(":selected").val());
$(document).ready(function () {
$("body").on("click", ".add_new_frm_field_btn", function () {
var random = 1 + Math.floor(Math.random() * 1000); //generate random values..
var index = $(".form_field_outer").find(".form_field_outer_row").length + 1;
//added data-index and outer..class
$(".form_field_outer").append(
`<div class="col-12 outer" data-index="${index}_${random}">
<div class="card-body form_field_outer_row">
<div class="form-row">
<div class="form-group col-md-2">
<label for="inputState">Casting</label>
<select class="form-control maintCostField" name="rows[${index}][id_casting]" id="id_casting${index}" >
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div> </div></div> `);
var checked = $("#checkAll").is(':checked')
if (checked)
$("#id_casting" + index).val($("#id_casting").find(":selected").val());
$(".form_field_outer").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
$(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="btn btn-primary btn-lg pl-4 pr-0 check-button">
<label class="custom-control custom-checkbox mb-0 d-inline-block">
<input type="checkbox" class="custom-control-input" id="checkAll">
<span class="custom-control-label"> </span>
</label>
</div>
<div class="row">
<div class="col-12">
<div class="card mb-4 form_field_outer ">
<div class="card-body form_field_outer_row outer" data-index="1">
<input type="hidden" id="id_projet_casting" name="id_projet_casting" />
<div class="form-row">
<div class="form-group col-md-2">
<label for="inputState">Casting</label>
<select class="form-control maintCostField" name="rows[1][id_casting]" id="id_casting">
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
<button type="button" class="btn btn-primary btn-lg top-right-button mr-1 add_new_frm_field_btn">Ajouter un nouveau casting</button>
</div>
<div class="casting_details">
<div class="casting_details2">
<div class="d-flex flex-row mb-6">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
friends,
I hope all be fine. Actually, I face to this issue.
We can display HTML table row values into a text box, so if we want to take an image from table row and to show it in a div how we can do it? so with these codes, I can take the value from HTML table row to send for text box, so how I take for the image in jquery.
//HTML Codes
<div class="md-form mb-5" style="margin-top:-10px;">
<div class="down" >
<img src="images/IT.jpg">
</div>
</div>
<div class="md-form mb-5" style="margin-left:130px;">
<div class="input-group-prepend" >
<span class="input-group-text" style=" width:35px;">ID</span>
</div>
<input type="text" name="txtSId" id="txtSId" class="form-control"
aria-label="Amount (rounded to the nearest dollar)" aria-
describedby="basic-addon">
</div>
<div class="md-form mb-5">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Name</span>
</div>
<input type="text" name="txtSName" id="txtSName" class="form-control"
aria-label="Amount (rounded to the nearest dollar)">
</div>
</div>
<div class="md-form mb-5">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Position</span>
</div>
<input type="text" name="txtSPosition" id="txtSPosition" class="form-
control">
</div></div>
<div class="md-form mb-5">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Facebook </span>
</div>
<input type="text" name="txtSFacebook" id="txtSFacebook" class="form-
control">
</div></div>
<div class="md-form mb-5">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"> Twitter</span>
</div>
<input type="text" name="txtSTwitter" id="txtSTwitter" class="form-
control">
</div>
</div>
<div class="md-form mb-5">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">G<strong>+</strong></span>
</div>
<input type="text" name="txtSGoogleplus" id="txtSGoogleplus"
class="form-control">
</div>
</div></div>
<script>
// For View data
$(document).ready(function(){
$("#dtBasicExample tbody").on('click','tr',function(){
$("#txtSelect").text("1 row selected");
var rowData=$(this).children("td").map(function(){
return $(this).text();
}).get();
$("#txtSId").val(rowData[0]);
$("#txtSName").val(rowData[1]);
$("#txtSPosition").val(rowData[2]);
$("#txtSFacebook").val(rowData[4]);
$("#txtSTwitter").val(rowData[5]);
$("#txtSGoogleplus").val(rowData[6]);
});
});
</script>
Put an empty img element and copy the value at runtime from Table row data.
Use the below code snippet for reference.
$(document).ready(function() {
});
function copyImage() {
alert($("#imgS").find("img").attr("src"));
$(".down img").attr("src", $("#imgS").find("img").attr("src"));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="down">
<img src="" />
</div>
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>
<img width="100px" src="https://vignette.wikia.nocookie.net/universeconquest/images/e/e6/Sample.jpg/revision/latest?cb=20171003194302">
</td>
<td>55577855</td>
</tr>
</table>
<button onClick="copyImage()"> Copy Image </button>
</body>
This is something I've been working on for a while now, and it's about to be released I just cannot figure out for the life of me on how to make the edit button work. If you can find a way for it to work just leave the java down below and the changes that you've done it would be greatly appreciated.
<div class="container-fluid text-center">
<div class="panel panel-default">
<div class="panel-heading">Vehicle Management</div>
<h2>List of your characters' vehicles</h2>
<table class="table table-responsive table-striped">
<thead>
<th>Vehicle Make</th>
<th>Vehicle Model</th>
<th>Vehicle Color</th>
<th>Vehicle Owner</th>
<th>License Plate</th>
<th>Details</th>
<th>Actions</th>
</thead>
<tr ng-show="vehList.length > 0" class="text-left" ng-repeat="veh in vehList">
<td>{{veh.vehmake}}</td>
<td>{{veh.vehmodel}}</td>
<td>{{veh.vehcolor}}</td>
<td>{{veh.vehowner}}</td>
<td>{{veh.vehplate}}</td>
<td>
<span ng-show="veh.details.stolen" class="text-danger"><i class="glyphicon glyphicon-warning-sign"></i> Stolen<br /></span>
<span ng-show="veh.details.registrationExpired" class="text-warning">Expired Registration<br /></span>
<span ng-show="veh.details.noRegistration" class="text-warning">No Registration<br /></span>
<span ng-show="veh.details.insuranceExpired" class="text-warning">Expired Insurance<br /></span>
<span ng-show="veh.details.noInsurance" class="text-warning">No Insurance<br /></span>
</td>
<td>
<span ng-show="veh.details.active" class="btn btn-primary glyphicon glyphicon-star"><br/></span>
<span ng-show="veh.details.nonactive" class="btn btn-default glyphicon glyphicon-star-empty"><br/></span>
<button ng-click="edit=true" class="btn btn-primary glyphicon glyphicon-edit"></button>
<button ng-click="deleteVehicle($index)" class="btn btn-danger glyphicon glyphicon-trash"></button>
</td>
</tr>
<!-- Only shown when there's no vehicule already created -->
<tr ng-show="vehList.length == 0">
<td colspan="7" class="text-center">
<h4>No Vehicle Found, Please Create One.</h4>
</td>
<tr>
<td colspan="7" class="text-center">
<button class="btn btn-success" data-toggle="modal" data-target="#modalAdNewVehicle"><i class="glyphicon glyphicon-plus"></i></button>
</td>
</tr>
</table>
<div class="panel-body">
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="modalAdNewVehicle" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>Vehicle Information
</h4>
</div>
<div class="modal-body">
<div class="container-fluid text-center">
<div class="panel panel-default">
<div class="panel-body">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Vehicle Make</span>
<input ng-model="newveh.vehmake" autofocus type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Vehicle Model</span>
<input ng-model="newveh.vehmodel" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Vehicle Color</span>
<input ng-model="newveh.vehcolor" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Vehicle Owner</span>
<input ng-model="newveh.vehowner" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Vehicle Plate</span>
<input ng-model="newveh.vehplate" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
</div>
<div class="container-fluid text-left">
<div class="checkbox">
<label><input ng-click-"!newveh.details.active" ng-model="newveh.details.active" type="checkbox" value"">Active</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.nonactive" ng-model="newveh.details.nonactive" type="checkbox" value="">Not Active</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.stolen" ng-model="newveh.details.stolen" type="checkbox" value="">Stolen</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.registrationExpired" ng-model="newveh.details.registrationExpired" type="checkbox" value="">Expired Registration</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.noRegistration" ng-model="newveh.details.noRegistration" type="checkbox" value="">No Registration</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.insuranceExpired" ng-model="newveh.details.insuranceExpired" type="checkbox" value="">Expired Insurance</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.noInsurance" ng-model="newveh.details.noInsurance" type="checkbox" value="">No Insurance</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer text-center">
<button ng-click="addNewVehicle()" class="btn btn-primary" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
</div>
<script>
$('.modal').on('shown.bs.modal', function() {
$(this).find('[autofocus]').focus();
});
</script>
There is java script for everything else to work, i just cannot figure out how to make the edit button work
I have a dropdown control in my view and if user select a option in dropdown button then I have to pass it to my jQuery code and pass to MVC method which is use in jQuery code to call partial view. I have attached my code image.
this is my working code
#{
ViewBag.Title = "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>
<select class="browser-default pull-left width_120" name="itemcode" id="itemcode" enable>
<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>
<script src=" ~/Scripts/JobManager/BiddingSecondStepPartial.js"></script>
<script type="text/javascript">
$(function () {
$('#btnsearch').click(function (data) {
var itemcode = $('#itemcode').value;
$.post("#Url.Action("SAPPartailView", "CreateBid")", function(data) {
if (data) {
$('#SAPdiv').append(data);
}
});
});
});
</script>
</div>
Try This one
$(function () {
$('#btnsearch').click(function (data) {
var itemcode = $('#itemcode').value;
$.post("/SAPPartailView/CreateBid", { itemcode : itemcode }, function(data) {
if (data) {
$('#SAPdiv').append(data);
}
});
});
});
});
i just got a solution ....thanks for giving your efforts.
this is the way by which i can call a partial view from my jquery code passing with a parameter..
<script type="text/javascript">
var url = '#Url.Action("SAPPartailView", "CreateBid")';
$('#btnsearch').click(function () {
var keyWord = $('#itemcodeid').val();
$('#SAPdiv').load(url, { searchText: keyWord });
})
and in partial view i have to take parameter like..
public PartialViewResult SAPPartailView(string searchText)
{
return PartialView("_CreateBidSecondStepSAP",newlist);
}
this is working solution