We Keep Coding

How can I make a completely different Modal appear in the View, depending on the response from the Controller?

I have a code on my Asp.Net Core APP which I want to handle exclusively through Modals and with responses from the Controller, which change depending on the values that are sent from the View.
Right now I have the following code, which, what it does is change the message in a div on the Modal, for the response it receives from the controller, with the button that calls said Modal.
General part of the view:
#model AP.ViewModels.UK1
<div class="container">
<div class="card level-3">
<h3>Ac</h3>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="Create">
<div class="form-group">
<input asp-for="UK2" class="form-control" />
<span asp-validation-for="UK2" class="text-danger"></span>
</div>
<div class="form-group">
<input asp-for="UK3" class="form-control" />
<span asp-validation-for="UK3" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="UK5" class="btn btn-primary" /> |
<!-- Button to Open the Modal -->
<button id="btnOpenModal" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
CALL CONTROLLER / MODAL BUTTON
</button>
</div>
</form>
</div>
</div>
</div>
</div>
Modal Code on the View:
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">CONTROLLER RESPONSE:</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body" id="modalcontent">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">CANCEL</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">OK1</button>
</div>
</div>
</div>
</div>
Script which calls Modal and sent the data to the Controller:
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(function () {
$("#btnOpenModal").click(function () {
var uk = {};
uk.UK2 = $("#UK2").val();
uk.UK3 = $("#UK3").val();
$.ajax({
type: "POST",
url: "/UK1/GetViewContent",
data: uk,
beforeSend: function (request) {
request.setRequestHeader(
"RequestVerificationToken",
$("[name='__RequestVerificationToken']").val());
},
success: function (data) {
$('#modalcontent').html(data);
},
error: function (response) {
$("#myModal").modal('toggle')
}
});
});
$("#myModal").on("click", ".btn-default", function () {
alert("Cancel button click");
});
$("#myModal").on("click", ".btn-danger", function () {
// code
alert("Delete button click");
$('#myModal').modal('hide')
});
});
</script>
Controller Code:
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult GetViewContent(UK1 uk)
{
if (uk.UK2 == uk.UK3)
{
return Ok("A-CASE 1");
}
if (uk.UK2 >= uk.UK3)
{
return Ok("B-CASE 2");
}
if (uk.UK2 <= uk.UK3)
{
return Ok("C-CASE 3");
}
if (uk.UK2 == null)
{
return Ok("D-CASE 4");
}
if (uk.UK3 == null)
{
return Ok("E-CASE 5");
}
}
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create(UK1 ukk)
{
return View("Home1");
}
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> CreateDos(UK1 ukk)
{
return View("Home2");
}
Now this is what I want to achieve with the code:
I would like my code to have 5 possible Modals, one for each possible response from the Controller, and that each one of these Modals had a different message, as well as different buttons, and my question is, how can I do it? Which are my options?
The first thing that comes to my mind is to have HTML code for 5 different Modals in view, and depending on which the Controller's response is, the code calls a different one of the Modals, the problem is that I don't know how to do that, since I don't know how to read the controller Response as a 'variable' in the script code, or how I should put "Ifs" that depend on the response there in the Script, but I understand that this should go in this part of the code:
success: function (data) {
$('#modalcontent').html(data);
},
error: function (response) {
$("#myModal").modal('toggle')
}
In any case, what I would like for my 5 Modals, is something similar to this:
1)If the answer that is received from the Controller is "A-CASE 1", the Modal should get an "A" message on the div, and just the Cancel button should appear at the botton of the Modal.
2)If the answer that is received from the Controller is "B-CASE 2", the Modal should get an "B" message on the div, and both the Ok and Cancel button should appear at the botton of the Modal, the Ok Button should call me the Controller's Create method.
3)If the answer that is received from the Controller is "C-CASE 3", the Modal should get an "C" message on the div, and both the Ok and Cancel button should appear at the botton of the Modal, the Ok Button should call me the Controller's CreateDos method.
4)If the answer that is received from the Controller is "D-CASE 4", the Modal should get an "D" message on the div, and just the Cancel button should appear at the botton of the Modal.
5)If the answer that is received from the Controller is "E-CASE 5", the Modal should get an "E" message on the div, and just the Cancel button should appear at the botton of the Modal.
Anyway, thanks for reading everything and thanks in advance, all this is simply because I try to learn how to make the Modal Script do different things, and consider different cases, depending on what is the response that is sent from the Controller, since I understand that the complexity of the problem arises that the variables of the Script environment exist at different times than the variables of the View, and I don't know to what extent it is possible to treat the 'response' sent by the controller as a Variable, but I would like to learn how to do it if possible, and I want to understand all this.

