This is follow up question on this (Bootstrap Modal Confirmation using ASP.Net MVC and a table)
Using MVC .NetCore, I populate a "partial" view and a Table (called _Match_StatsViewAll.cshtml under a directory of the same name of my controller Match_Stats).
It's being called from an Indexview:
public async Task<ViewResult> Match_StatsIndex(string message, string comp_id, string match_id, string team_id)//ACTION METHOD/View Results
Within that table (code below) , a list of records. Each row have a button to edit or delete. To delete a record, I need to have 4 IDs since the PK is made of those 4 keys. I was able to make it work with a javascript, however, I did not like the "confirm" display being produced. Thanks to this post, I was able to add a modal for each rows in the table and delete the record. However now, If I use the original json call to refresh the partial model (that only refresh the table), I have this screen:
Here is a Row being populated from my Model:
<td>
<div>
#{i++; }
<a onclick="showInPopup('#Url.Action("Match_StatsCreateOrEdit","Match_Stats",new {comp_id=item.Match_Stats.Comp_Id, team_id=item.Match_Stats.Team_Id,match_id=item.Match_Stats.Match_Id, match_Stat_Id=item.Match_Stats.Match_Stat_Id},Context.Request.Scheme)','Update A Stat')" class="btn btn-primary btn-xs"><i class="fas fa-pencil-alt"></i> Edit</a>
<form asp-action="Match_StatsDelete" asp-route-comp_Id="#item.Match_Stats.Comp_Id" asp-route-team_Id="#item.Match_Stats.Team_Id" asp-route-Match_Id="#item.Match_Stats.Match_Id"
asp-route-Match_Stat_Id="#item.Match_Stats.Match_Stat_Id" onsubmit="return jQueryAjaxDelete(this)" class="d-inline">
<button type="submit" class="btn btn-warning btn-xs"><i class="fas fa-trash"></i> Delete</button>
</form>
#*//add the button to launch the modal*#
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-removeplayers_#i"><i class="fas fa-trash"></i> Delete modal</button>
<div class="modal fade" id="modal-removeplayers_#i">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirmation needed</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Do you really want to delete this record ?</p>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<form asp-action="Match_StatsDelete" asp-route-comp_Id="#item.Match_Stats.Comp_Id" asp-route-team_Id="#item.Match_Stats.Team_Id" asp-route-Match_Id="#item.Match_Stats.Match_Id"
asp-route-Match_Stat_Id="#item.Match_Stats.Match_Stat_Id" onsubmit="return jQueryAjaxDeleteDirect(this)" class="d-inline">
<button type="submit" class="btn btn-warning btn-xs"><i class="fas fa-trash"></i> Delete Json</button>
</form>
</div>
</div>
</div>
</div>
</div>
</td>
In my controller - calling the delete :
public async Task<IActionResult> Match_StatsDelete(string comp_id, string team_id, string match_id, string match_stat_id)
{
// Wrap the code in a try/catch block
try
{
var deleteok = _match_statsRepository.Delete(entity);
if (deleteok != null)
{
//Code Here to populate my table only since this is a partial view inside a page
return Json(new { isValid = true, html = JavaScriptConvert.RenderRazorViewToString(this, "_Match_StatsViewAll", myPartialmodelpopulated) });
}
else
{
ModelState.AddModelError("", "Could not Delete Match");
return RedirectToAction("MatchIndex", new { message = "Success", comp_id });
}
}
catch (Exception ex)
{
// Log the exception to a file.We discussed logging to a file
//......More code here for the log has been removed //
return View("Error");
}
}
Here is the Javascript:
jQueryAjaxDeleteDirect = form => {
try {
$.ajax({
type: 'POST',
url: form.action,
data: new FormData(form),
contentType: false,
processData: false,
success: function (res) {
$('#view-all').html(res.html);
$.notify('Deleted Successfully !', {
globalPostion: 'Top Center',
className: 'success'
});
},
error: function (err) {
console.log(err)
}
})
} catch (ex) {
console.log(ex)
}
//prevent default form submit event
return false;
}
The " return Json" call works fine if I use the original code (so no MODAL form - just the javascript "confirm") .
Thank you for the help!
Related
Using MVC .NetCore, I populate a "partial" view and a Table. Within that table, a list of records.
Each row have a button to edit or delete. To delete a record, I need to have 4 IDs since the PK is made of those 4 keys.
I was able to make it work with a javascript, however, I do not like the "confirm" display being produce. I would like to have a more elegant way and use a modal form for this. But how do I retrieve the 4 values when clicking a button in of the row?
Here is a Row being populated from my Model:
<td>
<div>
<a onclick="showInPopup('#Url.Action("Match_StatsCreateOrEdit","Match_Stats",new {comp_id=item.Match_Stats.Comp_Id, team_id=item.Match_Stats.Team_Id,match_id=item.Match_Stats.Match_Id, match_Stat_Id=item.Match_Stats.Match_Stat_Id},Context.Request.Scheme)','Update A Stat')" class="btn btn-primary btn-xs"><i class="fas fa-pencil-alt"></i> Edit</a>
<form asp-action="Match_StatsDelete" asp-route-comp_Id="#item.Match_Stats.Comp_Id" asp-route-team_Id="#item.Match_Stats.Team_Id" asp-route-Match_Id="#item.Match_Stats.Match_Id"
asp-route-Match_Stat_Id="#item.Match_Stats.Match_Stat_Id" onsubmit="return jQueryAjaxDelete(this)" class="d-inline">
<button type="submit" class="btn btn-warning btn-xs"><i class="fas fa-trash"></i> Delete</button>
</form>
</div>
</td>
Here is the Javascript currently used:
jQueryAjaxDelete = form => {
if (confirm('Are you sure want to delete this record ?')) {
try {
$.ajax({
type: 'POST',
url: form.action,
data: new FormData(form),
contentType: false,
processData: false,
success: function (res) {
$('#view-all').html(res.html);
$.notify('Deleted Successfully !', {
globalPostion: 'Top Center',
className: 'success'
});
},
error: function (err) {
console.log(err)
}
})
} catch (ex) {
console.log(ex)
}
}
//prevent default form submit event
return false;
}
Here is the Model I would like to use. How do I get the 4 ID into this?
<!-- /.modal -->
<div class="modal fade" id="modal-removeplayers">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirmation needed</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Do you really want to delete this record ?</p>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<!-- CODE HERE TO RETRIEVE All 4 IDs and Call the "delete" on the Controller -->>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
One way is that put the modal inside the loop:
Model:
public class Test
{
public Match_Stats Match_Stats { get; set; }
//other properties....
}
public class Match_Stats
{
public int Comp_Id { get; set; }
public int Team_Id { get; set; }
public int Match_Id { get; set; }
public int Match_Stat_Id { get; set; }
//other properties.....
}
View(Index.cshtml):
#model IEnumerable<Test>
#{
int i = 0;
}
#foreach (var item in Model)
{
//other code.....
<a onclick="showInPopup('#Url.Action("Match_StatsCreateOrEdit","Match_Stats",new {comp_id=item.Match_Stats.Comp_Id, team_id=item.Match_Stats.Team_Id,match_id=item.Match_Stats.Match_Id, match_Stat_Id=item.Match_Stats.Match_Stat_Id},Context.Request.Scheme)','Update A Stat')" class="btn btn-primary btn-xs"><i class="fas fa-pencil-alt"></i> Edit</a>
//add the button to launch the modal
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-removeplayers_#i"><i class="fas fa-trash"></i> Delete</button>
<div class="modal fade" id="modal-removeplayers_#i">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirmation needed</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Do you really want to delete this record ?</p>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
//move the form to here.....
<form asp-action="Match_StatsDelete" asp-route-comp_Id="#item.Match_Stats.Comp_Id" asp-route-team_Id="#item.Match_Stats.Team_Id" asp-route-Match_Id="#item.Match_Stats.Match_Id"
asp-route-Match_Stat_Id="#item.Match_Stats.Match_Stat_Id" class="d-inline">
<button type="submit" class="btn btn-warning btn-xs"><i class="fas fa-trash"></i> Delete</button>
</form>
</div>
</div>
</div>
</div>
i++; //add this...
}
Controller:
public IActionResult Index()
{
//hard-coded the data just for easy testing!!!
var model = new List<Test>()
{
new Test(){Match_Stats=new Match_Stats(){Comp_Id=1,Match_Id=11,Match_Stat_Id=12,Team_Id=13}},
new Test(){Match_Stats=new Match_Stats(){Comp_Id=2,Match_Id=21,Match_Stat_Id=22,Team_Id=23}},
new Test(){Match_Stats=new Match_Stats(){Comp_Id=3,Match_Id=31,Match_Stat_Id=32,Team_Id=33}}
};
return View(model);
}
[HttpPost]
public IActionResult Match_StatsDelete(int Comp_Id,int Match_Id, int Match_Stat_Id,int Team_Id)
{
//do your stuff.......
}
The second way, you can use partial view to reuse the modal and use ajax to invoke the partial view.
Model:
public class Test
{
public Match_Stats Match_Stats { get; set; }
//other properties....
}
public class Match_Stats
{
public int Comp_Id { get; set; }
public int Team_Id { get; set; }
public int Match_Id { get; set; }
public int Match_Stat_Id { get; set; }
//other properties.....
}
View(Index.cshtml):
#model IEnumerable<Test>
#foreach (var item in Model)
{
<a onclick="showInPopup('#Url.Action("Match_StatsCreateOrEdit","Match_Stats",new {comp_id=item.Match_Stats.Comp_Id, team_id=item.Match_Stats.Team_Id,match_id=item.Match_Stats.Match_Id, match_Stat_Id=item.Match_Stats.Match_Stat_Id},Context.Request.Scheme)','Update A Stat')" class="btn btn-primary btn-xs"><i class="fas fa-pencil-alt"></i> Edit</a>
<button type="button" class="btn btn-primary" onclick="toggleModal('#item.Match_Stats.Comp_Id','#item.Match_Stats.Team_Id','#item.Match_Stats.Match_Id','#item.Match_Stats.Match_Stat_Id')"><i class="fas fa-trash"></i> Delete</button>
}
<div id="loadModal">
<!--load the modal-->
</div>
#section Scripts
{
<script>
function toggleModal(comp_id,team_id,match_id,match_Stat_Id) {
var model = {
comp_id : comp_id,
team_id:team_id,
match_id:match_id,
match_Stat_Id:match_Stat_Id
};
$.ajax({
type: "Post",
url: "/Home/LoadPartial",
data:model,
success: function (data) {
$("#loadModal").html(data);
$('#modal-removeplayers').modal('show')
}
})
}
</script>
}
Partial View in /Views/Shared folder(Partial.cshtml):
#model Match_Stats
<div class="modal fade" id="modal-removeplayers">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirmation needed</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Do you really want to delete this record ?</p>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<form asp-action="Match_StatsDelete" asp-route-comp_Id="#Model.Comp_Id" asp-route-team_Id="#Model.Team_Id" asp-route-Match_Id="#Model.Match_Id"
asp-route-Match_Stat_Id="#Model.Match_Stat_Id" class="d-inline">
<button type="submit" class="btn btn-warning btn-xs"><i class="fas fa-trash"></i> Delete</button>
</form>
</div>
</div>
</div>
</div>
Controller:
public IActionResult Index()
{
//hard-coded the data just for easy testing!!!
var model = new List<Test>()
{
new Test(){Match_Stats=new Match_Stats(){Comp_Id=1,Match_Id=11,Match_Stat_Id=12,Team_Id=13}},
new Test(){Match_Stats=new Match_Stats(){Comp_Id=2,Match_Id=21,Match_Stat_Id=22,Team_Id=23}},
new Test(){Match_Stats=new Match_Stats(){Comp_Id=3,Match_Id=31,Match_Stat_Id=32,Team_Id=33}}
};
return View(model);
}
[HttpPost]
public IActionResult Match_StatsDelete(int Comp_Id,int Match_Id, int Match_Stat_Id,int Team_Id)
{
//do your stuff.......
}
[HttpPost]
public IActionResult LoadPartial(Match_Stats model)
{
//hard-coded the data just for easy testing!!!
var list = new List<Match_Stats>()
{
new Match_Stats(){Comp_Id=1,Match_Id=11,Match_Stat_Id=12,Team_Id=13},
new Match_Stats(){Comp_Id=2,Match_Id=21,Match_Stat_Id=22,Team_Id=23},
new Match_Stats(){Comp_Id=3,Match_Id=31,Match_Stat_Id=32,Team_Id=33}
};
var data = list.Where(a => a.Comp_Id == model.Comp_Id & a.Match_Id == model.Match_Id & a.Team_Id == model.Team_Id & a.Match_Stat_Id == model.Match_Stat_Id).FirstOrDefault();
return PartialView("Partial", data);
}
Result:
I am trying to create a "Confirmation Modal" on deleting a row in a table. When the user wants to delete a row a Modal is shown (on click of a button) in which the user must type the username as a confirmation to delete it and click the delete button. This table have multiple rows (one for each user) and every row has its own "delete button" created with this loop:
while ($row = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC)) {
?>
<tr>
<th scope="row"><?=$row["ID"]?></th>
<td><?=$row["username"]?></td>
<td><?=$row["mail"]?></td>
<td><button class="btn btn-sm btn-primary"><i class="fas fa-pencil-alt"></i></button></td>
<td><button class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#delete-user-modal" data-bs-user-id="<?=$row["ID"]?>" data-bs-username="<?=$row["username"]?>"><i class="fas fa-trash"></i></button></td>
</tr>
<?php
}
This is how i set my modal:
<!--DELETE USER MODAL-->
<div class="modal modal-dialog modal-dialog-centered fade" id="delete-user-modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p></p>
<input type="text" name="username" class="form-control" id="username-input">
<input hidden type="text" name="user_id">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" id="modal-delete-button" class="btn btn-danger disabled" >Elimina</button>
</div>
</div>
</div>
</div>
Via data-bs I pass the ID and username for each button and I put these data in the Modal with:
$("#delete-user-modal").on('show.bs.modal', function (event) {
// Button that triggered the modal
var button = event.relatedTarget
// Extract info from data-bs-* attributes
var userId = button.getAttribute('data-bs-user-id')
var username = button.getAttribute('data-bs-username')
// Update the modal's content.
var modalTitle = $(this).find('.modal-title')
var modalP = $(this).find('.modal-body > p')
var modalInput = $(this).find('.modal-body > input')
var modalDeleteBtn = $(this).find('#modal-delete-button')
modalTitle.append('Vuoi eliminare <span class="bold">' + username + '</span>?')
modalP.append('Scrivi <span class="bold">' + username + '</span> per confermare')
$("#delete-user-modal").on('keyup', event => {
console.log(modalInput.val())
if(modalInput.val() === username){
console.log("check")
//modalDeleteBtn.classList.remove('disable')
}
})
})
The problem is that when I close a modal and open a new one (ie: clicking button of another row) also the one that is hide react to the on('keyup') event.
I need a way to open a fresh Modal every time i click a new button or reset the modal that I close and have the new one completely fresh.
This for me resolved with:
$("#delete-user-modal").on('hidden.bs.modal', function (event) {
$(this).unbind('keyup')
});
My main idea is to show data from database and beside each row, there is an accept and reject button .onClick, the value of the button gets passed to controller and saved to database.so far so good, the issue is when I tried to add a popup modal that has input text to add a note . it should appear only when I click the reject button only. I opened the developer tools and found it passes the double of the whole number of the data rows and i don't know how to pass the id of the row I'm in, the value of the rejected button and finally the message that is going to be written to the controller. I tried to pass the modal in the reject button method in the controller but it passes as null. what am I doing wrong? is my script part is organized or even accurate after I added the ajax or not?
I appreciate any help.
my view:
#model AllmyTries.Models.fulfillmentVM
<!-- page content -->
#using (Html.BeginForm("Add_Fulfillment_Reject", "Feedback", FormMethod.Post))
{
#Html.AntiForgeryToken()
<td>
<button id="btnReject" class="btn btn-lg btn-danger" name="button" data-toggle="modal" data-target="#exampleModal" type="submit" onclick="reject(0)" value="0">Reject</button>
#Html.Hidden("Request_ID", Model._Requests[i].Request_ID)
#Html.Hidden("Status", Model._Requests[i].Status, new { id = "myEdit", value = "" })
</td>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="myform">
<div class="form-group">
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="reset" value="submit" class="btn btn-success" id="finalSave" />
</div>
</div>
</div>
</div>
}
<!-- /page content -->
#section Scripts {
<script>
$('[name = "button"]').click(function () {
$('[name = "Status"]').val($('[name = "button"]').val());
})
$(document).ready(function () {
$('#finalSave').click(function () {
var dataform = $('#myform').serialize();
$.ajax({
type: 'POST',
url: '/Feedback/Add_Fulfillment_Reject',
data: dataform,
success: function () {
$('#exampleModal').modal('hide');
}
})
})
})
</script>
}
the controller:
#region fulfillment
[HttpPost]
public ActionResult Add_Fulfillment_Accept(int Request_ID, int? Status)
{
var user = db.TBL_Request.Find(Request_ID);
user.Inserted_by = Status ?? 0;
db.SaveChanges();
return RedirectToAction("Index");
}
//this is the one with the issue
[HttpPost]
public ActionResult Add_Fulfillment_Reject(fulfillmentVM vM)
{
//save the status
//save the note
db.SaveChanges();
return RedirectToAction("Index");
}
#endregion
}
Your Javascript submits only the textarea that is in the <form id="myForm"> to a controller action that is expecting a fulfillmentVM object. Change your Html.Hidden fields to Html.HiddenFor. This will bind those values on post.
Use a TextAreaFor instead of a textarea for model binding, and make sure your viewmodel has an appropriate property for it.
#Html.HiddenFor(m => m._Requests[i].Request_ID)
#Html.HiddenFor(m => m._Requests[i].Status, new { id = "myEdit", value = "" })
#Html.TextAreaFor(m => m.RejectMessage, htmlAttributes: new { #class = "form-control" })
Remove the <form id="myForm"> tags, they're unnecessary.
Keep the button as a submit button, and it will post to the Add_Fulfillment_Reject controller, passing all the bound values for your fulfillmentVM.
Where to put the form
Personally, I would put it starting right before the text box, move the hidden fields down there, too. End it right after the submit button.
#using (Html.BeginForm("Add_Fulfillment_Reject", "Feedback", FormMethod.Post))
{
#Html.HiddenFor(m => m._Requests[i].Request_ID)
#Html.HiddenFor(m => m._Requests[i].Status, new { id = "myEdit", value = "" })
#Html.TextAreaFor(m => m.RejectMessage, htmlAttributes: new { #class = "form-control" })
// rest of modal code
<input type="submit" class="btn btn-success" id="finalSave" />
} // end form
In my strongly typed view I am looping over a list of objects coming from a database. Each of these objects is presented in a jumbotron, which has a button "Had role before". On click the modal opens and there I want to input some data in input boxes and save it to my database via an ajax call. One part of data that I want to input is the unique id which each object in the loop has. With the code I have so far I managed on click to get the id of the first object, but when I am clicking the buttons for the rest of the objects nothing happens.
This is the script in my view :
<script type="text/javascript">
$(document).ready(function () {
$(function () {
var idW;
$('#mdl').on('click', function () {
var parent = $(this).closest('.jumbotron');
var name = parent.find('input[name="mdlname"]').val();
var id = parent.find('input[name="mdlwrid"]').val();
var idW = id;
console.log(idW);
var titleLocation = $('#myModal').find('.modal-title');
titleLocation.text(name);
$('#myModal').modal('show');
});
});
$('#mdlSave').on('click', function () {
console.log('x');
addPastRoleAjax();
});
function addPastRoleAjax() {
$.ajax({
type: "POST",
url: '#Url.Action("addPastRole", "WorkRoles")',
dataType: "json",
data: {
wrId: idW,
dateStart: $("#wrdateStart").val(),
dateEnd: $("#wrknamedateEnd").val()
},
success: successFunc
});
function successFunc(data, status) {
if (data == false) {
$(".alert").show();
$('.btn').addClass('disabled');
//$(".btn").prop('disabled', true);
}
}
</script>
the loop :
#foreach (var item in Model)
{
<div class="jumbotron">
<input type="hidden" name="mdlwrid" value="#item.WorkRoleId" />
<input type="hidden" name="mdlname" value="#item.RoleName" />
<h1>#Html.DisplayFor(modelItem => item.RoleName)</h1>
<p class="lead">#Html.DisplayFor(modelItem => item.RoleDescription)</p>
<p> #Html.ActionLink("Focus on this one!", "addWorkRoleUser", new { id = item.WorkRoleId }, new { #class = "btn btn-primary btn-lg" })</p>
<p> <button type="button" id ="mdl" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Had role in the past</button> </p>
</div>
}
The modal :
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
<input id="wrdateStart" class='date-picker' />
<input id="wrknamedateEnd" class='date-picker' />
</div>
<div class="modal-footer">
<button type="button" id="mdlSave" class="btn btn-default" data-dismiss="modal">Save</button>
</div>
</div>
</div>
Your problem is in the following piece of code:
#foreach (var item in Model)
{
<div class="jumbotron">
<input type="hidden" name="mdlwrid" value="#item.WorkRoleId" />
<input type="hidden" name="mdlname" value="#item.RoleName" />
<h1>#Html.DisplayFor(modelItem => item.RoleName)</h1>
<p class="lead">#Html.DisplayFor(modelItem => item.RoleDescription)</p>
<p> #Html.ActionLink("Focus on this one!", "addWorkRoleUser", new { id = item.WorkRoleId }, new { #class = "btn btn-primary btn-lg" })</p>
<p> <button type="button" id ="mdl" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Had role in the past</button> </p>
</div>
}
You have used a foreach loop and inside it you create button elements with same id.
<button type="button" id ="mdl" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Had role in the past</button>
So,foreach let you to create many buttons with same id. That's wrong and that's why you get that behavior(only first button work).The solution: Use classes instead.
I'm banging my head against the wall here. I'm using ng-repeat to populate a table. Inside each row i have 2 buttons, one for updating the row content and for uploading files. The upload button opens a bootstrap modal window, where the user selects the files and clicks on submit.
The submit button uses ng-click to run a function which uses $index as parameter. But the $index value is always the same no matter which row is selected.
The thing I don't understand is that I use the exact same syntax (although outside of a modal window) on my update button, which works just fine.
HTML:
<tr ng-repeat="item in items | filter:search " ng-class="{'selected':$index == selectedRow}" ng-click="setClickedRow($index)">
<td>{{$index}}</td>
<td ng-hide="idHidden" ng-bind="item.Id"></td>
<td ng-hide="titleHidden">
<span data-ng-hide="editMode">{{item.Title}}</span>
<input type="text" data-ng-show="editMode" data-ng-model="item.Title" data-ng-required />
<td>
<button type="button" class="btn btn-primary uploadBtn" data-ng-show="editMode" data-toggle="modal" data-target="#uploadModal">Upload file <i class="fa fa-cloud-upload"></i></button>
<!-- Upload Modal -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="uploadModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="uploadModalLabel">Options</h3>
</div>
<div class="modal-body">
<h4>Upload Documents</h4>
<form>
<div class="form-group">
<select data-ng-model="type" class="form-control" id="fileTypeSelect">
<option value="Policy">Policy</option>
<option value="SOP">SOP</option>
</select>
<br>
<div class="input-group"> <span class="input-group-btn">
<input type="file" id="file">
</span>
</div>
<br>
<button type="button" class="btn btn-default" data-ng-click="uploadAttachment($index, type)">Upload</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<button type="button" data-ng-hide="editMode" data-ng-click="editMode = true;" class="btn btn-default pull-right">Edit <i class="fa fa-pencil-square-o"></i></button>
<button type="button" data-ng-show="editMode" data-ng-click="editMode = false; updateItem($index)" class="btn btn-default">Save</button>
<button type="button" data-ng-show="editMode" data-ng-click="editMode = false; cancel()" class="btn btn-default">Cancel</button>
</td>`
JS:
$scope.uploadAttachment = function executeUploadAttachment(index, type) {
var listname = "Risk Register";
var id = $scope.items[index].Id;
console.log(indexID);
readFile("uploadControlId").done(function(buffer, fileName) {
uploadAttachment(type, id, listname, fileName, buffer).done(function() {
alert("success");
}).fail(function() {
alert("error in uploading attachment");
})
}).fail(function(err) {
alert("error in reading file content");
});
}
So the function uploadAttachment($index, type) which is triggered by ng-click doesn't pass the right index number. It always passes the same, no matter what row it is clicked in.
I have omitted some of the code that is irrelevant. If needed i can provide the whole thing.
Any suggestions to what I am missing?
Edit:
I have tried to implement DonJuwe suggestions.
I have added this inside my controller:
$scope.openModal = function(index) {
var modalInstance = $modal.open({
templateUrl: 'www.test.xxx/App/uploadModal.html',
controller: 'riskListCtrl',
resolve: {
index: function() {
return index;
}
}
});
};
This is my modal template:
<div class="modal-header">
<h3 class="modal-title" id="uploadModalLabel">Options</h3>
</div>
<div class="modal-body">
<h4>Upload Documents</h4>
<form>
<div class="form-group">
<select data-ng-model="type" class="form-control" id="fileTypeSelect">
<option value="Policy">Policy</option>
<option value="SOP">SOP</option>
</select>
<br>
<div class="input-group"> <span class="input-group-btn">
<input type="file" id="file">
</span>
</div>
<br>
<button type="button" class="btn btn-default" data-ng-click="uploadAttachment($index, type)">Upload</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
And finally my function which resides inside RiskListCtrl (the only controller i use):
$scope.uploadAttachment = function executeUploadAttachment(index, type) {
var listname = "Risk Register";
var id = $scope.items[index].Id;
console.log(indexID);
readFile("uploadControlId").done(function(buffer, fileName) {
uploadAttachment(type, id, listname, fileName, buffer).done(function() {
alert("success");
}).fail(function() {
alert("error in uploading attachment");
})
}).fail(function(err) {
alert("error in reading file content");
});
}
It seems that $scope.items[index].Id is empty. Error: Cannot read property 'Id' of undefined
The modal window has its own scope. That means you need to resolve data you want to pass into the modal's scope. To do so, use resolve within the modals open(options) method.
Before I will give you an example, I want to suggest having only one modal for all your table items. This will let you keep a single template where you can easily use id (now, you create a template for each of your table items which is not valid). Just call a controller function and pass your $index:
<button type="button" class="btn btn-primary uploadBtn" data-ng-show="editMode" ng-click="openModal($index)">Upload file <i class="fa fa-cloud-upload"></i></button>
In your controller, create the modal instance and refer to the template:
$scope.openModal = function(index) {
var modalInstance = $modal.open({
templateUrl: 'myPath/myTemplate.html',
controller: 'MyModalCtrl',
resolve: {
index: function() {
return index;
}
}
});
};
Now you can access index in your MyModalCtrl's scope by injecting index:
angular.module('myModule', []).controller('MyModalCtrl', function($scope, index) {
$scope.index = index;
});
Since, you are getting the index value outside model then you can also use ng-click and then call a function in your controller and store the index value in a temporary variable and then when you are using submit button then just take make another variable and assign the value of temporary variable to your variable. for example:
<button type="button" data-ng-show="editMode" data-ng-click="editMode = false; updateItem($index)" class="btn btn-default">Save</button>
and then make a function in your controller
$scope.updateItem = functon(index)
{
$scope.tempVar = index;
}
now use the value of tempVar in you function
$scope.uploadAttachment = function executeUploadAttachment(index, type) {
var index = tempVar; //assign the value of tempvar to index
var listname = "Risk Register";
var id = $scope.items[index].Id;
console.log(indexID);
readFile("uploadControlId").done(function(buffer, fileName) {
uploadAttachment(type, id, listname, fileName, buffer).done(function() {
alert("success");
}).fail(function() {
alert("error in uploading attachment");
})
}).fail(function(err) {
alert("error in reading file content");
});
}