In my MVC view, I am opening a modal dialog which renders a PartialView as RenderAction. The view is opened when user click Add button for the specific row like below.
From the main view, I want to pass the current row's (select row) ProjectNo, DrawingNo and RevisionNo. Also, preferrably I want to pass this into the respective ViewBag's fields. How can I achieve this?
Here is the source code where I am calling the dialog.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Enter Fabrication Information</h4>
</div>
<div class="modal-body">
<div>
#{Html.RenderAction("Create", "Fabrication", new BPs.Entities.FABRICATION { });}
</div>
</div>
</div>
</div>
Update: Adding html for each row
#foreach(var info in #Model)
{
<tr>
<td>info.ProjectNo</td>
<td>info.DrawingNo</td>
<td>info.RevisionNo</td>
<button >Add</button>
</tr>
}
Bind Add to a jquery event and send values to event function('','') and then open partial view with load function
function Add(parameters)
{
$("<div></div>")
.addClass("dialog")
.appendTo(".modal-body")
.dialog({
title: 'xx',
close: function () { $(this).remove() },
closeText: "Close",
modal: true
})
.load("url?"yourparameters);
}
Related
Anyone can help me to fixed my issue, display select option in modal is not working while when i run my console its working fine but don't know why is not working when displaying my modal form. See attach photo below.
Here is my ajax code.. i pass it through html return it in to my detail blade. i use Bootstrap-select v1.13.1
my index blade...
<div class="modal fade bd-example-modal-lg" id="mymodal" role="dialog" >
<div class="modal-dialog modal-lg col-md-12" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body col-md-12 mt--4">
<div class="defectcontainer"></div>
</div>
</div>
</div>
my script....
$('#mymodal').on('shown.bs.modal',function(e){
$.ajax({
url:'{{{ URL::to("getdefectsdataJson") }}}',
data:
{
'coordinate_id':$("#coordinate_id").val(),
}
}).done(function(defectdatahtml){
$(".defectcontainer").html(defectdatahtml);
});
});
Thanks to this documentation https://github.com/snapappointments/bootstrap-select . I found the answer to my question.
$('#mymodal').on('shown.bs.modal',function(e){
$.ajax({
url:'{{{ URL::to("getdefectsdataJson") }}}',
data:
{
'coordinate_id':$("#coordinate_id").val(),
}
}).done(function(defectdatahtml){
$(".defectcontainer").html(defectdatahtml);
//------------- i add this funtion to my script. -------------------------------------------------//
$('.selectpicker').selectpicker();
});
});
I am trying to show a chart inside of a modal.
I am using Meteor with the maazalik:highcharts package. Initially, when the modal appears the chart is outside of the modal. As soon as I resize the window, the chart appears correctly inside the modal.
A button click event triggers:
$('#accountsDetailsModal').modal('show');
My modal sits in a template:
<template name="AccountsGraph">
<div id="accountsDetailsModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close on-close" data-dismiss="modal">×</button>
<h4 class="modal-title">Accounts Details</h4>
</div>
<div class="modal-body">
<div id="container" style="width:100%;margin: 0 auto">
{{> highchartsHelper chartId="accountsDetails" chartWidth="100%" charHeight="100%" chartObject=accountsGraph}}
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default on-close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</template>
EDIT: I replaced my click event handler and it worked.
$('#accountsDetailsModal').modal('show');
setTimeout(function(){
console.log("reflow");
$("#accountsDetails").highcharts().reflow();
},200);
add to your config object:
func: function(chart) {
setTimeout(function() {
chart.reflow();
}, 0);
}
My knowledge in ASP.NET is very limited, yet, I am building a UI/UX design for an application that will be built in ASP MVC and I've heard rumors of the following problem:
When a Boostrap modal fires a button event (onClick), it creates a postback which in turn, it refreshes the page, thus making it impossible for multiple bootstrap modals to work. Unless the modals do not require to interact with the back end, which means they would simply serve a client-side purpose.
I need to know how much of this is true and if there is a way to create a search or populate a bootstrap modal with information being entered in a second modal.
Unfortunately, I can't produce a working ASP code but I will produce the HTML portion of it so you have an idea.
Again, my question is, can I populate modal 1 with information entered in modal 2? Modal 2 is invoked from Modal 1. See the code and Demo for details
<div class="container">
<h1>Working with Multiple Modals</h1>
<div class="margin-lg">
<button type="button" class="btn-first-modal btn btn-primary btn-lg" data-toggle="modal" data-target="#first-modal">
Launch Modal
</button>
</div>
<div class="modal" id="first-modal" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">First Modal</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-sm-4">
<label class="label-control">My ID</label>
<input type="text" class="form-control" disabled/>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn-second-modal within-first-modal btn btn-primary">
Add ID
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal" id="second-modal" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-second-modal-close close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">ID Generator</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-sm-4">
<label class="label-control">Choose ID</label>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn-second-modal-close btn btn-primary">Add</button>
</div>
</div>
</div>
</div>
JS
var within_first_modal = false;
$('.btn-second-modal').on('click', function() {
if ($(this).hasClass('within-first-modal')) {
within_first_modal = true;
$('#first-modal').modal('hide');
}
$('#second-modal').modal('show');
});
$('.btn-second-modal-close').on('click', function() {
$('#second-modal').modal('hide');
if (within_first_modal) {
$('#first-modal').modal('show');
within_first_modal = false;
}
});
$('.btn-toggle-fade').on('click', function() {
if ($('.modal').hasClass('fade')) {
$('.modal').removeClass('fade');
$(this).removeClass('btn-success');
} else {
$('.modal').addClass('fade');
$(this).addClass('btn-success');
}
});
DEMO
This would let you make a request to the server and do something with the information that you get back.
$(".btn-second-modal").on("click", function () {
$.ajax({
url: "/urltoserver/action/",
cache: false
}).done(function (data) {
// SET YOUR FIRST MODAL PROPERTIES
// HIDE YOUR SECOND MODAL
// SHOW YOUR FIRST MODAL
});
});
I have a calender after I click on date I need to show all data related to that day in a bootstrap model.I used fullcalender as my calender. I manage to pass data to controller through ajax and get the result. But my problem is how to show this data inside specific div.
dayClick: function (date, jsEvent, view) {
$.ajax({
url: 'TodayCases',
type: 'GET',
cache: false,
data: { id: date.format() }
}).done(function (result) {
$('#TodayCaseContainer').html(result);
});
}
if I use $('#Detail').modal('show'); it open the model without data how to combine that html respond to this model
My Model is
<div class="modal fade" id="Detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<div id="TodayCaseContainer">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
From the controller you could return a partial view with the content of the modal. The trick is to call a JavaScript function "onsuccess" from the ajax to toggle the modal. I used the built-in ajaxhelper from asp.net MVC 5 for a similar purpose.
Markup Modal:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
#Html.Action("_partialModal", "Home")
</div>
</div>
Modal Partial View:
#Using Ajax.BeginForm("_partialModal", "Home", New AjaxOption With {
.HttpMethode = "Post",
.UpdateTargetID = "ModalCont",
.OnSuccess = "toggleModal()"},
New With {.id = "ModalCont"})
... Your modal content with Razor ...
End Using
JavaScript to Toggle the modal
function toggleModal() {
$('#myModal').modal('toggle');
}
Hope it helps.
I have this link
<a href='' data-toggle='modal' data-target='#modalC'>Book Now</a>
And i have this code which opens a bootstrap modal popup.
<div class="modal fade" id="modalC" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Cantidad reservas mensuales</h4>
</div>
<div class="modal-body" id="content">
</div>
</div>
</div>
</div>
Everything appearing inside div with id content is what appears inside modal popup, so my question is is there a way to show my already created aspx webform inside the modal popup without having to copy all the html and codebehind to this div?
I've heard something about window.open but i think it is not the case, Thank you in advance.
You can add an iframe into the modal body and load the url of your page inside it.
<div class="modal fade" id="modalC" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Cantidad reservas mensuales</h4>
</div>
<div class="modal-body" id="content">
<iframe src="your new page url">
</div>
</div>
</div>
</div>
if you want to load the page everytime you open the modal, you can add the iframe src when you click on the button you use to open the modal (or whichever method you use to open it).
Maybe this code can help you:
Add jquery and bootstrap
$(document).ready(function () {
initializeEvents();
});
var initializeEvents = function () {
$("#btnCarga").click(function () {
//agregas el aspx que quieres mostrar, el titulo y el pie de página pueden ser opcionales
ShowModalIframe('OtherPage.aspx', 'Tittle', 'Footer');
});
};
//Crea un modal con un iframe en el contenido donde se mostrará el aspx
var ShowModalIframe = function (uriContent, tittle = 'Titulo', footer='Carga completada') {
var html = '<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">\
<div class="modal-dialog modal-xl">\
<div class="modal-content">\
<div class="modal-header">\
<h5 class="modal-title">'+tittle+'</h5>\
<button type="button" class="close" data-dismiss="modal" aria-label="Close">\
<span aria-hidden="true">×</span>\
</button>\
</div>\
<div id="modal-body" class="modal-body">\
<div class="embed-responsive embed-responsive-21by9">\
<iframe id="iframe-modal" class="embed-responsive-item" src="'+document.location.origin+'/'+uriContent+'"></iframe>\
</div>\
</div>\
<div class="modal-footer">\
'+footer+'\
</div>\
</div>\
</div>\
</div>';
var dialog = $(html);
dialog.modal({
backdrop: 'static',
keyboard: false
});
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<button id="btnCarga" type="button" class="btn btn-primary" >
Mostrar modal
</button>