Develop Reference

jQuery - catch row field for value in edit modal

On table row Edit button click, a form modal is opened.
I am picking that row current values so they can be default values of that form fields when modal is opened.
As I am new in jQuery I can not figure out how to pass that values in other method.
My func:
var $fruitForm = $('#edit-form')
$('.fruit_edit').on('click', function(event) {
// Get the data-id value of the modal link.
var id = $(this).data('fruit_id');
// Set the hidden input field with the id.
$('#fruit_id').val(id);
var $row = $(this).closest('tr');
// Here I am finding row value on click
var tableFruitName = $("a[data-fruit_id="+id+"]").closest("tr").find('.tableFruitName').text()
event.preventDefault();
});
// Listen for submit instead of click.
$fruitForm.on('submit', function(event) {
event.preventDefault();
// Get the values from the form.
var $form = $(this);
var id = $form.find('input[name="fruit_id"]').val();
I want for the value from upper 'onclick' to be defined in from input here
var fruitName = $('#fruitName').val(tableFruitName);
$.ajax({
type: 'PATCH',
url: '/fruit/edit',
data: JSON.stringify({
'id' : id,
'fruitName' : fruitName
}),
processData: false,
contentType: 'application/json-patch+json',
success: function () {
$("#fruit-table").load(location.href + " #fruit-table");
$('#editFruit').modal('hide');
},
error: function (xhr, status, error) {
var ErrorMessage = JSON.parse(xhr.responseText);
}
});
});
Explanation of my workflow is within comments. I don't know how to pass catched value in other method where the input is defined.
<tr>
<td class="text-center"> {{ fruit.id }} </td>
<td class="text-center tableFruitName"> {{fruit.fruitName is empty ? "N/A" : fruit.startDate }}</td>
<td class="td-actions text-center">
<a href data-toggle="modal" data-target="#editFruit" data-fruit_id="{{ fruit.id }}" class="btn btn-warning fruit_edit">
<i class="fa fa-fw fa-pencil"></i>
</a>
</td>
</tr>

jQuery bringing back more than 1 row of data from table