Here is a working demo:
UK1：
public class UK1
{
public string UK2 { get; set; }
public string UK3 { get; set; }
}
UK1Controller:
//UK2 and UK3 are string,so that they can be null.When comparing them,we need to change them to int
[HttpPost]
[ValidateAntiForgeryToken]
public string GetViewContent(UK1 uk)
{
if (Convert.ToInt32(uk.UK2) == Convert.ToInt32(uk.UK3))
{
return "A-CASE 1";
}
if (Convert.ToInt32(uk.UK2) >= Convert.ToInt32(uk.UK3))
{
return "B-CASE 2";
}
if (Convert.ToInt32(uk.UK2) <= Convert.ToInt32(uk.UK3))
{
return "C-CASE 3";
}
if (uk.UK2 == null)
{
return "D-CASE 4";
}
if (uk.UK3 == null)
{
return "E-CASE 5";
}
return "";
}
public IActionResult ShowUK1()
{
return View();
}
public IActionResult Create()
{
return Ok();
}
public IActionResult CreateDos()
{
return Ok();
}
ShowUK1 View(I change OK1 button to <a> tag,and add id to Ok1 and Cancel):
<div class="container">
<div class="card level-3">
<h3>Ac</h3>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="Create">
<div class="form-group">
<input asp-for="UK2" class="form-control" />
<span asp-validation-for="UK2" class="text-danger"></span>
</div>
<div class="form-group">
<input asp-for="UK3" class="form-control" />
<span asp-validation-for="UK3" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="UK5" class="btn btn-primary" /> |
<!-- Button to Open the Modal -->
<button id="btnOpenModal" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
CALL CONTROLLER / MODAL BUTTON
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">CONTROLLER RESPONSE:</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body" id="modalcontent">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button id="cancel" type="button" class="btn btn-danger" data-dismiss="modal">CANCEL</button>
<a id="ok1" class="btn btn-primary" >OK1</a>
</div>
</div>
</div>
</div>
<script>
$(function () {
$("#btnOpenModal").click(function () {
var uk = {};
uk.UK2 = $("#UK2").val();
uk.UK3 = $("#UK3").val();
$.ajax({
type: "POST",
url: "GetViewContent",
data: uk,
beforeSend: function (request) {
request.setRequestHeader(
"RequestVerificationToken",
$("[name='__RequestVerificationToken']").val());
},
success: function (data) {
switch (data) {
case "A-CASE 1":
$("#ok1").attr("hidden", "hidden");
$('#modalcontent').html("A");
break;
case "B-CASE 2":
$("#ok1").removeAttr("hidden");
$("#ok1").attr("href", "Create");
$('#modalcontent').html("B");
break;
case "C-CASE 3":
$("#ok1").removeAttr("hidden");
$("#ok1").attr("href", "CreateDos");
$('#modalcontent').html("C");
break;
case "D-CASE 4":
$("#ok1").attr("hidden", "hidden");
$('#modalcontent').html("D");
break;
case "E-CASE 5":
$("#ok1").attr("hidden", "hidden");
$('#modalcontent').html("E");
break;
default:
break;
}
},
error: function (response) {
$("#myModal").modal('toggle')
}
});
});
});
</script>
result:

Is there a possibility to bind the Form to a modal bootstrap window without using the load call?

