on an ajax callback, selecting a div inside the calling form works well when the forms is outside a table, and does not work when inside a table. any way to make this work?
Please check out this JSFiddle: http://jsfiddle.net/split19/o0rs1L9z/7/
<form method="POST" action="#" class="fileform">
<tr>
<td class="vert-align"><input type="text" name="name" id="name" /></td>
<td class="vert-align"><button class="btn btn-primary btn-xs" type="submit">Update</button>
<div class="feedback-icons">
<span class="file-success">checkmark</span>
<span class="file-error">x</span>
</div>
</td>
</tr>
</form>
<form method="POST" action="#" class="fileform">
<tr>
<td class="vert-align"><input type="text" name="name" id="name" /></td>
<td class="vert-align"><button class="btn btn-primary btn-xs" type="submit">Update</button>
<div class="feedback-icons">
<span class="file-success">checkmark</span>
<span class="file-error">x</span>
</div>
</td>
</tr>
</form>
<h3>Table:</h3>
<table>
<form method="POST" action="#" class="fileform">
<tr>
<td class="vert-align"><input type="text" name="name" id="name" /></td>
<td class="vert-align"><button class="btn btn-primary btn-xs" type="submit">Update</button>
<div class="feedback-icons">
<span class="file-success">checkmark</span>
<span class="file-error">x</span>
</div>
</td>
</tr>
</form>
<form method="POST" action="#" class="fileform">
<tr>
<td class="vert-align"><input type="text" name="name" id="name" /></td>
<td class="vert-align"><button class="btn btn-primary btn-xs" type="submit">Update</button>
<div class="feedback-icons">
<span class="file-success">checkmark</span>
<span class="file-error">x</span>
</div>
</td>
</tr>
</form>
</table>
JS:
$(".fileform").submit(function(e)
{
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
var self = $(this);
$.ajax(
{
url : formURL,
type: "POST",
data : postData,
context: e.target,
success:function(data, textStatus, jqXHR)
{
self.find('.file-success').fadeIn(500);
},
error: function(jqXHR, textStatus, errorThrown)
{
self.find('.file-error').fadeIn(500);
}
});
e.preventDefault();
});
thanks for the comments.
i needed to put the form inside a td and nest a table inside the form.
http://jsfiddle.net/split19/u3xsa9mr/1/
<table>
<tr>
<td class="vert-align">
<form method="POST" action="#" class="fileform">
<table>
<tr>
<td class="vert-align">
<input type="text" name="name" id="name" />
</td>
<td class="vert-align">
<button class="btn btn-primary btn-xs" type="submit">Update</button>
<div class="feedback-icons">
<span class="file-success">checkmark</span>
<span class="file-error">x</span>
</div>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
Related
hi m trying to append a form which is in bootstrap (using jQuery append funciton),,, it has to open it once but is opening it twice and the button which is at the end of for shows one time and hide other time i just wants to show the form once by clicking once, and when i click again then it display again:" this is the current output i just wants that it show only once https://ibb.co/CtLrBzr "
html code:
<div class="col-md-4 create-task-btn1">
<span href="" class="btn btn-info btn-lg dashboard-icon append">
<i class="fa fa-plus fa-1x"></i>
<br>
Assign Task
</span>
</div>
<div id="table-bordered">
</div>
$(document).ready(function() {
$('.append').click(function() {
$('#table-bordered').append(`<div class="container" style="margin-top:50px;">
<div class="row">
<form action="#" id="" method="post" class="form-horizontal" role="form" novalidate="novalidate">
<table class="table table-bordered" style="width: 950px;">
<tbody>
<tr>
<th scope="row" style="font-size: 14px;">Task<span class="text-danger">*</span></th>
<td colspan="3">
<input type="text" class="form-control" value="" name="subject"></td>
<td rowspan="3">
<a data-id="" data-toggle="modal" data-original-title="" class="enable-tooltip btn" style="color: red; font-size: 20px;"><i class="fa fa-trash-o"></i></a>
</td>
</tr>
<tr>
<th scope="row" style="font-size: 14px;">Assigned To<span class="text-danger">*</span></th>
<td><input type="text" class="form-control" value="" name="subject"></td>
<th style="font-size: 14px;">Due Date<span class="text-danger">*</span></th>
<td><input type="text" class="form-control" value="" name="subject"></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>`);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4 create-task-btn1">
<span href="" class="btn btn-info btn-lg dashboard-icon append">
Assign Task
</span>
</div>
$(".append").on("click", function(){
$('#table-bordered').html();
});
Use your form inside the jquery html function. it will help you.
Use jQuery's one :
$('.append').one("click" , function(){ ... }
$('.append').one("click", function() {
$('#table-bordered').append(`<div class="container" style="margin-top:50px;">
<div class="row">
<form action="#" id="" method="post" class="form-horizontal" role="form" novalidate="novalidate">
<table class="table table-bordered" style="width: 950px;">
<tbody>
<tr>
<th scope="row" style="font-size: 14px;">Task<span class="text-danger">*</span></th>
<td colspan="3">
<input type="text" class="form-control" value="" name="subject"></td>
<td rowspan="3">
<a data-id="" data-toggle="modal" data-original-title="" class="enable-tooltip btn" style="color: red; font-size: 20px;"><i class="fa fa-trash-o"></i></a>
</td>
</tr>
<tr>
<th scope="row" style="font-size: 14px;">Assigned To<span class="text-danger">*</span></th>
<td><input type="text" class="form-control" value="" name="subject"></td>
<th style="font-size: 14px;">Due Date<span class="text-danger">*</span></th>
<td><input type="text" class="form-control" value="" name="subject"></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>`);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4 create-task-btn1">
<span href="" class="btn btn-info btn-lg dashboard-icon append">
<i class="fa fa-plus fa-1x"></i>
<br>
Assign Task
</span>
</div>
<div id="table-bordered">
</div>
I just test your code and it's working fine..
Maybe you write the script before render the html? (mean in the head of the html, without defer)?
Make sure you add the script in the end of the body, or add the defer attribute there. otherwise when the script called, the button where you trying add a listener to is not exist in the moment when the script run
$(document).ready(function () {
$('.append').click(function () {
$('#table-bordered').append(`<div class="container" style="margin-top:50px;">
<div class="row">
<form action="#" id="" method="post" class="form-horizontal" role="form" novalidate="novalidate">
<table class="table table-bordered" style="width: 950px;">
<tbody>
<tr>
<th scope="row" style="font-size: 14px;">Task<span class="text-danger">*</span></th>
<td colspan="3">
<input type="text" class="form-control" value="" name="subject"></td>
<td rowspan="3">
<a data-id="" data-toggle="modal" data-original-title="" class="enable-tooltip btn" style="color: red; font-size: 20px;"><i class="fa fa-trash-o"></i></a>
</td>
</tr>
<tr>
<th scope="row" style="font-size: 14px;">Assigned To<span class="text-danger">*</span></th>
<td><input type="text" class="form-control" value="" name="subject"></td>
<th style="font-size: 14px;">Due Date<span class="text-danger">*</span></th>
<td><input type="text" class="form-control" value="" name="subject"></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>`);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4 create-task-btn1">
<span href="" class="btn btn-info btn-lg dashboard-icon append">
<i class="fa fa-plus fa-1x"></i>
<br/>
Assign Task
</span>
</div>
<div id="table-bordered"></div>
I have a jsp where i see the result saved at Data Base in a table on the browser with options to edit, delete each row. I want to be able to click the edit link, fetch the data for that particular customer from data base with spring MVC and Hibernate and show it on the edit modal so that user can see the data and know which to edit.
Below is code Snippet, the line Edit Customer Detail is the link to edit the customer. Am not sure from here where to go, wheather to call an ajax function and how would the ajax function look like? and how will the ajax call the modal?
I saw this solution(Spring MVC Populate Modal Form) but it doesnt show how the modal will be called to populate the values from ajax. Or is there any other way? Could anyone please help, thanks.
<c:forEach var="customer" items="${customers}" varStatus="status">
<tr>
<td><c:out value="${status.count}" /></td>
<td><a title="Go to the Company Certificate Detail">${customer.customerName}</a></td>
<td>${customer.contactName}</td>
<td>${customer.street}</td>
<td>${customer.state}</td>
<td>${customer.zipCode}</td>
<td>${customer.country}</td>
<td>${customer.email}</td>
<!--below line of code till end of tag </td> not showing on browser -->
<td>
<div class="btn-group">
<button type="button"
class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
Actions <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a data-toggle="modal"
data-target="#editCustomerModal">Edit Customer Detail</a></li>
<li><a data-toggle="modal" data-target="#deleteCustomerModal_${customer.id}" >Delete Customer</a></li>
</ul>
</div>
</td>
</tr>
<!--Delete Customer Modal -->
<div id="deleteCustomerModal_${customer.id}" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this Customer? </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<i class="fa fa-trash-o"></i>Delete
</div>
</div>
</div>
</div>
</c:forEach>
My Modal to edit:
<!--Edit Customer Modal -->
<div id="editCustomerModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Create New Customer
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<table class="form-table">
<tbody>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="pool-name">Customer Name:</label></td>
<td><input type="text" id="customerName" title="Company Name" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Contact Name:</label></td>
<td><input type="text" id="contactName" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="description">Street:</label></td>
<td><input type="text" id="street" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="description">State:</label></td>
<td><input type="text" id="state" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Zip-Code:</label></td>
<td><input type="text" id="zipCode" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Country:</label></td>
<td><input type="text" id="country" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Email:</label></td>
<td><input type="text" id="email" path="#"
class="form-control" /></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<div>
<input type="submit" id="createNewCustomer" value="Save"
class="btn btn-default" onClick="alert('To be Implemented');" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Try this, put a hidden value for the customer Id in your edit model,
<input type="hidden" id="customerId" path="customerId" class="form-control" />
Change your submit button into ordinary button for save the customer.
<div class="modal-footer">
<div>
<button type="button" class="btn btn-default updateCustomer" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
You can play with js, specially into the ajax,
<script type="text/javascript">
function ajaxCall(customerId) {
$.ajax({
type: "POST",
url: "/clause/getUpdate?customerId="+customerId ,
success: function(result) {
//populate customer list page again..
}
}
});
$('.updateCustomer').on('click', '.accountsEmployees', function () {
customerId=$("#customerId").val();
ajaxCall(customerId);
}
</script>
$('#Cart tbody tr #quantity').on('keydown', function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
$(this).closest('tr').next().find('input[type=number]').focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="Cart" style="border-color: transparent;" class="table table-hover table-striped well">
<thead class="thead-inverse">
<tr>
<th class="col-lg-1 text-center">Quanity</th>
<th class="col-lg-3 text-center">Comment</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr id="7392036">
<td class="col-lg-1 text-center">
<input type="number" class="form-control" id="quantity" value="0">
</td>
<td class="text-center col-lg-3">
<input type="text" maxlength="15" class="form-control" id="inputforcomment" value="">
</td>
<td class="col-lg-1 text-center">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
<tr id="7392036">
<td class="col-lg-1 text-center">
<input type="number" class="form-control" id="quantity" value="0">
</td>
<td class="text-center col-lg-3">
<input type="text" maxlength="15" class="form-control" id="inputforcomment" value="">
</td>
<td class="col-lg-1 text-center">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
<tr id="7392036">
<td class="col-lg-1 text-center">
<input type="number" class="form-control" id="quantity" value="0">
</td>
<td class="text-center col-lg-3">
<input type="text" maxlength="15" class="form-control" id="inputforcomment" value="">
</td>
<td class="col-lg-1 text-center">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
<tr id="7392036">
<td class="col-lg-1 text-center">
<input type="number" class="form-control" id="quantity" value="0">
</td>
<td class="text-center col-lg-3">
<input type="text" maxlength="15" class="form-control" id="inputforcomment" value="">
</td>
<td class="col-lg-1 text-center">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
</tbody>
</table>
I have a table with multiple rows and each row has two inputs. Both have different ids. I'm trying to focus on next row's input element by selecting the id when user presses tab key . Here's my code:
$('#Cart tbody tr #quantity').on('keydown', function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
$(this).closest('tr').next().find('#quantity').focus();
}
});
While doing this, it selects the wrong textbox on the next row.Any help would be appreciated. thanks
No jQuery required. Just use the tabindex attribute and hook into the browser's native behaviour for applying focus state on tab key presses.
Example:
<table>
<tr>
<td>
<input type="text" tabindex="1">
</td>
</tr>
<tr>
<td>
<input type="text" tabindex="2">
</td>
</tr>
</table>
Recommended for accessibility too.
I am trying to display the below table in an App.
I can't use List or Grid
The purpose of the below code is to allow a user to dynamically add, edit, delete the table data using javascript table.insertRow(table_len).outerHTML
<table id="data_table">
<tr>
<th>Wood</th>
<th>H(ft.)</th>
<th>Th(in.)</th>
<th>Qty.</th>
<th>Action</th>
</tr>
<tr id="row1">
<td id="name_row1">Sesa</td>
<td id="country_row1">12</td>
<td>
<input type="button" id="edit_button1" value="Edit" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
</td>
</tr>
<tr id="row1">
<td><input type="text" id="width_txt">asd</td>
<td><input type="text" id="thick_txt">asd</td>
<td><input type="text" id="qty_txt">asd</td>
<td>
<button class="button icon ion-gear-a" id="edit_button1" value="Edit" onclick="edit_row('1')"></button>
<button class="button icon ion-android-done" id="save_button1" value="Save" class="save" onclick="save_row('1')"></button>
<button class="button icon ion-trash-a" value="Delete" class="delete" onclick="delete_row('1')"></button>
<!-- <input type="button" id="edit_button1" value="Edit" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">-->
</td>
</tr>
<tr>
<td><input type="text" id="new_name"></td>
<td><input type="text" id="new_country"></td>
<!--<td class="col col-20"><input type="text" id="wood_name"></td>
<td class="col col-10"><input type="text" id="height_txt"></td>
<td class="col col-10"><input type="text" id="width_txt"></td>
<td class="col col-10"><input type="text" id="thick_txt"></td>
<td class="col col-10"><input type="text" id="qty_txt"></td> -->
<td><button class="button icon ion-android-add-circle" class="add" onclick="add_row();"></button></td>
</tr>
</table>
js: this is my angular js code ,my angular js code is successfully running but my form value is auto post when button event click.
$scope.toggle = function() {
if ($scope.id_value != null && $scope.id_value != '') {
$scope.loading = true;
var url = 'http://127.0.0.1:78/Attendence_App/home/get_data/' + $scope.id_value;
var result = $http.get(url);
result.success(function(response) {
$scope.name_value = response;
$scope.val_show = false;
$scope.loading = false;
});
result.error(function(data, status, headers, config) {
alert(data);
$scope.loading = false;
});
} else {
alert("ID can not be empty");
$scope.val_show = true;
}
};
this is my html code :
<form action="<?php echo base_url();?>home/post_value" method="POST">
<table class="table table-hover table-responsive">
<tr>
<td>Date</td>
<td colspan="2"> <input type="text" class="form-control" id="date" /></td>
</tr>
<tr>
<td>ID</td>
<td><input type="text" class="form-control" ng-model="id_value" id="id" /></td>
<td><button class="btn btn-primary btn-sm" ng-click="toggle()">Search</button></td>
</tr>
<tr ng-show="loading">
<td>
</td>
<td colspan="2">
<div class=""><img src="http://27.147.128.98/itopupprod3/Image/ajax-loader.GIF" id="loading" alt="loading" /></div>
</td>
</tr>
<tr ng-hide="val_show">
<td>
Name
</td>
<td colspan="2">
<div>
<label id="name" ng-bind="name_value"></label>
</div>
</td>
</tr>
<tr>
<td>Attendance Type </td>
<td colspan="2">
<label>
<input type="radio" name="optionsRadios" value="Yes">
Yes
</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="No">
No
</label>
</td>
</tr>
<tr>
<td>
Login Time
</td>
<td colspan="2">
<input type="text" class="form-control" />
</td>
</tr>
<tr>
<td>
Logout Time
</td>
<td colspan="2">
<input type="text" class="form-control" />
</td>
</tr>
<tr>
<td></td>
<td class="text-align" colspan="2">
<input type="submit" value="Submit Info " class="btn btn-success btn-lg" />
</td>
</tr>
</table>
</form>
my form data is auto post when search button click,please give me some suggestion
If I understand you right, You have to use ng-submit (while submit is your submit function):
<form ng-submit="submit()" ng-controller="ExampleController">
..... fields, labels, yada yada yada...
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
</form>
for more information, go to https://docs.angularjs.org/api/ng/directive/ngSubmit