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.

Twitter share button not working correctly

Currently working on freeCodeCamp's random code generator project. I'm getting strange behavior with my "Tweet" button. If the class is "twitter-share-button", the button will display properly, but won't populate the quote in the pop-up box, but if I change the class to "button", the button has no styling but the pop-up Tweet box populates correctly with the quote and author.
Please see code below:
HTML:
<div id="quoteBox" class="col-md-6 col-md-offset-3 text-center">
<h2>“What a curious power words have.”</h2>
<p>- Tadeusz Borowski</p>
<div class="panel panel-default">
<div class="panel-body">
<p id="quote"></p>
<h4 id="author"></h4>
</div>
<div id="twitter">
<a class="twitter-share-button button" id="tweet-quote" data-show-count="false">Tweet</a>
</div>​
</div>
<button id="getQuote" class="btn btn-primary btn-lg round btn-block">New Quote</button>
JS:
$(document).ready(function() {
// Loads quote on page load
getQuote();
$("#getQuote").click(getQuote);
});
function getQuote() {
$(document.body).css('background-color',
colors[Math.floor(Math.random() * colors.length)]);
$.ajax({
type: "POST",
url: "https://andruxnet-random-famous-quotes.p.mashape.com/?
cat=famous",
responseType: "json",
success: function(response) {
showQuote(response);
$('#tweet-quote').attr('href', 'https://twitter.com/intent/tweet?
text=' + encodeURIComponent('"' + response.quote + '" - ' +
response.author));
},
error: function() {
alert('Error retrieving quote');
},
beforeSend: setHeader
});
function setHeader(xhr) {
xhr.setRequestHeader("X-Mashape-Key",
"pmTSpn6I45mshpuPkHokTQ01lAo1p1ugEH1jsnoOS19Gk3KQvB");
xhr.setRequestHeader("Content-Type", "application/x-www-form-
urlencoded");
xhr.setRequestHeader("Accept", "application/json");
}
}
function showQuote(response) {
console.log(response);
$('#quote').text(response.quote);
$('#author').text(response.author);
}
I've spent hours on Twitter's dev page without any luck. Any help would be greatly appreciated, thanks.

Callback to server using ajax

I am trying to do a callback to the server to return a partial view to my modal when i click the "Add Role" button, but nothing happens when I click the button.
JavaScript:
$(".addRole").on("click", function(){
bootbox.dialog({
title: "Create new role",
callback: function () {
$.ajax({
url: "/Uam/CreateRole/",
method: "POST",
success: function(){}
});
}
});
});
View:
#model List<Vidly.Models.AvailableRole>
#{
ViewBag.Title = "CreateRole";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Available Roles</h2>
<div id="addRoleForm">
<button class="btn btn-success pull-right addRole" type="button" data-toggle="modal">New Role</button>
</div>
Controller:
public ActionResult CreateRole(int? id){
if (id == null){
var menuViewModel = new RoleMenuViewModel{
Menus = GetMultiselectItems()
};
return View("SaveRole", menuViewModel);
}

Message attribute is mandatory for bootbox dialog
$(".addRole").on("click", function(){
bootbox.dialog({
message: '<p class="text-center">Please wait while Createing new role...</p>',
title: "Create new role",
callback: function () {
$.ajax({
url: "/Uam/CreateRole/",
method: "POST",
success: function(){}
});
}
});
});
http://bootboxjs.com/examples.html#bb-custom-dialog

I ended up using the basic bootstrap modal with a #html.RenderAction call in the modal body and a reference to the launch button. No JQuery used.
<button id="addRole-btn" class="btn btn-success pull-right btn-lg" data-toggle="modal" data-target="#modal-container">New Role</button>
<div id="modal-container" class="modal fade" role="dialog" width="500px">
<div id="role-container"></div>
<div class="modal-content">
<div class="modal-body">
#if (true)
{
Html.RenderAction("CreateRole", "Uam");
}
</div>
</div>

How write a script that works on modal popup & on full page

I have the following view which is forced to be displayed as a modal popup using jQuery :-
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" /> | #Html.ActionLink("Back to List", "Index")
</div>
</div>
</div>
}
<span id="progress" class="text-center" style="display: none;">
<img src="~/img/ajax-loaders/ajax-loader-5.gif" alt="wait" />
Wait..
</span>
and i wrote the following script, which will fires if the user click on Create/Edit/Delete links . where the script will show a progree message + disable the submit button:-
$(function () {
$.ajaxSetup({ cache: false });
$("a[data-modal]").on("click", function (e) {
$('#myModalContent').load(this.href, function () {
$('#myModal').modal({
height: 1000,
width: 1200,
resizable: true,
keyboard: true
}, 'show');
$('#myModalContent').removeData("validator");
$('#myModalContent').removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse('#myModalContent');
bindForm(this);
});
return false;
});
});
function bindForm(dialog) {
$('form', dialog).submit(function () {
$('.btn btn-default').prop("disabled", "disabled");
$('#progress').show();
if ($(this).valid()) {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
but let say the that the user instead of clicking on the link, he chose to "Open link in new browser" , so the view will render insdie the browser (not as modal popup) and the script will not fire, so when the user click on submit button,, the submit button will not be disabled + the progress will not be shown?
So can anyone adivce where i need to place a script that always works ?