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>

How do I get an element with a specific ID from getElementsByClassName?

EDIT: SOLVED. Thanks everyone!
I'm new to programming :D My code is below. Here is the deal: I have multiple buttons, but I want to make it so that the same thing would happen anytime any one of these buttons is clicked, but each button also has a specific value, and I also want that specific value to be printed out. My code goes through the document and looks at all the elements with "editButton" class, and correctly identifies all the buttons, but the problem is that no matter which button I press, I always get the value of the last button, because var id only gets assigned after the for loop finishes and is on the last element. I tried creating a global variable and assigning the value to it, but the result is the same. I tried ending the for loop before moving on to .done (function (data), but I got an error. Can someone help me out? Thanks!
$(document).ready(function() {
var anchors = document.getElementsByClassName('editButton');
for (var i = 0; i < anchors.length; i++) {
var anchor = anchors[i];
anchor.onclick = function() {
$.ajax({
method: "GET",
url: "/testedit.php",
}).done(function(data) {
var id = anchor.value;
/* from result create a string of data and append to the div */
var result = data;
var string = '<p>ID is ' + id + '</p><br>';
$("#records").html(string);
});
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="records"></div>

Actually, instead of doing a huge for loop to add onclick events to your buttons, one of the best ways to do this is to listen to each button with editButton class on click() event then use $(this) which refers to the exact clicked button. After that, you can use each individual button to do whatever you want.
So your final code should be something like this:
$(document).ready(function() {
$('.editButton').click(function() {
console.log('innerHTML is:', $(this).html())
console.log('id is:', $(this).attr('id'))
$.ajax({
method: "GET",
url: "/testedit.php",
}).done(function(data) {
var id = $(this).value;
/* from result create a string of data and append to the div */
var result = data;
var string = '<p>ID is ' + id + '</p><br>';
$("#records").html(string);
});
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="records">
<button class="editButton" id="firstButton">button 1</button>
<button class="editButton" id="secondButton">button 2</button>
<button class="editButton" id="thirdButton">button 3</button>
<button class="editButton" id="fourthButton">button 4</button>
</div>

save the button with button = this when run the onclick function and use it
$(document).ready(function(){
var anchors = document.getElementsByClassName('editButton');
for(var i = 0; i < anchors.length; i++) {
var button;
var anchor = anchors[i];
anchor.onclick = function() {
button = this;
$.ajax({
method: "GET",
url: "/testedit.php",
}).done(function( data ) {
/* from result create a string of data and append to the div */
var result= data;
var string='<p>ID is '+ button.value +'</p><br>';
$("#records").html(string);
});
}
}
});
https://jsfiddle.net/x02srmg6/

You need to look in to JavaScript closures and how they work to solve this.
When you add event listeners inside a for loop you need to be careful in JS. When you click the button, for loop is already executed and you will have only the last i value on every button press. You can use IIFE pattern, let keyword to solve this.
One simple way to resolve this issue is listed below.
<div id="records"></div>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var anchors = document.getElementsByClassName('editButton');
for(var i = 0; i < anchors.length; i++) {
//Wrap the function with an IIFE and send i value to the event listener
(function(anchor){
anchor.onclick = function() {
$.ajax({
method: "GET",
url: "/testedit.php",
}).done(function( data ) {
var id = anchor.value;
/* from result create a string of data and append to the div */
var result= data;
var string='<p>ID is '+id+'</p><br>';
$("#records").html(string);
});
}
})(anchors[i]);
}
}
});
You can read more about this in JavaScript closure inside loops – simple practical example

In your code..
var id = anchor.value;
could be
var id = anchor.id;
but I recommend you to use event delegation
If you have a html like this
<div id="buttonArea">
<a class="editButton" id="1"/>
<a class="editButton" id="2"/>
<a class="editButton" id="3"/>
.......(so many buttons)
</div>
you can code like below.
$(document).ready(function(){
$('#buttonArea').on('click', 'a.editButton', function (event) {
var anchor = event.currentTarget;
$.ajax({
method: "GET",
url: "/testedit.php",
})
.done(function(data) {
var id = anchor.id;
/* from result create a string of data and append to the div */
var result= data;
var string='<p>ID is '+id+'</p><br>';
$("#records").html(string);
});
}

You can use getAttribute. Like:
var anchors = document.getElementsByClassName('editButton');
// Id of anchors
id_of_anchor = anchors.getAttribute("id");
Refs
EDIT
anchor.onclick = function() {
id_of_anchor = $(this).attr("id");
});

You have jQuery in your application, there is easier and more readable way to do it with jQuery;
$(document).ready(function() {
$(".editButton").each(function(a, b) {
$('#' + $(b).attr('id')).on('click', function() {
$.ajax({
method: "GET",
url: "/testedit.php",
}).done(function(data) {
var id = $(b).attr('id');
/* from result create a string of data and append to the div */
var result = data;
var string = '<p>ID is ' + id + '</p><br>';
$("#records").html(string);
});
});
});
});
Example: https://jsfiddle.net/wao5kbLn/

MVC Core, How to retrieve the index of one of the List object

I am sorry for being unclear. Here's my code which I hope explain more
Controller:
[HttpPost]
public IActionResult Test(int classid)
{
return View();
}
View:
<form asp-action="Test">
#for (int i = 0; i < Model.Count(); i++)
{
var buttonid = "btnSubmit" + i;
#Html.TextBoxFor(model => Model[i].Name)
#Html.TextBoxFor(model => Model[i].ClassName)
<input name="submit" id="#buttonid" type="button" data-classid="#Model[i].ClassID" value="Go to class Form" class="btn btn-default MyButtonClass" style="font-size: 14px" />
}
<script>
$(document).on("click", ".MyButtonClass", function () {
var id = $(this).data("classid");
alert(id);
$.ajax({
type: "POST",
url: "/StudentController/Test",
data: { classid: id }
});
});
</script>
</form>
So what I wanted to do is when the user click the submit, it will redirect to another form which contain the className information (I know how to redirect to another page), however, the problem is that in another controller, I could only retrieve List and not the selected index className. Is there any method to retrieve the index when the user click submit?
Thanks

I've put an answer below which should hopefuly help you on your way.
First of all, build you your list of students in your controller.
public class TestController : Controller
{
public ActionResult Test()
{
var list = new List<Student>()
{
new Student()
{
Name = "Student1",
ClassID = 1,
ClassName = "ClassA"
},
new Student()
{
Name = "Student2",
ClassID = 2,
ClassName = "ClassB"
},
new Student()
{
Name = "Student3",
ClassID =3,
ClassName = "ClassC"
}
};
//You can call a service and populate your own data.
return View("Test", list);
}
}
Specify the views model
#model List<TestMVC.Student>
Then loop through each student, generating a unique id for each button and putting the classid (what ever key id you need) into the data-classid attribute.
#for (int i = 0; i < Model.Count(); i++)
{
var buttonid = "btnSubmit" + i;
#Html.TextBoxFor(model => Model[i].Name)
#Html.TextBoxFor(model => Model[i].ClassName)
<input name="submit" id="#buttonid" type="button" data-classid="#Model[i].ClassID" value="Go to class Form" class="btn btn-default MyButtonClass" style="font-size: 14px" />
<br/>
}
We also specify a new css class called "MyButton". This will serve the jquery selector.
<style>
.MyButtonClass {
color:red;
}
</style>
Then use Jquery to capture the button clicked, take off the id and post id as a parameter to which ever controller and action you want.
<script>
$(document).on("click", ".MyButtonClass", function () {
var id = $(this).data("classid");
alert(id);
$.ajax({
type: "POST",
url: "/YourController/YourAction",
data: {classid:id}
});
});
</script>
The line for "data". The "classid" must be the same name as the parameter on your controller. So the posted actions signature would be
[HttpPost]
public void YourAction (int classid)
{
}
Hope that helps.

Try this:
<div id="classList">
#for (int i = 0; i < Model.Count(); i++)
{
var buttonid = "btnSubmit" + i;
#Html.TextBoxFor(model => Model[i].Name)
#Html.TextBoxFor(model => Model[i].ClassName)
<button id="#buttonid" data-classid="#Model[i].ClassID" class="btn btn-default MyButtonClass">Go to class Form</butotn>
}
</div>
<script>
$(document).ready(function()
{
$(".MyButtonClass").on("click", function ()
{
var id = $(this).data("classid");
console.log(id);
$.ajax({
type: "POST",
url: "/StudentController/Test",
data: { classid: id },
success: function(data)
{
// put redirect in here
window.location = .....;
},
error: function()
{
// error handling
}
});
});
});//------- this was missing!!!!
</script>
In your controller:
[HttpPost]
public IActionResult Test(int classid)
{
// put debugger here so we know if we landed
return new { success=true};
}
You are using an ajax post so you probably just want data returned, not an entire view. Or do you? What exactly is supposed to happen when you get here?

populate div with ajax in asp.net mvc

I want to populate div with some data. This data is called with help of AJAX, JSON and controller function in asp.net mvc4.
My main goal is to append div with some data.
Here is markup
#using (Ajax.BeginForm(actionName: "GetEncryptedQuery", controllerName: "Home", ajaxOptions: new AjaxOptions {HttpMethod = "Post", OnBegin = "searchBegin", OnSuccess = "searchSuccess", OnFailure = "actionFailed"}, htmlAttributes: new Dictionary<string, object>(){{"id","frmSearch"},{"class","form-schedules"}}, routeValues: null))
{
#Html.ValidationSummary(true)
<div class="form-group">
<div class="form-control-wrapper">
#*<input type="text" class="form-control" id="search-origin" placeholder="Origin">*#
#Html.TextBoxFor(model=>model.Origin,new {#class="form-control",id="search-origin", placeholder="Origin"})
#Html.HiddenFor(model=>model.OriginId,new {#class="form-control",id="search-origin-id"})
</div>
</div>
<div class="form-group">
<div class="form-control-wrapper">
#*<input type="text" class="form-control" id="search-destination" placeholder="Destination">*#
#Html.TextBoxFor(model=>model.Destination,new {#class="form-control",id="search-destination", placeholder="Destination"})
#Html.HiddenFor(model=>model.DestinationId,new {#class="form-control",id="search-Destination-id"})
</div>
</div>
<button type="submit" class="btn btn-red pull-right">GO</button>
}
<!-- partial search origin ajax -->
<div class="search-origin-ajax list-below-origin" id="search-below-origin">
</div>
Here is AJAX Call
$(document).ready(
$("#search-below-origin").change(function(evt) {
if ($("#search-below-origin").val() != "-1") {
$.ajax({
type: 'GET',
dataType: 'json',
cache: false,
url: '/Home/PopulateLocation',
success: function(data) {
$.each(data, function(index, element) {
$.html('<a href="#" class="modal-select-origin"><span class="ajax-star"></span><span class="ajax-content">' + element.valueOf("Name") +
'</span><span class="ajax-icon-area"><span class="icon-area"></span></span></a>').appendTo("#search-below-origin");
});
}
});
}
}));
and here is a function in "home" controller
[HttpGet]
private ActionResult PopulateLocation()
{
var statesResults = from l in _db.Locations.AsParallel()
select new PseudoLocation()
{
Id = l.Id,
Name = l.Name
};
var statesList = Json(statesResults,JsonRequestBehavior.AllowGet);
return statesList;
}

A few problems:
You probably meant to make the method public:
[HttpGet]
public ActionResult PopulateLocation()
{
// ...
}
#search-below-origin is a div and does not appear to contain any elements that could trigger the change event. Did you mean #search-origin?
.html is an instance method on jQuery. You can create an in-memory html snippet just calling jQuery (using $), so you should not need to use .html here:
$('<a href="#" class="modal-select-origin"><span class="ajax-star"></span><span class="ajax-content">' + element.valueOf("Name") +
'</span><span class="ajax-icon-area"><span class="icon-area"></span></span></a>')
.appendTo("#search-below-origin");

Asp mvc jquery - in place edit

I have list of divs with some data in there:
<div style="border: 1px solid #dddddd;">
<div id="wrap">
<h3 id="cText">#Model.CommentText</h3>
<a id="runEdit" href="#" >Edit</a>
</div>
</div>
When user click on runEdit link I make edit from this:
e.preventDefault();
var txt = $('#cText').text();
$('#cText').remove();
$('#wrap').prepend('<textarea>' + txt + '</textarea>');
$('#wrap').append('<input type="submit" value="Ok" />');
$('#wrap').append('<input type="submit" value="Cancel" />');
The problem is I added here this two buttons in javascript. But I don't know how to attach some controller action to this buttons?
The problem here is that if I write 5 comments. And click on edit I get 5 edit forms.
$('#editButton').live('click', function (e) {
e.preventDefault();
var container = $(this).closest('.commentWrap');
var itemId = container.attr('id');
var nestId = '#' + itemId;
var txt = $('#commentTextValue').text();
$(nestId + ' #commentTextValue').remove();
$(nestId + ' #editButton').remove();
$(nestId).prepend('<textarea id="editArea">' + txt + '</textarea>');
$(nestId).append('<input type="submit" value="Ok" class="btnOk" />');
})
$('.btnOk').live('click', function (e) {
e.preventDefault();
var container = $(this).closest('.commentWrap');
var itemId = container.attr('id');
var text = container.find('textarea').val();
var nestId = '#' + itemId;
//alert(nestId);
$.ajax({
url: '/Comment/SaveComment',
data: JSON.stringify({ CommentText: text, CommentId: itemId }),
type: 'post',
contentType: 'application/json',
success: function (data) {
if (data.success === true) {
//alert(data.message); // do show/hide stuff here instead of the alert
$(nestId + ' #editArea').remove();
$(nestId + ' .btnOk').remove();
$(nestId).append('<h3 id="commentTextValue">' + data.message + '</h3>');
$(nestId).append('<a id="editButton" href="#">Edit</a>');
}
}
});
});
</script>
<div style="border: 1px solid #dddddd;">
#Html.ActionLink(#Model.Author, "SomeAction")
<div class="commentWrap" id="#Model.CommentId">
<p id="commentTextValue">#Model.CommentText</p>
<a id="editButton" href="#">Edit</a>
</div>
</div>

First add an itemid to the div like this, and convert the id=wrap to a class, as there are more than one of them.
<div class="wrap" id="123"></div>
That way you get a way to reference the id of the item that you are editing.
You should also add a class to the submit button that you inject on the page, fx:
<input type="submit" class="btnOk" value="Ok"/>
Then you can hook up the javascript:
$('.btnOk').live('click',function(e){
e.preventDefault();
var container = $(this).closest('.wrap');
var itemId = container.attr('id');
var text = container.find('textarea')[0].val();
$.ajax({
url: '/mycontroller/savecomment',
data: JSON.stringify({comment: text, id:itemId}), // using JSON2, see below
type: 'post',
contentType: 'application/json',
success: function(data){
if(data.success===true){
alert(data.message); // do show/hide stuff here instead of the alert
}
}
});
});
NOTE: Download the json2 library and add it to you script references - it's a good way to do your json serialization. (https://github.com/douglascrockford/JSON-js)
In your controller you must add an action method to handle the request:
public ActionResult SaveComment(string text, int id)
{
//save your comment for the thing with that id
var result = new {success = true, message = "saved ok"};
return Json(result, JsonRequestBehavior.AllowGet);
}

The answer of Marc is collrect. Surround your code with this. However I strongly recommend you to make as much "html in html" rather than in JavaScript.
The above code could be translated to a better shape, like this,
<div style="border: 1px solid #dddddd;">
<div id="wrap">
<h3 id="cText">#Model.CommentText</h3>
<a id="runEdit" href="#" >Edit</a>
</div>
<div id="editPanel" style="display:none;">
<form action="#Url("Edit", "Whatevercontroller")">
<textarea name="CommentText">#CommentText</textarea>
<input type="submit" value="Ok" />
Cancel
</form>
</div>
</div>
and js would be
function StartEdit() {
$("#wrap").css("display", "none");
$("#editPanel").css("display", "block");
}
function CancelEdit() {
$("#wrap").css("display", "block");
$("#editPanel").css("display", "none");
}
the advantage of this approach that you do not generate too much DOM elements in this case. Otherwise chances tha your JavaScript will become absolutely unmanageable.

You have to put a form tag around your textarea and to set the action of the form by the #Url.Action helper to the needed action.

You need to make Ajax calls to your controller action. Please refer to below link :
http://tugberkugurlu.com/archive/working-with-jquery-ajax-api-on-asp-net-mvc-3-0-power-of-json-jquery-and-asp-net-mvc-partial-views
You will find a sample there.
Basically, what you need to do is as follows:
var d = "poo=1&bar=2";
$.ajax({
type: "POST",
url: "/home/myaction",
data: d,
success: function (r) {
alert(r.data);
},
complete: function () {
alert("I am done!");
},
error: function (req, status, error) {
//do what you need to do here if an error occurs
alert("error");
}
});