We Keep Coding

How to use buttons with different Values but same ID for jQuery?

I have a table which generated by PHP and MySql. One of the column will have buttons which will have values which will be used for sending a data to another PHP file using AJAX. But I am now facing a problem that id(s) can have only unique value.
Will it be possible to use same ID for buttons with different values.
Here is a dummy data of HTML (Output given by PHP).
<table>
<tr>
<th>Serial No.</th><th>File Name</th><th>Action</th>
</tr>
<tr>
<td>1</td><td>Physics Notes</td><td><button id="request" value="1">Download</button></td>
<tr>
<tr>
<td>2</td><td>Chemistry Notes</td><td><button id="request" value="2">Download</button></td>
<tr>
<tr>
<td>3</td><td>Mathematics Notes</td><td><button id="request" value="3">Download</button></td>
<tr>
</table>
Now I want when any of the buttons in the 3rd columns are clicked, their values to be receive in the jQuery variable "file".
And then the values will be sent to a PHP file via AJAX.
Here is my jQuery and AJAX code.
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#request").on("click",function(e){
e.preventDefault();
var file = $(this).val();
$.ajax({
url : "downloadfile.php",
type : "POST",
data : {file:file},
success : function(data){
alert("Thank you for using our service");
}
});
})
});
</script>

As said in Comment, an ID shall always be unique. So use class in your case.
<td><button class="request" value="2">Download</button></td>
and
$(".request").on("click", function(e) {
Note Please note that you haven't closed your tr they are missing /
Demo
$(document).ready(function() {
$(".request").on("click", function(e) {
e.preventDefault();
var file = $(this).val();
$.ajax({
url: "downloadfile.php",
type: "POST",
data: {
file: file
},
success: function(data) {
alert("Thank you for using our service");
}
});
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Serial No.</th>
<th>File Name</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Physics Notes</td>
<td><button class="request" value="1">Download</button></td>
</tr>
<tr>
<td>2</td>
<td>Chemistry Notes</td>
<td><button class="request" value="2">Download</button></td>
</tr>
<tr>
<td>3</td>
<td>Mathematics Notes</td>
<td><button class="request" value="3">Download</button></td>
</tr>
</table>

how to insert only unique value in Editor templates in mvc

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

Table with two buttons. One jQuery-ajax doesn't replace <tbody> of <table>, but instead redirects browser to ajax url

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.

How to refresh a table without creating a separate jsp?

I have a table and one search fields, based on what is entered in the search fields the contents of the table are refreshed and if nothing is entered in the search fields the full table is loaded. Here when the user clicks on Go button the ajax call is made.
Currently, I have two jsp as below:
MAIN JSP
<script type="text/javascript">
$(document).ready(function() {
$( "#go-user" ).click(function() {
var userId = $('#usrId').val();
alert(userId);
$.ajax({
url: 'popUserSelect', // action to be perform
type: 'POST', //type of posting the data
data: { userId: userId }, // data to set to Action Class
dataType: 'html',
success: function (html) {
alert(html);
$('#load-user').html(html);
//document.getElementById("leftDiv").innerHTML=html; //set result.jsp output to leftDiv
},
error: function(xhr, ajaxOptions, thrownError){
alert('An error occurred! ' + thrownError);
}
});
return false;
});
});
</script>
<s:form theme="simple">
User Id : <s:textfield name="userId" id="usrId" theme="simple"/>
<s:submit action="popUserSelect" key="Go"></s:submit>
</s:form>
<div id="load-user">
<table width="100%">
<thead>
<tr>
<th>Select</th>
<th>ID</th>
<th>Name</th>
<th>Role</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<s:iterator value="userSupList" >
<tr>
<td><input type="radio" class="RadioButton" name="userRadio" value='<s:property value="USR_AMLUSERNAME"/>' /></td>
<td><s:property value="USR_AMLUSRID"/></td>
<td><s:property value="USR_AMLUSERNAME"/></td>
<td><s:property value="USR_ROLEID"/></td>
<td><s:property value="USR_LOCATIONID"/></td>
</tr>
</s:iterator>
</tbody>
</table>
</div>
<input type="button" value="Submit" onclick="buttonClick('SubmitUser')"/>
<input type="button" value="Cancel" onclick="buttonClick('Close')"/>
Refresh Jsp:
<table width="100%">
<thead>
<tr>
<th>Select</th>
<th>ID</th>
<th>Name</th>
<th>Role</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<s:iterator value="userSupList" >
<tr>
<td><input type="radio" class="RadioButton" name="userRadio" value='<s:property value="USR_AMLUSERNAME"/>' /></td>
<td><s:property value="USR_AMLUSRID"/></td>
<td><s:property value="USR_AMLUSERNAME"/></td>
<td><s:property value="USR_ROLEID"/></td>
<td><s:property value="USR_LOCATIONID"/></td>
</tr>
</s:iterator>
</tbody>
</table>
Is there any way that I can avoid using two jsp for refreshing and refresh the jsp on the same main jsp itself?

You have to give your table an ID:
<table width="100%" id="myTable">
...
</table>
And adapt your AJAX call:
$.ajax({
url: 'originalPage', // use original page here
type: 'POST',
data: { userId: userId },
dataType: 'html',
success: function (html) {
// get the content of #myTable from the AJAX result
var tableContent = $("#myTable", html).html();
// set the content of #myTable to the result of the AJAX call
$('#myTable').html(tableContent);
},
error: function(xhr, ajaxOptions, thrownError){
alert('An error occurred! ' + thrownError);
}
});
jQuery can take the target to use as second parameter, which is used in $("#myTable", html). This way, it does not search the current document for #myTable, but the document returned from the AJAX call.
The disadvantage of this that the whole original page needs to be loaded through AJAX, although only one minor part of it is used.

Hiding placeholder Div, then using same code on another page giving javascript error

I have code that is generated by passing data from an ajax call to an ActionView method in my controller. I can only access that data when the ajax call returns. The area where I am trying to display my data is not getting refreshed so I added it to my PartialView to return back to the page div I created. My issue is that I have a placeholder of exactly the same small table so that the page does not look goofy before the user submits what they need to to call the ajax request. My issue is that the button I have in the placeholder area and area that I have displaying back are not working correctly. I think what is happening is that the javascript is getting confused by the two areas having the same information, but changing the names/ids doesn't seem to fix it. Here is my code. (I also need the placeholder table to be functional before it is hidden)
This is in the main page:
<tr>
<td>Comments: #Html.TextBox("comments2", comment)</td>
<td></td>
</tr>
<tr>
<td style="vertical-align: middle;">Booking#:#Html.TextBox("bookNum2", bookNum)</td>
<td><input id="saveOrder2" type="button" value="Save Order2" onclick="saveOrder2(true)" /></td>
</tr>
<tr>
<td style="vertical-align: middle;">Ship Date:#Html.TextBox("shipDate2", shipDate)</td>
<td>
<input id="Build" type="button" value="Build Load" /> </td>
</tr>
</table>
In the PartialView page I have this:
<tr>
<td>Comments: #Html.TextBox("comments", comment)</td>
<td></td>
</tr>
<tr>
<td style="vertical-align: middle;">Booking#:#Html.TextBox("bookNum", bookNum)</td>
<td><input id="saveOrder" type="button" value="Save Order" onclick="saveOrder(true)" /></td>
</tr>
<tr>
<td style="vertical-align: middle;">Ship Date:#Html.TextBox("shipDate", shipDate)</td>
<td>
<input id="Build" type="button" value="Build Load" /></td>
</tr>
</table>
Then the javascript function I am using:
function saveOrder(isSave)
{
var comments = document.getElementById("comments2").value;
var bookNum = document.getElementById("bookNum2").value;
var shipDate = document.getElementById("shipDate2").value;
var itemList = grabSaveItems();
//alert(itemList.toString());
var request = $.ajax(
{
type: "POST",
url: "/Home/saveOrder",
data: "itemList=" + itemList+"&isSave="+isSave+"&comments="+comments+"&bookNum="+bookNum+"&shipDate="+shipDate,
success: function (itemList) {
}
});
request.done(function () {
if (isSave == true)
{
alert("The Order Was Saved");
}
});
request.fail(function (Check, textStatus) { alert("Request failed: " + textStatus); });
}
So based on the order number I add the information I need to the Model and then return my PartialView to display what I need.
When I click Save Order after this ajax call is made I get the following runtime error:
Microsoft JScript runtime error: Member not found. Which occurs just after the call to save Order, the debugger points to the line just after this function, not sure what that means. Any help would be appreciated.

Ok, I knew it was something dumb. It looks like Javascript gets freaky when you assign the id of the input the same name as your function so it doesn't know what to do/call.
<td><input id="**saveOrder"** type="button" value="Save Order" onclick="**saveOrder**(true)"/></td>