i want to enter only unique Machine_serial_no in my editor templates , user can add Machine_serial_no through browsing a file or can enter manually As shown in below code, i just want to make sure that user shouldnot allow to enter same value twice .your suggestion is always welcome
..Thanks in advance..
//main view
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.9.2.min.js"></script>
<div id="cast">
<tr>
<td> File:</td>
<td><input type="file" id="file" /> </td>
<td> <input type="button" value="Upload" id="btnSubmit" /> </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="manualSerial">
<td class="required">Total No of serial no U want to enter:</td>
<td>#Html.TextBoxFor(x => x.count, new { #Value = 0 })</td>
<td colspan="4">
<input type="button" value="Add Serial" id="addserial" />
#*#Html.ActionLink("Add Serial", "AddMachineSerial", "Import", new { #id = "addserial" ,})
#Html.ValidationMessageFor(model => model.serials.Machine_serial_no)*#
</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td id="ShowModel" colspan="6">
<table id="tbl1" style="width:100%;">
<thead>
<tr>
<td>Brand</td>
<td>Machine</td>
<td>Model</td>
<td>Serial No</td>
<td>Mac Address</td>
<td>Action</td>
</tr>
</thead>
</table>
</td>
</tr>
<tr>
<td id="ShowModel" colspan="6">
<div style="height:253px; width:100% ;overflow: auto;">
<table style="width:100%;margin-left:0px;margin-right:0px">
#*<thead>
<tr>
<th style="width:45px;">Brand</th>
<th style="width:90px;">Machine</th>
<th style="width:80px;">Model</th>
<th>Serial No</th>
<th>Mac Address</th>
<th>Action</th>
</tr>
</thead>*#
<tr>
<td colspan="6" id="td_serial"></td>
</tr>
</table>
</div>
</td>
</tr>
//jquery
$('#addserial').click(function () {
var count = $('#count').val();
var i;
if ($('#searchid').val() != '') {
if ($('#count').val() != 0) {
for (i = 0; i < count; i++) {
$.ajax({
type: 'GET',
data: { mid: $('#machineTypes_MTId').val(), modelName: $('#searchid').val(), modelId: $('#searchValue').val() },
url: '#Url.Action("AddMachineSerial","Import")',
success: function (response) {
$('#ShowModel').show();
$('#td_serial').prepend(response);
$('#count').val(0);
}
});
}
}
else {
alert("Enter no of serial you want to enter!")
}
}
else {
alert("select Model First!")
$('#count').val(0);
}
});
//editor Templates /parital view
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
#using (Html.BeginCollectionItem("serialList"))
{
#Html.ValidationSummary(true)
<div id="DeleteTxt1">
<table id="tbl1" style="width:100%;margin-left:0px;margin-right:0px">
<tr class="importitem1">
<td>#Model.brandName</td>
<td>#Model.machineName</td>
<td>#Model.MachineModel</td>
#*<td class="required">Machine Serial No.:</td>*#
<td>
#Html.TextBoxFor(x => x.Machine_serial_no, new { placeHolder = "Enter Machine Serial here.", #class = "serial1"})
#Html.ValidationMessageFor(x => x.Machine_serial_no)
</td>
<td><input type="button" value="Cancel" id="DeleteBtn1" style="color:red;" /></td>
</tr>
</table>
</div>
}
Assuming you want to alert the user as soon as they enter a non unique value, then you need to handle the .change() event of the textbox, and since the textboxes are being added dynamically, you need to use event delegation
$('#td_serial').on('change', '.serial1', function() {
var isvalid = true;
var inputs = $('.serial1').not($(this));
var text = $(this).val();
$.each(inputs, function(index, item) {
if ($(this).val() && $(this).val() === text) {
isvalid = false;
return false;
}
});
if (!isvalid) {
alert('not unique!');
}
});
Note the alert('not unique!') is just for testing purposes - its not clear how you want to notify the user - e.g. include a div with an error message that your might show/hide as required
Next your partial includes #Html.ValidationMessageFor(x => x.Machine_serial_no) suggesting you have validation attributes. In order to get client side validation for dynamically created elements you need to re-parse the validator when the new elements have been added. Modify your script to
for (i = 0; i < count; i++) {
$.ajax({
type: 'GET',
data: { mid: $('#machineTypes_MTId').val(), modelName: $('#searchid').val(), modelId: $('#searchValue').val() },
url: '#Url.Action("AddMachineSerial","Import")',
success: function (response) {
$('#ShowModel').show();
$('#td_serial').prepend(response);
$('#count').val(0);
// Reparse the validator
$('form').data('validator', null);
$.validator.unobtrusive.parse(form);
}
});
}
Side note - consider modifying this so that you only re-parse once all ajax calls are complete
Note also that you should only have one #Html.ValidationSummary(true) (your currently is adding one for each partial) and you need to remove the scripts from the partial - your should have one copy of the scripts only in the main view
I think this is you want to validate client side
$(function (){
$('#partialViewtextbox_Id').change(function (){
var partial = $('#partialViewtextbox_Id').val();
var main = $('#maintextbox_Id').val();
if(partial == main)
{
alert("value already available");
}
});
});
Related
I need whatever value that shows inn the table td sub total to show in the amount of the script. The aim is to process the total subtotal amount in the inline code of the payment merchant. if there is a code to capture such data with html too it would be aprreciated
<script src="https://api.ravepay.co/flwv3-pug/getpaidx/api/flwpbf-inline.js"></script>
<button type="button" onClick="payWithRave()">Pay Now</button>
</form>
<script>
const API_publicKey = "FLWPUBK-7991a166b25a84cbfb0cdc0deaa78c1f-X";
var selector = document.getElementsByClassName()
function payWithRave() {
var x = getpaidSetup({
PBFPubKey: API_publicKey,
customer_email: "user#example.com",
amount: 20,
customer_phone: "234099940409",
currency: "NGN",
txref: "rave-123456",
meta: [{
metaname: "flightID",
metavalue: "AP1234"
}],
onclose: function() {},
callback: function(response) {
var txref = response.data.txRef; // collect txRef returned and pass to a server page to complete status check.
console.log("This is the response returned after a charge", response);
if (
response.data.chargeResponseCode == "00" ||
response.data.chargeResponseCode == "0"
) {
// redirect to a success page
} else {
// redirect to a failure page.
}
x.close(); // use this to close the modal immediately after payment.
}
});
}
<div class='sora_order'>
<table>
<tbody>
<tr>
<th>Selected Payment Method</th>
<td class='soramethodsuccess'/>
</tr>
<tr>
<th>Order ID</th>
<td class='soraorderidsuccess'/>
</tr>
<tr>
<th>Order date</th>
<td class='soraorderdate'>
</td>
</tr>
<tr>
<th>Your Subtotal</th>
<td class='soratotalsuccess'> </td>
</tr>
</tbody>
</table>
</div>
<form>
</script>
You can assign an id to that element, then get the innerText value of that element:
<td id="subtotal" class='soratotalsuccess'>10</td>
<script>
const amount = document.getElementById("subtotal").textContent
</script>
You can also do it by className, but it will be less efficient
document.getElementsByClassName("soratotalsuccess")[0].textContent
I have a ViewModel with a parameter List. In the View, the user should be able to add or remove from that list such that the added or removed users are reflected in the POST for that parameter. In JQuery, after clicking an "Add" button, an ajax call returns a UserModel variable, but a simple .append doesn't add to the list.
The other questions I've seen on this issue deal with Partial Views, but this situation updates the table of UserModel without needing a Partial View. It seems like there should be an easy way to do this. Does anyone know how to add the returned UserModel to the List in JQuery so that the List will be returned to the Post with the added models?
<script>
$("#bUser").on('click', function () {
var $addedRecipient = $("#AddedRecipient");
if ($addedRecipient.val() != null && $addedRecipient.val() != "") {
$.ajax({
type: "GET",
url: '#Url.Action("GetFullRecipient", "Message")',
data: { CompanyID: $("#CompanyID").val(), Employee: $addedRecipient.val() },
success: function (data) {
$("#Recipients").append(data);//Not adding to Recipients (Model.List<UserModel>) - is there a simple solution like this?
var bRow = $('<tr></tr>'),
bCell = $('<td style="display:none"></td>').append(data.UserID);
bRow.append(bCell);
bCell = $('<td align="center"></td>').append(data.UserFirstName);
bRow.append(bCell);
bCell = $('<td align="center"></td>').append(data.UserEmail);
bRow.append(bCell);
bCell = $('<td align="center"><input type="button" class="btn btn-info removeRecipient" value="Remove"></td>');
bRow.append(bCell);
$("#bTable tbody").append(bRow);//Works with returned data
$addedRecipient.val("");
},
error: function () {
alert("Recipient could not be added.");
}
});
}
});
</script>
this code worked perfect for me, you just have to go through this list, obviously you have to put the #model directive and a type list Recipient.
#model List<...Models.Recipient>
<input type="button" id="btnAdd" class="btn btn-primary" value="Add"
onclick="myfunction()"/>
<script>
function myfunction() {
$.ajax({
type: 'GET',
contentType:"application/json; charset=utf-8",
url: '#Url.Action("GetFullRecipient","Message")',
data: { CompanyID: $("#CompanyID").val(), Employee:
$addedRecipient.val()},
success: function (response) {
$("#containerData").html(response);
},
error: function (result) {
alert(result);
}
});
}
</script>
<div id="containerData">
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Desc_Prod</th>
<th>Cantidad</th>
</tr>
</thead>
<tbody>
#if (Model != null)
{
foreach (var item in Model)
{
<tr>
<td>#item.UserID</td>
<td>#item.UserFirstName</td>
<td>#item.UserEmail</td>
<td><a class="btn btn-danger" href="#Url.Action("DeleteRow","Message", new {item.UserID})">Delete</a></td>
</tr>
}
}
</tbody>
</table>
</div>
The answer here followed the link in freedomn-m's comment. Iterate through the Razor table using a for loop, then use a HiddenFor with the model parameter's ID and a CheckBoxFor as the model parameter's selecting field, and have a submit button with a unique name and value. When a button input is clicked and the value fits a given string, loop through the model and add a user that's not there or subtract a user that is there and return to the View.
<div class="row">
<div class="col-lg-12">
<table class="table table-bordered" id="bTable">
<thead>
<tr>
<th style="display:none"></th>
<th style="display:none"></th>
<th class="text-center">Recipient</th>
<th class="text-center">E-mail</th>
<th class="text-center">Select</th>
</tr>
</thead>
<tbody>
#if (Model.Recipients.Any())
{
for (var i = 0; i < Model.Recipients.Count; i++)
{
<tr>
<td style="display:none">#Html.HiddenFor(m => m.Recipients[i].RecipientUserID)</td>
<td style="display:none">#Html.HiddenFor(m => m.Recipients[i].RecipientCorporateID)</td>
<td align="center">#Model.Recipients[i].RecipientName</td>
<td align="center">#Model.Recipients[i].RecipientEmail</td>
<td align="center">#Html.CheckBoxFor(m => m.Recipients[i].RemoveRecipient)</td>
</tr>
}
}
</tbody>
</table>
</div>
</div>
I have to update the status of mac device which i am selecting(checkbox) from html table.If i am selecting one mac from html table,it will show offline or online status of mac.Below code i am using for this.Problem is if i am selecting any mac only first row status column is updating.I want to update selected mac row status in respective column.
I am trying with below code but it is not working
var nextColumnCell = $(selected_device_mac).parent("tr").find(selected_device_id)
if(result.includes("On-line")){
nextColumnCell.html("");
nextColumnCell.append(result + " ✅")
}else if(result.includes("Off-line")){
$(selected_device_id).html("");
$(selected_device_id).append(result+" ❗");
}
Actual Code
function macDeviceClickedBox(checkBoxName){
var values = new Array();
var selected_device_id ;
var selected_device_mac ;
$.each($("input[name='"+checkBoxName+"']:checked").closest("td").next("td"), function () {
values.push($(this).text().trim())
});
document.getElementById("macaddress").value = values.join("\n");
selected_device_id = '#Selected_Device';
selected_device_mac = values.join("\n");
alert(selected_device_mac)
$('#cover-spin').show();
$.ajax({
method: "GET",
dataType: "text",
url: "getDeviceType",
data: {
mac : selected_device_mac.trim(),
},
success: function(result) {
$('#cover-spin').hide();
if (result !== "") {
if(result.includes("On-line")){
$(selected_device_id).html("");
$(selected_device_id).append(result+" ✅");
}else if(result.includes("Off-line")){
$(selected_device_id).html("");
$(selected_device_id).append(result+" ❗");
}
}else{
$(selected_device_id).html("");
$(selected_device_id).append("Not Selected ❗");
}
}
});
}
Html.erb
<table id="DeviceTable" class="table table-bordered">
<thead>
<tr class="info">
<th style="width: 10px;">Select</th>
<th>Device</th>
<th> Type</th>
<th> Model</th>
<th> Status</th>
</tr>
</thead>
<tbody class="parameter_table">
<% #devices.all.each do |parameter| %>
<tr id="device_<%=parameter.id %>">
<td >
<input type="checkbox" class="checkBox" name="checkBox[]" onchange="macDeviceClickedBox(this.name)">
</td>
<td id="macaddress" style="word-break:break-all;">
<%= parameter.mac_address%>
</td>
<td style="word-break:break-all;">
<%= parameter.device_type%>
</td>
<td style="word-break:break-all;">
<%= parameter.model%>
</td>
<td class="Selected_Device" id="Selected_Device">
<b id="Selected_Device" style="float: right;">!Not Selected</b>
</td>
</tr>
<% end %>
</tbody>
</table>
EDIT: I originally simplified my code, hoping to isolate my problem, but I see I need to show the unsimplified code to discover my problem; so I'm replacing the HTML and JavaScript with the "full version", and have edited my description to include new information.
I have a table with two Buttons.
One button works fine: it triggers a jQuery overlay form so the user can enter data for a new row. AJAX then removes the "old" < tbody > and replaces it with a new < tbody > (with the new row added). That works fine. --critically, it also stores the new row into a database.
The other button is responsible for removing rows that have been checked by the user. jQuery AJAX does remove the selected rows from the database, but instead of replacing the "old" < tbody > with the new (now smaller) one, it loads the AJAX url into the browser, which shows the raw new set of rows that were intended to be put into the < tbody >. Using the back button and F5-ing shows that the rows were indeed removed.
I don't know how to 'blend' these buttons into one table.
Here is the jQuery:
// opens a pop-up form as an overlay (id: #box_form) that has its own buttons
$('#addy').click(function(e){
//e.preventDefault();
$('#box_form').dialog('open');
});
$( "#datepicker" ).datepicker(
{altFormat: "yy-mm-dd"}
);
$('#box_form').dialog({
autoOpen: false,
height: 340,
width: 400,
modal: true,
buttons: [
{
text: "Cancel",
click: function() {
$(this).dialog("close");
}
},
{
text: "Submit",
click: function() {
var symbol = $("#symbol").val();
var quant = $("#quant").val();
var price = $("#price").val();
var datepicker = $("#datepicker").val();
var fee = $("#fee").val();
var account = $("#account").val();
var owner = $("#owner").val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'symbol='+ symbol + '&quant='+ quant + '&price='+ price + '&datepicker='+ datepicker + '&fee='+ fee + '&account='+ account + '&owner='+ owner;
if(symbol==''||quant==''||price==''||datepicker==''||fee==''||account=='')
{
alert("Please Fill All Fields");
}
else
{
$.ajax({
type: "POST",
url: "addPurch.php",
data: dataString,
cache: false,
success: function(result){
//document.getElementById("stocktablebody").innerHTML = result;
$("#stockstable tbody").html(result);
}
});
//close this little input form overlay
$( this ).dialog( "close" );
}
return false;
}
}
]
});
$('#selectAll').click(function(event){
$(this).closest('table').find('td input:checkbox').prop('checked', this.checked);
});
$('#removie').submit(function(event){
event.preventDefault();
var remove = $("#remove[]").val();
var owner = $("#owner").val();
var dataString = 'remove='+ remove + '&owner='+ owner;
//var url = "removePurch.php"; //$(this).attr('action');// this attribute's action (specified in <form> tag)
$.ajax({
type: "POST",
url: "removePurch.php",
data: dataString,
cache: false,
success: function(result){
//document.getElementById("stocktablebody").innerHTML = result;
$("#stockstable tbody").html(result);
}
});
return false;
});
Here is the HTML:
(First big div is for the Add button's jQuery pop-up; Second big block is the actual table.)
<!-- Pop-up form hidden by JavaScript until button is clicked -->
<div id="box_form" title="Add a purchase">
<form id="addsymbol" action="addPurch.php" method="POST"
name="addstock" enctype="multipart/form-data">
<input type="hidden" name="owner" id="owner" value="me" />
<table class="popuptable">
<thead>
<tr>
<td class="right"><label for="symbol">Symbol:</label></td>
<td><input type="text" name="symbol" id="symbol"></td>
</tr>
<tr>
<td class="right">
<!-- for="..." Specifies which form element a label is bound to -->
<label for="quant">Quantity:</label>
</td>
<td><input type="text" name="quant" id="quant"></td>
</tr>
<tr>
<td class="right"><label for="price">Price for each: </label>
</td>
<td><input type="text" name="price" id="price"></td>
</tr>
<tr>
<td class="right"><label for="fee">Fee: </label></td>
<td><input type="text" name="fee" id="fee"></td>
</tr>
<tr>
<td class="right"><label for="datepicker">Date
Purchased: </label></td>
<td><input type="text" name="datepicker" id="datepicker">
<!-- had real trouble getting data to POST, just made all names,ids === and it worked -->
</td>
</tr>
<tr>
<td class="right"><label for="account">Which account:
</label></td>
<td><select name="account" id="account">
<option value="note">must fix fee functionality</option>
<option value="FidelityIndividual">Fidelity Individual</option>
<option value="FidelitySEP">Fidelity SEP</option>
<option value="FidelityRoth">Fidelity Roth</option>
<option value="ScottradeIRA">Scottrade IRA</option>
</select></td>
</tr>
</thead>
</table>
</form>
</div>
<!-- Table with two buttons (Add-a-row and Remove-a-row), and a checkbox for each row, and a checkbox to "check all rows" -->
<table id="stockstable" class="center">
<thead>
<tr>
<th colspan="2">
<!-- this just triggers form to come up. Form has its own buttons -->
<input type="submit" id="addy" value="Add a stock purchase">
</th>
<th colspan="3">Activity Today</th>
<th colspan="2">Change Since Purchase</th>
<th colspan="3">Cost Basis</th>
<th colspan="3">Purchas Details</th>
<form action="removePurch.php" method="post"
enctype="multipart/form-data">
<input type="hidden" name="owner" id="owner" value="me" />
<th><button id="removie">Remove</button></th>
</tr>
<tr>
<th>Name</th>
<th>Symbol</th>
<th>Price</th>
<th>$ change</th>
<th>% change</th>
<th>Quantity</th>
<th>Purchase Price</th>
<th>Total Cost</th>
<th>Total % Change</th>
<th>Total $ Change</th>
<th>Fee</th>
<th>Account</th>
<th>Purchase Date</th>
<th><input type="checkbox" name="remove[]" id="selectAll"
value="all"></th>
</tr>
</thead>
<tbody>
<tr>
<td>International Business Machines</td>
<td>ibm</td>
<td>166.95</td>
<td>+3.10</td>
<td>1.86</td>
<td>1,986.88%</td>
<td>$158.95</td>
<td>8</td>
<td>8</td>
<td>71.00</td>
<td>7.00</td>
<td>note</td>
<td>07/16/2015</td>
<td><input type="checkbox" name="remove[]"
value="55a3436f5490c4ed4cbbe1a5"></td>
</tr>
<tr>
<td>Facebook, Inc.</td>
<td>fb</td>
<td>87.95</td>
<td>+2.07</td>
<td>2.35</td>
<td>999.38%</td>
<td>$79.95</td>
<td>8</td>
<td>8</td>
<td>71.00</td>
<td>7.00</td>
<td>note</td>
<td>07/30/2015</td>
<td><input type="checkbox" name="remove[]"
value="55a346745490c4ee4cbbe1a6"></td>
</tr>
</tbody>
</form>
</table>
I don't need the < form > tag in the table at all because JS has access to all the elements in the DOM.
in $('#removie').click(function(event) (I changed it from submit to click because it's no longer a form, but just a button), the checkboxes have to be "unpacked" or "discovered" by JavaScript, and put into a JavaScript array like so:
var remove = [];
$(':checkbox:checked').each(function(i){
remove[i] = $(this).val();
});
...it somehow knows which checkboxes, even though I removed the < form > tag.
The rest in that jQuery function is the same as the original question.
In the PHP, the checkbox data is received via POST only as a comma separated value, and has to be exploded into an array (oh, or not, depending on your code, really) like so:
$remove = explode(',', $_POST['remove']);
Profit.
I have search box and add and edit buttons in one page.i have to edit a detail after selecting radiobutton.The script for selecting radiobutton and redirecting to next page is given below.But only alert to 'Select resume' only works.rest of code is not working.Pls help
<script type="text/javascript">
$(document).ready(function () {
var which_button;
var rad;
$('input[type="image"]').click(function (event) {
process_form_submission(event);
if (which_button == "Edit") {
if (!$("input[name='rdoUserId']:checked").val()) {
alert('Select a Resume!');
return false;
}
else {
rad = $("input[name='rdoUserId']:checked").val();
var url = "Edit/" + rad;
$('#frmIndexResume').attr("action", url);
$('#frmIndexResume').submit();
}
}
return false;
})
function process_form_submission(event) {
event.preventDefault();
//var target = $(event.target);
var input = $(event.currentTarget);
which_button = event.currentTarget.value;
}
});
</script>
<form name="frmIndexResume" method="get"action="">
<table id="tblSearch">
<tr>
<td>Name:#Html.TextBox("Names")</td>
<td>From:#Html.TextBox("FromDate")</td>
<td>To:#Html.TextBox("ToDate")</td>
<td><input type="image" value="Search" src="#Url.Content("~/images/Search.png")" width="60px"height="40px" alt="Search"/></td>
</tr>
</table>
<table id="Createbtn">
<tr>
<td>
<a href="#Url.Action("Create", "Resume")" title="Create">
<img src="#Url.Content("~/images/Create.png")" width="40px" height="30px"alt="Create"/></a>
</td>
<td>
<input type="image" value="Edit" src="#Url.Content("~/images/Edit.png")" width="40px" height="30px" alt="Edit"/>
</td>
</tr>
</table>
<table id="tblResume">
<caption>Listings</caption>
<tr>
<th>Select</th>
<th>
Name
</th>
<th>
DOB
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
<input type="radio" value="#item.Id" name="rdoUserId" />
</td>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.DOB)
</td>
</tr>
}
</table>
</form>
You have the radio button in a loop causing there to be duplicates of the radio button.
#foreach (var item in Model)
{
...
<input type="radio" value="#item.Id" name="rdoUserId" />
...
}
The 'name' attribute is not a unique identifier. My guess is the jQuery is picking either the last or first radio button in the form since there is more than one of them.
There may be more issues besides this with the form also.
Maybe window.location is what you are looking for.
You can easily redirect via:
window.location = url;
or via:
window.navigate(url);
Please note that the second approach maybe ie-specific.