I have some strange issue. I use an carousel from bootstrap ui in a modal box from bootstrap. At the beginning is init the images for the carousel. Then i click on a button to show the modal box. This time they appear correctly. But then i reinit the carouseldata (Switch to other data) and open the carousel again and then he is empty. Is there an possible solution for this?
Here you can a example of it: http://plnkr.co/edit/YASfl9nF0cxqlytFjjI0?p=preview
Click first on click me and then you see the modal box. Close the modal box and switch from data and open it again.
<div class="modal fade" id="modal" 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="myTalkModalLabel">Title</h4>
</div>
<div class="modal-body">
<carousel interval="myInterval">
<slide ng-repeat="slide in getImages()">
<img ng-src="slide.image" />
</slide>
</carousel>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
var app = angular.module('plunker',['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
$scope.myInterval = 2000;
$scope.images = ["http://nautisme.nc/photos.nautisme.nc/201410/o_193fo6a4ckel17ml1bvif3lo9ki.jpg","http://nautisme.nc/photos.nautisme.nc/201410/o_193fo6a4c1t8t79i15qo99l1jqlj.jpg","http://nautisme.nc/photos.nautisme.nc/201410/o_193fo6a4davv1tplqkf24f1h4vk.jpg"];
var images2 = ["http://nautisme.nc/photos.nautisme.nc/201410/o_193fo6a4dg9gqgvt6o60l8dl.jpg","http://nautisme.nc/photos.nautisme.nc/201410/o_193fo6a4d59tal51dkp1ask69nm.jpg","http://nautisme.nc/photos.nautisme.nc/201410/o_193fo6a4e6st4vcoqii8r1vpgn.jpg","http://nautisme.nc/photos.nautisme.nc/201410/o_193fo6a4e184m10d46264i4buto.jpg"];
$scope.getImages = function(){
return $scope.images;
}
$scope.showModal = function(){
$("#modal").modal("show");
}
$scope.showModal = function(){
$('#modal').modal('show');
}
$scope.switchImages = function(){
var temp = $scope.images;
$scope.images = images2;
images2 = temp;
}
});
Updated Plunker
The main issue is that you're trying to use Bootstrap's jQuery-based plugins (bootstrap.js) in your AngularJS app along with UI-Bootstrap. I swapped your modal for the UI-Bootstrap modal implementation. UI Bootstrap has no dependency on the bootstrap.js, or jQuery for that matter, so I removed both from the page <head> to avoid conflicts.
Maybe it was just a typo in the Plunker but, I also needed to fix the ng-repeat in the carousel. Where you had slide in getImages(), I removed the function and referenced $scope.images with image in images. Further, since $scope.images is an array of image urls, to access them, you just use the expression: {{image}}.
<carousel interval="myInterval">
<slide ng-repeat="image in images track by $index">
<img ng-src="{{image}}" style="width: 100%;" />
</slide>
</carousel>
APP JS:
var app = angular.module('plunker',['ui.bootstrap']);
app.controller('MainCtrl', function($scope, $modal) {
var images2 = ["http://placehold.it/500x300/009999/fff&text=Group%202:%20Image%201", "http://placehold.it/500x300/009999/fff&text=Group%202:%20Image%202", "http://placehold.it/500x300/009999/fff&text=Group%202:%20Image%203"];
$scope.myInterval = 10000;
$scope.images = ["http://placehold.it/500x300/e8117f/fff&text=Group%201:%20Image%201","http://placehold.it/500x300/e8117f/fff&text=Group%201:%20Image%202"];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
imgs: function () {
return $scope.images;
}
}
});
};
$scope.switchImages = function(){
var temp = $scope.images;
$scope.images = images2;
images2 = temp;
};
});
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, imgs) {
$scope.images = imgs;
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
MARKUP:
<button class="btn btn-primary" ng-click="open()">Launch Modal</button>
<button class="btn btn-primary" ng-click="switchImages()">Switch Image Group</button>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Title</h3>
</div>
<div class="modal-body">
<carousel interval="myInterval">
<slide ng-repeat="image in images track by $index">
<img ng-src="{{image}}" style="width: 100%;" />
</slide>
</carousel>
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Close</button>
</div>
</script>
Related
I need to pass a Model to a partial view. I first pass a value of ID, then I get the Model I need based on that ID.
The scenario: I have a table with a delete button in each row. I need to display a confirmation bootstrap modal that includes a Model.
The problem, it's not working and I don't know if there another way to do that or not
In the section of javascript BPCategoriesId not recognized
Here is my code attempt.
Delete Button
#foreach (var item in Model.BPCategories)
{
...
<button type="button" data-id="#item.Id" class="btn btn-outline-danger w-50" data-bs-toggle="modal" data-bs-target="#exampleModal">
Delete
</button>
...
}
Bootstrap Modal
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Confirm Delete</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="ModelLoad">
<!--here I need to load my partial view with a model using JS-->
</div>
<!--<partial name="Delete" model="#Model.BPCategories.Where(id => id.Id == returnID()).FirstOrDefault()" />-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<form asp-action="Delete">
<input type="hidden" asp-for="Id" />
</form>
</div>
</div>
</div>
</div>
JavaScript
<script>
$(document).ready(function () {
var btns = document.querySelectorAll('[data-id]');
for (let btn of btns) {
btn.addEventListener('click', () => {
let BPCategoriesId = btn.dataset['id'];
var jsonModel = #Html.Raw(Json.Serialize(#Model.BPCategories.Where(id => id.Id == BPCategoriesId).FirstOrDefault()));
$("#ModelLoad").load('#Url.Action("Delete", "BootstrapCategories")', jsonModel);
});
}
});
</script>
#model LoadPartialView.Models.TestViewModel
#foreach (var item in Model.BPCategories)
{
<p>
<button type="button" data-id="#item.Id" class="btn btn-outline-danger w-50" data-toggle="modal" data-target="#exampleModal">
Delete
</button>
</p>
}
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Confirm Delete</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="modelLoad">
<!--here I need to load my partial view with a model using JS-->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<form asp-action="Delete">
<input type="hidden" asp-for="Id" />
</form>
</div>
</div>
</div>
</div>
#section scripts {
<script type="text/javascript">
$(function () {
var btns = document.querySelectorAll('[data-id]');
for (let btn of btns) {
btn.addEventListener('click', () => {
let bpCategoryId = btn.dataset['id'];
$("#modelLoad")
.load('#Url.Action("Delete", "BootstrapCategories")', {
bpCategories: JSON.parse('#Html.Raw(Json.Encode(Model.BPCategories))'),
bpCategoryId: bpCategoryId
});
});
}
});
</script>
}
Demo is pushed to GitHub.
Today I came across with this, I tried doing what was in the project and came across with the OP's problem about the full screen modal. I saw a solution below about about cutting the div and pasting it in an outer div.
I did what was in the solution but what happens is that the full modal div is retained and the normal popup shows.
If I add it to the script, no popup shows but backdrop changes.
How do I solve this? Thanks in advance
UPDATE
PARENT VIEW BUTTON
<button type="button" class="btn btn-success btn-sm modal-link" data-targeturl="#Url.Action("_Popup","Application",new { MotorId = item.motor_id, Serialno = item.serialno, AppNo = item.application_no, Remarks = item.remarks })"> View
</button>
PARENT MODAL
<div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
X
<div class="modal-content">
<div class="modal-body"></div>
</div>
</div>
SCRIPT
$(function () {
$('body').on('click', '.modal-link', function (e) {
e.preventDefault();
$("#modal-container").remove();
$.get($(this).data("targeturl"), function (data) {
$('<div id="modal-container" class="modal fade">' + '<div class="modal-content" id="modalbody" >' + data + '</div></div>').modal();
});
});
});
PARTIAL VIEW
#model iVehicle.ViewModel.FranchiseViewModel
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>Some content here</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
The data-dismiss in bootstrap is not working. It is working in another project but not in this project. Please suggest me where I am going wrong.
#using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
#Html.TextBoxFor(m => m.txtName)
<button type="submit" id="submit" data-toggle="modal" data-target="#myModal">Produce Page</button>
}
//My Modal
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
...
<div class="modal-header">
...
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary">Go to My Home</button>
</div>
</div>
You can try this snippet.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> #using (Html.BeginForm("Index", "Home", FormMethod.Post)) { #Html.TextBoxFor(m => m.txtName)
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> }
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
#Html.Partial("My partial View")
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Bootstrap modal with Pure Javascript
(function() {
"use strict";
var Modal = function(el, options) {
var self = this;
this.el = document.querySelector(el);
this.options = options;
try {
var list = document.querySelectorAll('#' + this.el.id + ' [data-dismiss="modal"]');
for (var x = 0; x < list.length; x++) {
list[x].addEventListener('click', function(e) {
if (e) e.preventDefault();
self.hide();
});
}
} catch (e) {
console.log(e);
}
};
/**
* Methods
*/
Modal.prototype.show = function() {
var self = this;
// adding backdrop (transparent background) behind the modal
if (self.options.backdrop) {
var backdrop = document.getElementById('bs.backdrop');
if (backdrop === null) {
backdrop = document.createElement('div');
backdrop.id = "bs.backdrop";
backdrop.className = "modal-backdrop fade in";
document.body.appendChild(backdrop);
}
}
// show modal
this.el.classList.add('in');
this.el.style.display = 'block';
document.body.style.paddingRight = '13px';
document.body.classList.add('modal-open');
};
Modal.prototype.hide = function() {
var self = this;
// hide modal
this.el.classList.remove('in');
this.el.style.display = 'none';
document.body.style = '';
document.body.classList.remove('modal-open');
// removing backdrop
if (self.options.backdrop) {
var backdrop = document.getElementById('bs.backdrop');
if (backdrop !== null) document.body.removeChild(backdrop);
}
};
/* Event */
document.addEventListener('DOMContentLoaded', function() {
var m = new Modal('#MyModal', {
backdrop: true
});
document.getElementById('btn-open').addEventListener('click', function(e) {
if (e) e.preventDefault();
m.show();
});
});
})();
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> #using (Html.BeginForm("Index", "Home", FormMethod.Post)) { #Html.TextBoxFor(m => m.txtName)
Click Me }
<div id="MyModal" class="modal fade">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I am trying to do this under ASP.NET MVC 5 Visual Studio 2013, with the latest nuget libraries.
AngularJS Core 1.3.8
AngularJS UI Bootstrap 0.12.0
Bootstrap 3.3.1
jQuery 2.1.3
Important files:
App.js
var deviceModule = angular.module("devicesModule", ["ui.bootstrap"]);
var app = angular.module("dxuWebApp", ["devicesModule"]);
DeviceController.js
deviceModule.controller("DevicesController", function ($scope, deviceService, $modal) {
$scope.devices = [];
function init() {
$scope.devices = deviceService.getDevices();
}
init();
$scope.addDevice = function(size) {
var modalInstance = $modal.open({
templateUrl: "newDeviceTemplate.html",
controller: "NewDeviceModelController",
size: size
});
modalInstance.opened.then(function() {
alert('yep');
});
modalInstance.result.then(function (newDevice) {
deviceService.postDevice(newDevice);
}, function () {
});
}
});
deviceModule.controller("NewDeviceModelController", function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close({ name: newDevice.name });
};
$scope.cancel = function () {
$modalInstance.dismiss("cancel");
};
});
newDeviceTemplate.html
<div class="modal-header">
<h2>New Device</h2>
</div>
<div class="modal-body">
<input type="text" data-ng-model="newDevice.name" />
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
Index.cshtml
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div data-ng-app="dxuWebApp" data-ng-controller="DevicesController">
<div class="row">
<div class="col-lg-12">
<h2>Devices <a data-ng-click="addDevice()"><span class="glyphicon glyphicon-plus-sign"></span></a></h2>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="list-inline">
<li data-ng-repeat="device in devices | orderBy: 'name'">
<a href="#">
<div class="device">
<div class="deviceImage">
#*<img alt="device image"/>*#
<span class="glyphicon glyphicon-phone"></span>
</div>
<div class="deviceName">
{{device.name | uppercase}}
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
#section scripts
{
#Scripts.Render("~/bundles/dxuWebApp")
<script type="text/ng-template" id="newDevice.html">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2>New Device</h2>
</div>
<div class="modal-body">
<input type="text" data-ng-model="newDevice.name" />
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</div>
</div>
</script>
}
The references to both ui-bootstrap and ui-bootstrap.tpls are in the _layout page.
I was hoping that when I clicked
<a data-ng-click="addDevice()"><span class="glyphicon glyphicon-plus-sign">
AngularJs magic would happen and I would get a modal on the screen, but nothing happens, no errors or anything like that.
I did put a break point on deviceController.addDevice() and it hit that point and goes through, nothing appear on the screen.
So what wrong with my code?
I had the exact same problem.
I am using MVC 5.0 with AngularJS so the reason it wasn't working ( I was getting a 404 not able to find the modal.html.) was I didn't create a route in the controller for the modal.html or map a view to the controller with the same name as the route.
After properly setting up the Controller and the View it worked.
Sorry there is no code for this since it was just a problem following the MVC process.
I'm using ASP.net MVC5 with Bootstrap 3
I have the following View
#model WilhanWebsite.Models.PhotoViewModel
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Gallery</h2>
<p>
#Html.ActionLink("Upload Photo", "Create")
<br/>
#for (var i = 0; i < Model.DownloadedImages.Count; i++)
{
<a data-toggle="modal" data-target="#img-thumbnail#i" class="img_modal" href="data:image/jpg;base64,#(Convert.ToBase64String(Model.DownloadedImages[i].ImageData))">
<img id="img-thumbnail#i" class="img-thumbnail" src="data:image/jpg;base64,#(Convert.ToBase64String(Model.DownloadedImages[i].ImageData))" alt="#Model.DownloadedImages[i].Description" />
</a>
}
<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Title to go here</h3>
</div>
<div class="modal-body">
<img id="modal_img_target">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</p>
When I click an image from the gallery I would like it to display in a modal window.
My problem is, when I click the link, the modal window displays without the image. All the examples I've seen use images from the file system whereas my site uses images from a db via a byte array. I guess the fix may be to change the line of javascript that is assigning the source attribute on the modal image but I've tried various things here without a result. The problem can be seen at the following address: Problem page
** EDIT **
Updated view to use for loop to identify images as suggested. Problem changed, now rather than displaying a blank modal page, the image is displayed on a blank page.
** EDIT Working View **
#model WilhanWebsite.Models.PhotoViewModel
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Gallery</h2>
<p>
#Html.ActionLink("Upload Photo", "Create")
<br/>
#for (var i = 0; i < Model.DownloadedImages.Count; i++)
{
<a data-toggle="modal" data-target="#img-thumbnail#i" class="img_modal" href="data:image/jpg;base64,#(Convert.ToBase64String(Model.DownloadedImages[i].ImageData))">
<img id="img-thumbnail#i" class="img-thumbnail" src="data:image/jpg;base64,#(Convert.ToBase64String(Model.DownloadedImages[i].ImageData))" alt="#Model.DownloadedImages[i].Description" />
</a>
}
<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Title to go here</h3>
</div>
<div class="modal-body">
<img id="modal_img_target">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</p>
<script type="text/javascript">
$('.img_modal').on('click', function (e) {
e.preventDefault();
$("#modal_img_target").attr("src", this);
$("#modal").removeClass("hide");
$('#modal').modal('show');
});
</script>
You need to add the toggle and target to the link:
<a ... data-toggle="modal" data-target="#img-thumbnail1"
Then add the target id to the image:
<img id="img-thumbnail1" class="img-thumbnail"
This means that you will have to add an incrementing number to the loop so that id's are unique.
You can do this like this:
#for (var i = 0; i < Model.DownloadedImages.Count; i++)
{
<a data-toggle="modal" data-target="#img-thumbnail#i" class="img_modal" href="data:image/jpg;base64,#(Convert.ToBase64String(photo.ImageData))">
<img id="img-thumbnail#i" class="img-thumbnail" src="data:image/jpg;base64,#(Convert.ToBase64String(photo.ImageData))" alt="#photo.Description" />
</a>
}
The problem is with your jquery, as you are getting the "#modal_img_target" src value correctly. Your onClick event is hiding the image.
Try this :-
<script type="text/javascript">
$('.img_modal').on('click', function (e) {
e.preventDefault();
$("#modal_img_target").attr("src", this);
$("#modal").removeClass("hide");
$('#modal').modal('show');
});
</script>