I have a table, currently with 2 rows. Next to these rows I have an icon, which when clicked, brings up a dialog box, and in this dialog box is a button which when pressed, is to run a function which copies the selected item to another file
So pretend we're in my dialog box, and this is my code:
$(document).ready(function() {
$(function() {
$("#save").on("click", saveNote);
});
})
This calls the following function:
function saveNote() {
var OpenNote = $('.dlg_lineNote');
var row = jQuery(OpenNote.closest("tr"));
var cpyItem = row.find(".IPROD").text();
$('div#dialogD').data('dataIPROD', cpyItem);
jQuery.ajax({
url: 'B2BUNV400.PGM',
type: 'POST',
data: {
task: 'copyItem',
cpyItem: cpyItem
},
}).done(function(message) {
$("#saveComment").html("Saved");
});
}
My table has two rows with the following items:
row1: 97940G96058445V
row2: 32253216058445
Here is the html:
<tr class="altcol1">
<input type="hidden" name="IPRODa" value="97940G96058445V" />
<td class="" align="center"><span><a class="icon-sitemap split dlg_lineNote" href="#" id="dlg_lineNote" title="Copy item to LXF files" href=""></a></span></td>
<td align="center" class="IPROD">97940G96058445V</td>
<td class="text" align="center">PA</td>
<td class="text" align="center">F7940</td>
<td class="text" align="center">G9</td>
<td class="text" align="center">58</td>
<td class="text" align="center">44</td>
<td class="text" align="center">5</td>
<td class="text num" align="center">6.000</td>
</tr>
<tr class="altcol2">
<input type="hidden" name="IPRODa" value="32253216058445" />
<td class="" align="center"><span><a class="icon-sitemap split dlg_lineNote" href="#" id="dlg_lineNote" title="Copy item to LXF files" href=""></a></span></td>
<td align="center" class="IPROD">32253216058445</td>
<td class="text" align="center">PA</td>
<td class="text" align="center">F2253</td>
<td class="text" align="center">21</td>
<td class="text" align="center">58</td>
<td class="text" align="center">44</td>
<td class="text" align="center">5</td>
<td class="text num" align="center">6.000</td>
</tr>
This is the html for the dialog:
<div id="dialogD">
<button id="save">Copy Item</button>
</div>
This is jQuery I have to open said dialog:
$(document).ready(function() {
$('div#dialogD').dialog({ autoOpen: false, height: 250, width: 300 })
$('.dlg_lineNote').click(function(){
var OpenNote = $(this);
var row = jQuery(OpenNote.closest("tr"));
var cpyItem = row.find(".IPROD").text();
$('div#dialogD').data('dataIPROD',cpyItem);
jQuery.ajax(
{
url: 'B2BUNV400.PGM',
type: 'POST',
data: {task: 'copyItem', Item: cpyItem},
}).done(function(message)
{
$("#notetext").val(message);
$('div#dialogD').dialog('open');
});
$(document).ready(function() {
$(function() {
$("#save").on("click", saveNote);
});
})
})
And the result:
task=copyItem&cpyItem=97940G96058445V32253216058445
Notice cpyItem is actually retrieving both the item records in the table, instead of the item I have clicked when opening the dialog box
Whichever item I chose to 'save', it is pulling both rows...
I hope this makes sense
Appreciate any help in advance
Note: I do not use jquery very often
Edit: This is my updated code
<script>
jQuery(function() {
jQuery("input:submit, input[type=button], input[type=submit], button,
.button").button();
});
$(document).ready(function() {
$('div#dialogD').dialog({ autoOpen: false, height: 250, width: 300 })
$('.dlg_lineNote').click(function(){
var OpenNote = $(this);
var row = jQuery(OpenNote.closest("tr"));
var cpyItem = row.find(".IPROD").text();
$('div#dialogD').data('dataIPROD',cpyItem);
jQuery.ajax(
{
url: 'B2BUNV400.PGM',
type: 'POST',
data: {task: 'copyItem', Item: cpyItem},
}).done(function(message)
{
$("#notetext").val(message);
$('div#dialogD').dialog('open');
});
})
// var item = row.find(".IPROD").text();;
// $("#save").click({cpyItem: item} ,saveNote);
$('.dlg_lineNote').on('click', function() {
var row = $(this).closest("tr");
var cpyItem = row.find(".IPROD").text();
$('div#dialogD').data('dataIPROD', cpyItem);
});
function saveNote() {
jQuery.ajax({
url: 'B2BUNV400.PGM',
type: 'POST',
data: {
task: 'copyItem',
cpyItem: $('div#dialogD').data('dataIPROD') //get the value of the last selected row
},
}).done(function(message) {
$("#saveComment").html("Saved");
});
}
})
</script>

Your OpenNote variable is pointing to two objects as it's selecting by class and there's two td elements with that class.
You need to select the closest td with the class .dlg_lineNote to the item you choose to save.
How do you choose which item to save? I know you click the save button in your dialog but you need a way of relating that to a specific row
You could do it like this:
var row;
$('.dlg_lineNote').on('click', function() {
row = $(this).closest("tr");
});
function saveNote() {
var cpyItem = row.find(".IPROD").text();
$('div#dialogD').data('dataIPROD', cpyItem);
jQuery.ajax({
url: 'B2BUNV400.PGM',
type: 'POST',
data: {
task: 'copyItem',
cpyItem: cpyItem
},
}).done(function(message) {
$("#saveComment").html("Saved");
});
}

Currently you're selecting the fields from every row with $('.dlg_lineNote');.
What you need to do instead is identify the row which was clicked on. You can use a data-attribute on the button to hold the value from the row, as you do now (although in your current code the data attribute is redundant), but you need to change the location where you set the value to the moment when the row is clicked on (rather than the dialog button), so you can easily identify the right row:
$(document).ready(function() {
$('div#dialogD').dialog({ autoOpen: false, height: 250, width: 300 });
$('.dlg_lineNote').on('click', function() {
var row = $(this).closest("tr"); //use "this" to get the exact element clicked on. From here we can get to the exact tr, instead of selecting all of them at once.
var cpyItem = row.find(".IPROD").text();
$('div#dialogD').data('dataIPROD', cpyItem);
});
$("#save").click(saveNote);
});
function saveNote() {
jQuery.ajax({
url: 'B2BUNV400.PGM',
type: 'POST',
data: {
task: 'copyItem',
cpyItem: $('div#dialogD').data('dataIPROD'); //get the value of the last selected row
},
}).done(function(message) {
$("#saveComment").html("Saved");
});
}

Toggle Selected Table Row Highlight on Button Click

I have a simple table with a Select button for each row that when clicked calls a PHP script to update a Session Variable with the ID of the selected Item. Here's the table:
<tr class="" id="PR9215">
<td>CODE A</td>
<td>Fresh Frust</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="PR9594">
<td>Oranges</td>
<td>Fresh Oranges</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="PR9588">
<td>MANGO</td>
<td>Fresh Mango</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
and here's the script that it calls:
$(document).ready(function() {
$('button.btn-success').click(function() {
var itemID = $(this).closest('tr').attr('id');
// Create a reference to $(this) here:
$this = $(this);
$.post('updateSelections.php', {
itemID: itemID,
selectionType: 'yes'
}, function(data) {
data = JSON.parse(data);
if (data.error) {
var ajaxError = (data.text);
var errorAlert = 'There was an error updating your selections - ' + ajaxError + '. Please contact Support';
$this.closest('tr').addClass("warning");
$('#alert_ajax_error').html(errorAlert);
$("#alert_ajax_error").show();
return; // stop executing this function any further
} else {
console.log('update successful - success add class to table row');
$this.closest('tr').addClass("success");
$this.closest('tr').removeClass("danger");
//$(this).closest('tr').attr('class','success');
}
}).fail(function(xhr) {
var httpStatus = (xhr.status);
var ajaxError = 'There was an error updating your selections - AJAX request error. HTTP Status: ' + httpStatus + '. Please contact Support';
console.log('ajaxError: ' + ajaxError);
$this.closest('tr').addClass("warning");
$('#alert_ajax_error').html(ajaxError);
$("#alert_ajax_error").show();
});
});
});
This is working when it comes to making the initial selection - the table row is coloured green to indicate it has been selected. I now need to extend this so that when the Select button is clicked a 2nd time it then removes the green table row highlighting and returns it to it's original state.
Now sure how to go about extending the script to achieve this.

Check below logic for that:
$('button.btn-success').click(function() {
if ($this.closest('tr').hasClass("first_click")) {
$this.closest('tr').removeClass();
//$( "tr" ).removeClass();
return false;
}else{
$this.closest('tr').addClass("first_click");
}

You chould achieve that by using a boolean to track the state of the button. Then check the state of the button before taking action.
Ps. You can chain your addClass() and removeClass() methods.
var buttonSelected = false;
if(buttonSelected){
$this.closest('tr').addClass("success").removeClass("danger");
buttonSelected = true;
} else {
$this.closest('tr').removeClass("success").addClass("danger");
buttonSelected = false;
}

Javascript value not beeing extracted from the #html.TextBoxFor in a view

I will like to request your help to debug my Jquery which seems not to pick-up my new count for the quantity.
I am in my application and I added a product,
I changed the quantity of the item from 1 to 3. I clicked the refresh button.
I was expecting the total will be changed (total X 3) instead of (total X 1)
I think the problem is coming from the cartCount variable. this variable doesn't seems
to get the new count of the #html.TextBoxFor field from the view.
I got an error with the javascript RefreshQuantity :
In Chrome Pf12, in the header tab
I can see
header tab
id:320
cartCount:0
The id 320 is the corresponding id in the Panier table.
Preview tab
{Message: Error occured or invalid input...,CartTotal:-1, ItemCount:-1, DeleteId:210}
CartCount: -1
CartTotal: -1
DeleteId: 320
ItemCount: -1
Message: "Error occurred or invalid input..."
Response Tab
{"Message":"Error occurred or invalid
input...","CartTotal":-1,"CartCount":-1,"ItemCount":-1,"DeleteId":320}
Index.cshtml
#model Tp1WebStore3.ViewModels.ShoppingCartViewModel
#{
ViewBag.Title = "Shopping Cart";
}
#using (Html.BeginForm())
{
<h3>
<em>Visualisation </em> du panier:
#if (TempData["err_message"] != null)
{
#TempData["err_message"]
}
</h3>
<script src="/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.RemoveLink').click(function () {
$.ajax({
url: '#Url.Action("RemoveFromCart","Panier")',
data: { id: $(this).data('id') },
type: 'POST',
cache: false,
success: function (result) {
$('#row-' + result.DeleteId).remove();
$('#row-' + result.DeleteId).fadeOut('slow');
$('#cart-status').text('Cart (' + result.CartCount + ')');
$('#update-message').text(result.Message);
$('#cart-total').text(result.CartTotal);
$.get('#Url.Action("CartSummary", "Panier")');
$('#content').html(result);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("Status: " + textStatus); alert("Error: " + errorThrown);
}
});
return false;
});
});
$(function () {
$(".RefreshQuantity").click(function () {
// Get the id from the link
var recordToUpdate = $(this).attr("data-id");
var countToUpdate = 0;
if ($("#" + $(this).attr("id")).val() !== '') {
countToUpdate = $("#" + $(this).attr("id")).val();
}
if (recordToUpdate != '') {
// Perform the ajax post
$.post("/Panier/UpdateCartCount", { "id": recordToUpdate, "cartCount":
countToUpdate },
function (data) {
// Successful requests get here
// Update the page elements
if (data.ItemCount == 0) {
$('#row-' + data. DeleteId).fadeOut('slow');
}
$('#update-message').text(htmlDecode(data.Message));
$('#cart-total').text(data.CartTotal);
$('#cart-status').text('Cart (' + data.CartCount + ')');
//Only process the callback data when no server error occurs
if (data.ItemCount != -1) {
$('#cart-total').text(data.CartTotal);
$('#cart-status').text('Cart (' + data.CartCount + ')');
}
}
);
}
});
});
$(function () {
if (typeof String.prototype.trim !== 'function') {
String.prototype.trim = function () {
return this.replace(/^\s+|\s+$/g, '');
}
}
});
function clearUpdateMessage() {
// Reset update-message area
$('#update-message').text('');
}
function htmlDecode(value) {
if (value) {
return $('<div />').html(value).text();
}
else {
return '';
}
}
</script>
<div>
#for (int i = 0; i < Model.CartItems.Count; i++)
{
<p>
#Html.ValidationMessageFor(model => model.CartItems[i].Quantite)
</p>
}
</div>
<div id="update-message">
</div>
<div id="content">
#if (Model.CartTotal != 0)
{
<p class="button">
#Html.ActionLink("Paiement >>", "AddressAndPayment", "Checkout")
</p>
<p class="NouvelAjout">
#Html.ActionLink("Ajouter un autre article >>", "Magasin", "Home")
</p>
}
<table>
<tr>
<th>
Produit
</th>
<th>
Prix (unitaire)
</th>
<th>
Quantite
</th>
<th></th>
</tr>
#{int ix = 0;}
#foreach (var item in Model.CartItems)
{
<tr id="row-#item.ProduitId">
<td>
#Html.ActionLink(item.Produit.Description, "Details", "Produit", new { id =
item.ProduitId }, null)
</td>
<td>
#item.Produit.Prix
</td>
<td>
#Html.TextBoxFor(model => model.CartItems[ix].Quantite,
new {style = "width:30px; text-align:right;",
onkeyup = "clearUpdateMessage();",
onchange = "clearUpdateMessage();"
})
</td>
<td>
<a href="#" class="RefreshQuantity" data-id="#item.PanierId"
id="CartItems_#(ix)__Count">Refresh quantity</a> | />a
</td>
<td>
<a href="#" class="RemoveLink" data-id="#item.PanierId"> Enlever du panier
>> </a>
</td>
</tr>
ix++;
}
<tr>
<td>
Total
</td>
<td></td>
<td></td>
<td id="cart-total">
#Model.CartTotal
</td>
</tr>
</table>
</div>
}
Do we have anyway to debug the javascript from Visual Studio? I saw a post which is stating it was a problem with Visual studio ref.: Visual Studio 2013 can't debug javascript in cshtml
ShoppingCart.cs
public int UpdateCartCount(int id, int cartCount)
{
// Get the cart
var cartItem = db.Paniers.Single(
cart => cart.CartId == ShoppingCartId
&& cart.PanierId == id);
int itemCount = 0;
if (cartItem != null)
{
if (cartCount > 0) <=== cartCount is always 0 it should contains the new value
added from the view.
{
cartItem.Quantite = cartCount;
itemCount = cartItem.Quantite;
}
else
{
db.Paniers.Remove(cartItem);
}
// Save changes
db.SaveChanges();
}
return itemCount;
}
I need to know how to extract the new value added by the user in the screen from the view field
#Html.TextBoxFor(model => model.CartItems[ix].Quantite,
new {style = "width:30px; text-align:right;",
onkeyup = "clearUpdateMessage();",
onchange = "clearUpdateMessage();"
})