I'm using ajax to make a request and open a modal bootstrap window afterwards. The problem is that when I use ajax, I make a request to my controller, and the return (modal content) I load as follows:
//modal loading
$('#contentModalFinanceiroParcela').html(data);
//exibição da modal
$('#modalFinanceiroParcela').modal({
keyboard: true,
}, 'show');
So far, everything perfect. The problem is that from then on, I can't bind the form to register the submit event of the form. In the function bindFormFinanceiroParcela, no matter how much I pass the "dialog", bind does not work.
bindFormFinanceiroParcela(document.getElementById("contentModalFinanceiroParcela"));
Searching the forums, I found that the process works if I load the modal using the "load" command, as below, but I can't do it like that, otherwise it will make a second request to the controller, because previously, I already used ajax .
//That way it works, but I can't use it.
$('#contentModalFinanceiroParcela').load(url, function () {
$('#modalFinanceiroParcela').modal({
keyboard: true
}, 'show');
// Inscreve o evento submit
bindFormFinanceiroParcela(this);
stopLoadPage();
});
Is there a possibility that I can bind the form without using the "load" command mentioned in the script above?
function openModalFinanceiroParcelaSemURL(data) {
startLoadPage();
//Create the modal window block in the body of the page
if (!$("#modalFinanceiroParcela").data('bs.modal'))
CreateModalFinanceiroParcela();
//Load modal content via ajax request
$('#contentModalFinanceiroParcela').html(data);
$('#modalFinanceiroParcela').modal({
keyboard: true,
}, 'show');
bindFormFinanceiroParcela(document.getElementById("contentModalFinanceiroParcela"));
stopLoadPage();
}
function bindFormFinanceiroParcela(dialog) {
$('form', dialog).submit(function (e, i) {
if ($(this).valid() || i) {
startLoadOneMoment();
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
if (result.success) {
window.location = window.location;
} else {
$('#contentModalFinanceiroParcela').html(result);
bindFormFinanceiroParcela();
}
stopLoadOneMoment();
}
});
return false;
} else {
return false;
}
});
function CreateModalFinanceiroParcela() {
var html = '<div class="modal modal-primary modal-system" tabindex="-1" role="dialog" id="modalFinanceiroParcela" data-backdrop="static"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="content-modal-system" id="contentModalFinanceiroParcela"></div></div></div></div>';
$("body").append(html);
}
RAZOR DELETE:
#using Retaguarda.Domain.Enuns
#model Retaguarda.Application.ViewModels.Financeiro.FinanceiroParcela.FinanceiroParcelaViewModel
#{
ViewData["Title"] = "Excluir Parcela";
Layout = null;
}
<div>
<form asp-action="Delete" id="frm-excluir-financeiro-parcela">
#Html.AntiForgeryToken()
<div class="modal-shadow">
<div class="modal-header modal-header-primary">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4><i class="modal-title text-center glyphicon glyphicon-trash"></i> #ViewData["Title"] </h4>
</div>
<div class="panel">
<div class="panel-body container-fluid pt-15 pl-15 pr-15">
<div class="form-horizontal">
<vc:summary />
<br />
<div class="message-delete">
#Html.HiddenFor(model => model.Id, new { id = "hid-financeiro-parcela-id" })
<i class="icon fa-trash" aria-hidden="true"></i>
<p>
Tem certeza de que deseja excluir a parcela #(Model.Parcela)?<br />
</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="col-md-offset-2 col-md-10">
<div class="float-right">
<div class="btn-group btn-group-sm mr-auto"
role="group">
<div class="btn-group btn-group-sm" role="group">
#*<button id="btn-excluir-financeiro-parcela" type="submit" class="btn btn-success"><i class="icon wb-check"></i> Excluir </button>*#
<button id="btn-excluir-financeiro-parcela" type="button" class="btn btn-success"><i class="icon wb-check"></i> Excluir </button>
<button id="btn-cancelar-financeiro-parcela" class="btn btn-danger" data-dismiss="modal"><i class="icon wb-close"></i> Cancelar </button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
Ajax call
$('#dtFinanceiroParcela').on('click', 'tr .btn-excluir-financeiro-parcela', function (e) {
e.preventDefault();
startLoadOneMoment();
var id = $(this).attr('data-id');
var data = { id: id };
var dataURL = jQuery.param(data);
$.ajax({
url: "/financeiro-parcela-gerenciar/remover-financeiro-parcela/" + id,
type: "GET",
// data: dataURL,
contentType: "application/json",
async: false,
success: function (result) {
if (typeof result.success !== 'undefined') {
if (!result.success) {
stopLoadOneMoment();
swal("Oops", result.message, "error");
return false;
}
}
// alert(this.url);
stopLoadOneMoment();
openModalFinanceiroParcelaSemURL(result);
return false;
},
error: function () {
stopLoadOneMoment();
alert("Oops! Algo deu errado.");
return false;
}
});

Your form inside razor does not contain any submit button because its commented out.
#*<button id="btn-excluir-financeiro-parcela" type="submit" class="btn btn-success"><i class="icon wb-check"></i> Excluir </button>*#
Remove the comment or change the type of the other button to "submit"
I guess the submit event is attached successfully but never called due to the missing submit button inside your form.

Vue 2: Unable to find method on click event from component

In my vue app i am calling a function on click event, which is located in a component. Here is the component code:
Vue.component( 'new-board', {
template: `
<div>
<br/>
<div class="panel panel-primary">
<div class="panel-heading">
Create New Board
</div>
<div class="panel-body">
<input class="form-control" placeholder="Board Name"/>
<button
style="margin-top: 5px;"
#click.stop="addBoard"
class="btn btn-success btn-xs btn-block"
>
Add Board
</button>
</div>
</div>
</div>
`
} )
Here is the vue app instance:
var boardItem = new Vue( {
el: "#board-item",
data: {
boards: [
{ name: 'learning vue 2' }
],
newBoard: [],
viewNewBoard: true
},
methods: {
displayNewBoard: function() {
event.preventDefault()
if( this.viewNewBoard == false ) {
this.viewNewBoard = true
} else {
this.viewNewBoard = false
}
},
addBoard: function() {
console.log( 'add board' )
}
}
} )
Now, when i click on the Add Board button from the above component, it is showing this error:
Uncaught ReferenceError: addBoard is not defined
at click (eval at Xr (vue.min.js:7), :2:455)
at HTMLButtonElement.invoker (vue.min.js:6)
It seems that the button from the component can't find the addBoard method, which is written in the same file!
What i am missing here?

Try:
Vue.component( 'new-board', {
template: `
<div>
<br/>
<div class="panel panel-primary">
<div class="panel-heading">
Create New Board
</div>
<div class="panel-body">
<input class="form-control" placeholder="Board Name"/>
<button
style="margin-top: 5px;"
#click.stop="addBoard"
class="btn btn-success btn-xs btn-block"
>
Add Board
</button>
</div>
</div>
</div>
`,
methods: {
addBoard: function(){ console.log('add board');}
}
} )

A few changes here, if you want to share events with components that are not related you must use a new vue instance to fire those events and listen. So based on your code this should help.
window.Event = new Vue();
Vue.component( 'new-board', {
template: `
<div>
<br/>
<div class="panel panel-primary">
<div class="panel-heading">
Create New Board
</div>
<div class="panel-body">
<input class="form-control" placeholder="Board Name"/>
<button
style="margin-top: 5px;"
#click.stop="addBoard" // keep this as the name of the local method
class="btn btn-success btn-xs btn-block">
Add Board
</button>
</div>
</div>
</div>
`,
methods:{
addBoard(){
// fire the event, also you can add any params
Event.$emit('callAddBoard',data)
}
}
} )
And the main instance should listen to that event
var boardItem = new Vue( {
el: "#board-item",
data: {
boards: [
{ name: 'learning vue 2' }
],
newBoard: [],
viewNewBoard: true
},
methods: {
displayNewBoard: function() {
event.preventDefault()
if( this.viewNewBoard == false ) {
this.viewNewBoard = true
} else {
this.viewNewBoard = false
}
},
addBoard: function() {
console.log( 'add board' )
}
},
created(){
// here you listen and excute the remote event from component, and apply a local method.
Event.$on('callAddBoard', this.addBoard)
}
} )
As far as I tried this works , and you can send events to any component without the need of passing through the main instance.

Modifying a list in AngularJS

Attempting to make list items clickable without a checkbox. I want those items to to get a strike through when clicked and still have the delete option at the end. This functions properly, but I can't seem to maintain that when I try to make the items clickable. How do I need to modify this code to make it work?
<p class="lead" ng-bind="vm.list.content"></p>
<div class="list-group">
<span data-ng-repeat="item in vm.list.items|orderBy:'name'"
class="list-group-item" ng-class="{strike: item.check}">
<input type="checkbox" ng-model="item.check" ng-click="vm.cross(item)">
<a class="btn btn-default pull-right" ng-click="vm.remove(item)">
<i class="glyphicon glyphicon-trash"></i></a>
<h4 class="list-group-item-heading" ng-bind="item.name + ' - ' + item.priority"></h4>
</span>
</div>
Controllers:
function remove(item){
var removedItem = $scope.vm.list.items.indexOf(item);
$scope.vm.list.items.splice(removedItem, 1);
if (vm.list._id) {
vm.list.$update(successCallback, errorCallback);
} else {
vm.list.$save(successCallback, errorCallback);
}
function successCallback(res) {
$state.go('lists.view', {
listId: res._id
});
}
function errorCallback(res) {
vm.error = res.data.message;}
}
function cross(item){
if (vm.list._id) {
vm.list.$update(successCallback, errorCallback);
} else {
vm.list.$save(successCallback, errorCallback);
}
function successCallback(res) {
$state.go('lists.view', {
listId: res._id
});
}
function errorCallback(res) {
vm.error = res.data.message;}
}

Why not to move the checkbox behavior to the item wrapper? In this case, if click on the trash, the outer click handler will not be triggered because we stop event from further propagation.
<div class="list-group">
<span data-ng-repeat="item in vm.list.items|orderBy:'name'" class="list-group-item" ng-class="{strike: item.check}" ng-click="item.check = true; vm.cross(item)">
<a class="btn btn-default pull-right" ng-click="vm.remove(item);$event.stopPropagation();">
<i class="glyphicon glyphicon-trash"></i>
</a>
<h4 class="list-group-item-heading" ng-bind="item.name + ' - ' + item.priority"></h4>
</span>
</div>
If you want to cross/uncross item by click, you can implement a method like toggleCross and use it instead of "item.check = true" statement:
item.toggleCheck = function() {
this.check = !this.check;
}

How to add many functions in ONE ng-click?

I've be looking for how to execute this but I can't find anything related so far, :(
I could nest both functions yes but I'm just wondering if this is possible?
I'd like to do this literally:
<td><button class="btn" ng-click="edit($index) open()">Open me!</button></td>
My JS code at the moment:
$scope.open = function () {
$scope.shouldBeOpen = true;
};
$scope.edit = function(index){
var content_1, content_2;
content_1 = $scope.people[index].name;
content_2 = $scope.people[index].age;
console.log(content_1);
};
I'd like to call two functions with just one click, how can I do this in angularJS?
I thought it'd be straight forward like in CSS when you add multiple classes...but it's not :(

You have 2 options :
Create a third method that wrap both methods. Advantage here is that you put less logic in your template.
Otherwise if you want to add 2 calls in ng-click you can add ';' after edit($index) like this
ng-click="edit($index); open()"
See here : http://jsfiddle.net/laguiz/ehTy6/

You can call multiple functions with ';'
ng-click="edit($index); open()"

A lot of people use (click) option so I will share this too.
<button (click)="function1()" (click)="function2()">Button</button>

The standard way to add Multiple functions
<button (click)="removeAt(element.bookId); openDeleteDialog()"> Click Here</button>
or
<button (click)="removeAt(element.bookId)" (click)="openDeleteDialog()"> Click Here</button>

Try this:
Make a collection of functions
Make a function that loops through and executes all the functions in the collection.
Add the function to the html
array = [
function() {},
function() {},
function() {}
]
function loop() {
array.forEach(item) {
item()
}
}
ng - click = "loop()"

Follow the below
ng-click="anyFunction()"
anyFunction() {
// call another function here
anotherFunction();
}

<!-- Button trigger modal -->
<button type="button" (click)="open(content)" style="position: fixed; bottom: 0; right: 130px;"
class="btn col-sm-1 btn-Danger" >
Reject
</button>
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Profile update</h4>
<button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="bg-danger text-light" for="Reject">Reason For reject</label>
<textarea matInput placeholder=" Reject" [(ngModel)]="asset_note">{{note}}</textarea>
</div>
</div>
<div class="modal-footer">
<!-- -->
<button type="button" class="btn btn-outline-dark" (click)="reject();modal.close('Save click') ">Save</button>
</div>
</ng-template>
**.ts file**
open(content: any) {
this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}
close()
{
this.getDismissReason(ModalDismissReasons.ESC);
}

Which of the following is best practice (option1 or option2)
<button (click)="removeAt(element.bookId); openDeleteDialog()"> Click Here
<button (click)="removeAt(element.bookId)" (click)="openDeleteDialog()"> Click Here

ng-click "$watch(edit($index), open())"