Change to textbox:
#Html.TextBoxFor(model => model.CartItems[ix].Quantite,
new {style = "width:30px; text-align:right;",
onkeyup = "clearUpdateMessage();",
onchange = "clearUpdateMessage();",
#class="new-count"
})
Change to script:
$(".RefreshQuantity").click(function () {
// Get the id from the link
var recordToUpdate = $(this).attr("data-id");
var countToUpdate = $(this)
.closest('tr')
.find('.new-count').val();

The error was on the Index.cshtml with the var id="CartItems_#(ix)__Count"
old view
<td>
<a href="#" class="RefreshQuantity" data-id="#item.PanierId"
id="CartItems_#(ix)__Count">Refresh quantity</a> | />a
</td>
Modified
<td>
<a href="#" class="RefreshQuantity" data-id="#item.PanierId"
id="CartItems_#(ix)__Quantite">Refresh quantity</a> | />a
</td>

After a successful AJAX call cant update td data

Thanks For viewing this post.i am facing a jquery issue .After a successful AJAX call, I want to update an element on page. However, it is not being updated.
what am i doing i am opening a text box on click of span then add text and and on focus out event i am making Ajax call but cant update new text to same span when that i clicked before please help me
here is my js code
$(document).on('click', '.td-edit', (function (e0) {
var thisObj = $(this);
var olddata = thisObj.html();
var newDom = '<input type="text" value="' + olddata + '" class="new-value" style="border:#bbb 1px solid;padding-left:5px;width:75%;"/ >';
thisObj.parent('td').html(newDom);
}));
$(document).on('focusout', '.new-value', (function (e1) {
var thisObj = $(this);
var type = thisObj.parent('td').attr('class');
var newData = thisObj.val();
var santanceId = thisObj.parent('td').parent('tr').attr('id');
santanceId = parseInt(santanceId.replace('tr', ''));
thisObj.parent('td').html('\'<img src="uploads/loading.gif">\'');
if (type === 'sentnc') {
$.ajax({
type: "POST",
url: "operations.php",
data: {
santanceId: santanceId,
sentnc: newData
},
success: function () {
var newDom = '<span class="td-edit">' + newData + '</span>';
thisObj.parent('td').html(newDom);
}
});
}
}));
HTML:
<div class="chat-space nano nscroller">
<div id="table-row">
<table id="rep-data">
<tbody>
<tr>
<th align="left">Sentences</th>
<th align="left" colspan="3">Reps</th>
</tr>
<tr id="tr1" rowspan="2">
<td class="sentnc"><span class="td-edit">Rana is working</span></td>
<td colspan="3" class="senrep"><span class="td-edit">p1.ref = I, p1.name = julie</span><br>
<br>
<span style="color:#000;">Guess Rep1: </span><span id="1gr1">p1.ref = I, p1.has = name1, p1.name.made_from = rana</span><br>
<span style="color:#000;">Guess Rep2: </span><span id="2gr1">p1.ref = I, p1.name = rana</span><br>
<span><a style="color:#3399FF !important;" alt="1" rel="1 " class="updateGuess" id="upd1" href="javascript:void(0);">Update Guess Rep</a></span><br>
<br></td>
</tr>
</tbody>
</table>
</div>

Your success handler should be:
success: function (data) {
var newDom = '<span class="td-edit">' + data + '</span>';
thisObj.parent('td').html(newDom);
}
Here, the data is the data returned by your server, after the ajax Call