I use modal bootstrap here is a code
<div class="modal fade" id="myModal" 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" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body" ng-bind-html="modalData">
</div>
</div>
</div>
</div>
here is a function that get html from file
$scope.modal = function(path, name){
$scope.ModalObj = $scope.Objects[FindNumber(name, $scope.Objects)];
$http.get(path).success(function(data) {
$scope.modalData = data;
});
};
and here is the html file
<h4>BUILD</h4>
<div>
<img ng-class="{opac: ModalObj.Commit.Build.Debug == false}" src="IMG/computer-md.png">
<img ng-class="{opac: ModalObj.Commit.Build.Release == false}" src="IMG/computer-md.png">
</div>
<span class="debug">Debug</span><span>Release</span>
<span class="time">{{ModalObj.Commit.Build.Timefin}}</span>
but it turned out that the programm can't find $scope's variable in that modal, what shall i do?
Have you dependency-injected $scope inside the controller's function?
If so even now you get the same kind of error, I would prefer you to go with the Directive for modal initiation and using the directive's transclude you can just put the necessary HTML code you want inside the modal.
Modal directive:
fmApp.directive('modal', function () {
return {
template: '<div class="modal fade">' +
'<div class="modal-dialog modal-lg">' +
'<div class="modal-content">' +
'<div class="modal-header" style="background-color:black;color:white;">' +
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color :red">×</button>' +
'<h2 class="modal-title" style="font-weight: bolder;">{{ title }}</h2>' +
'</div>' +
'<div class="modal-body" ng-transclude></div>' +
'</div>' +
'</div>' +
'</div>',
restrict: 'E',
transclude: true,
replace:true,
scope:true,
link: function postLink(scope, element, attrs) {
scope.title = attrs.title;
scope.$watch(attrs.visible, function(value){
if(value == true)
$(element).modal('show');
else
$(element).modal('hide');
});
$(element).on('shown.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = true;
});
});
$(element).on('hidden.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = false;
});
});
}
};
});
And the contents you want inside the modal:
<modal title="Job Activity Details..." visible="showJobActivityModal">
<div >
//type what ever the contents or elements you want
</div>
</modal>
Related
I am working on a project with a .ejs file. The problem is that an Angular function which affects a modal doesn't work and doesn't open - for comparison: with .html file it worked fine and opened my modal.
I get this error:
TypeError: modalinstance.modal is not a function. (In 'modalinstance.modal('show')', 'modalinstance.modal' is undefined
Do I need an Angular Import for my .ejs file?
<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">
<h3 class="modal-title" id="exampleModalLabel">Torsperrung</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
Sie sind dabei ein Tor zu sperren. <br>Falls Sie sich sicher sind, verfassen Sie einen Grund.
</div>
<div class="form-group">
<label for="message-text" class="col-form-label ">Bemerkung:</label>
<textarea class="form-control torbemerkung" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary abbrechen" data-index="0" data-dismiss="modal">Abbrechen</button>
<button type="button" class="btn btn-primary torsperren" data-index="0">Tor sperren</button>
</div>
</div>
</div>
</div>
$(document).ready(function() {
$('#tore').DataTable({
searching: false,
bInfo: false,
paging: false,
ordering: false
});
$('.sperren').each(function() {
$(this).append('<label class="switch">' +
'<input type="checkbox" class="sperrung" name="disabled" value="true">' +
'<span class="slider round"></span>' +
'</label>'
);
});
$('.slider').change(function() {
if ($(this).is(':checked')) {
}
});
$('#tore').find('.status').text("in Betrieb");
// open modal on slide change
$('input[type="checkbox"]').on('change', function(e) {
// get index from `tr`
var index = $(this).parents('tr').data().index;
if (e.target.checked) {
var modalinstance = $('#exampleModal');
// assign index
modalinstance.find('.torsperren').attr('data-index', index);
modalinstance.find('.abbrechen').attr('data-index', index);
// open modal
modalinstance.modal('show');
// reset value
modalinstance.find('.torbemerkung').val('');
} else {
// clear data by selecting the row with the given index
$('#tore').find('tr[data-index="' + index + '"]').find('.bemerkung').text("");
$('#tore').find('tr[data-index="' + index + '"]').find('.status').text("in Betrieb");
}
});
// textarea example
$('.torsperren').click(function() {
var index = $(this).attr('data-index');
// find element by index and assign the given value
$('#tore').find('tr[data-index="' + index + '"]').find('.bemerkung').text($('.torbemerkung').val());
$('#tore').find('tr[data-index="' + index + '"]').find('.status').text("gesperrt");
$('#exampleModal').modal('hide');
});
$('.abbrechen').click(function() {
var index = $(this).attr('data-index');
$('#tore').find('tr[data-index="' + index + '"]').find('input[type="checkbox"]').prop('checked', false);
});
});
SyntaxError: Unexpected identifier 'modal_html'. Expected a ':'
following the property name 'var'. (anonymous function) — modal.self-
Helpers = window.Helpers || {}
Helpers.Bootstrap = Helpers.Bootstrap || {}
Helpers.Bootstrap.Modal = {
var modal_html = `
<div class="modal fade" id="AlertModal" tabindex="-1" role="dialog" aria-labelledby="AlertModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="AlertModalLabel">${title}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
${message}
</div>
<div class="modal-footer">
${ button_html( button1 )}
${ button_html( button2 )}
</div>
</div>
</div>
`;
init(title, message, button1, button2, existingelementid) {
if (b === undefined) {
Helpers.Bootstrap.Modal.closee(existingelementid)
}
modal_html
}
close(elementid) {
$( elementid + " .close").click();
}
button_html(button_name) {
var button_cancel = "<button type="button" class="btn btn-outline-danger" data-dismiss="modal">Cancel</button>";
var button_save = "<button type="submit" class="btn btn-outline-primary spinner" >Save</button>";
var button_ok = "<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Ok</button>";
var button_close = "<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Close</button>";
switch(button_name) {
case "cancel":
button_cancel;
break;
case "save":
button_save;
break;
case "ok":
button_ok;
break;
case "close":
button_close;
break;
default:
button_name;
}
}
}
You are doing a lot of things wrong here:
End your assignments Helpers = window.Helpers || {} and Helpers.Bootstrap = Helpers.Bootstrap || {} with semicolons ; (just because!)
I think Helpers.Bootstrap.Modal.closee(existingelementid) should be .close not .closee
Your html in modal_html is missing a closing </div> tag in the end
you cant decalare a var inside a object like you did with var XXX = something;
insted you just do: XXX : something, <-- (note the , in the end)
in your function init it just randomly says modal_html in the end (without assignment or anything else)
the whole code in button_html is just utter gibberish...ofc var button_cancel = "<button type=" is not a real assignment and continuing with
button " class=" will just break everything!
---> YOU CAN'T USE " to delimiter inside of ""
You are never returning anything from your switch, (atleast thats what I think you want to do)
there is alot more, but I suggest fixing this first, and maybe your original error will dissapear magically ;)
Helpers = window.Helpers || {}; /* <------ */
Helpers.Bootstrap = Helpers.Bootstrap || {}; /* <------- */
Helpers.Bootstrap.Modal = {
modal_html : `
<div class="modal fade" id="AlertModal" tabindex="-1" role="dialog" aria-labelledby="AlertModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="AlertModalLabel"></h5>
<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">
</div>
</div>
</div>
</div> <!-- <--------- -->
`,
button_html(button_name) {
/*
var button_cancel = "<button type="
button " class="
btn btn - outline - danger " data-dismiss="
modal ">Cancel</button>";
var button_save = "<button type="
submit " class="
btn btn - outline - primary spinner " >Save</button>";
var button_ok = "<button type="
button " class="
btn btn - outline - primary " data-dismiss="
modal ">Ok</button>";
var button_close = "<button type="
button " class="
btn btn - outline - primary " data-dismiss="
modal ">Close</button>";
switch (button_name) {
case "cancel":
button_cancel;
break;
case "save":
button_save;
break;
case "ok":
button_ok;
break;
case "close":
button_close;
break;
default:
button_name;
}
THE ABOVE CODE IN THIS COMMENT IS ALL GIBBERISH AND IS NOT CORRECT */
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
I'm trying to make a multi-page modal like this one (last button): https://www.ngzhian.com/multi-step-modal/
but I'm getting only this html when I run the script. What am I missing here?? I dont get any error.
var testCaseNames = ['test', 'test2'];
//Modal
var testCaseNames = ['test', 'test2'];
//Modal
var modal = '<form class="modal multi-step" id="creationModal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">';
//Progress
modal += '<div class="m-progress"><div class="m-progress-bar-wrapper"><div class="m-progress-bar"></div><div class="m-progress-stats"><span class="m-progress-current"></span>/<span class="m-progress-total"></span></div><div class="m-progress-complete">Completed</div></div>';
$.each(testCaseNames, function(key, value) {
//Headers
$('.modal-header').html('<h4 class="modal-title step-' + key + ' data-step="' + key + '"</h4>');
//Body
modal += '<div class="modal-body step-' + key + '" data-step="' + key + '">' + value + '</div>';
// //Footer Buttons
modal += '<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div>';
modal += '</div></div></form>';
});
$('#modalDiv').empty().html(modal);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="modalDiv">
<form class="modal multi-step in" id="creationModal" style="display: block; padding-right: 17px;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title step-0" data-step="0"> </h4></div>
</div>
</div>
</form>
</div>
Errors occur when changing the innerHTML of elements many times at the same function. Try calling .html() once, like you did at this line $('#modalDiv').empty().html(modal);
Instead of this line $('.modal-header').html('...');, keep adding html text in the modal variable.
I have 3 modals that all have the same format and are activated by different onclicks (Create Contact, Update Contact, Delete Contact). I am wanting the modal-title and modal-body to change depending on which button was clicked. How would I go about creating a function that appends the modal content depending on which button was clicked? Thank you for your help!
<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-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Contact Created!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
</div>
</div>
</div>
I have written the JavaScript "BootstrapModel" class for the same purpose.
It also depends on jQuery so don't forget to embed jQuery before using this class.
class is :
var BootstrapModal = (function (options) {
var defaults = {
modalId: "#confirmModal",
btnClose: "#btnClose",
title: "Confirm",
content: "Some bootstrap content",
onClose: function () {
},
onSave: function () {
}
};
defaults = options || defaults;
var $modalObj = $(defaults.modalId);
var hideModal = function () {
$modalObj.modal("hide");
};
var showModal = function () {
$modalObj.modal("show");
};
var updateModalTitle = function (title) {
defaults.title = title;
//$($modalObj).find(".modal-title").eq(0).html(title);
$modalObj.find(".modal-title").eq(0).html(title);
};
var updateModalBody = function (content) {
defaults.content = content;
$modalObj.find(".modal-body").eq(0).html(content);
};
return {
getDefaults: function () {
return defaults;
},
hide: function () {
hideModal();
},
show: function () {
showModal();
},
updateTitle: function (title) {
updateModalTitle(title);
return this;
},
updateBody: function (body) {
updateModalBody(body);
return this;
}
}
});
Usage :
var emailModal = new BootstrapModal({modalId: "#confirmModal"});
emailModal.updateTitle("Mail sent successfully").updateBody("<br/>This box will automatically close after 3 seconds.").show();
// Hide the Modal
emailModal.hide();
HTML Structure for the Modal:
<div class="modal fade" id="confirmModal" role="dialog" aria-labelledby="thankyouModal" aria-hidden="true" style="overflow-y: hidden;">
<div class="modal-dialog" style="padding-top: 225px">
<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="thankyouModal">Thank you</h4>
</div>
<div class="modal-body">
Thank you. We'll let you know once we are up.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The way I got around this is by loading the data in from external files. So you'd have your initial declaration of your modal box (just the surrounding div), and then in each file you have the containing code for the rest of the modal, then use a bit of jQuery to fire them off:
HTML (in main file)
<div class="modal" id="modal-results" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>
JQuery
$('#create-contact').click(function(){
e.preventDefault();
$("#modal-results").html('create-contact.html');
$("#modal-results").modal('show');
});
I have a windowTemplateUrl for my modal as follow
<div tabindex="-1" role="dialog" class="modal fade" ng-class="{in: animate}" ng-style="{'z-index': 1050 + index*10, display: 'block'}" data-ng-click="close($event)">
<div class="modal-dialog" ng-class="{'modal-sm': size == 'sm', 'modal-lg': size == 'lg'}">
<div class="modal-content square-btn">
<div class="modal-header custom-modal-header square-btn">
<button type="button" class="close" data-dismiss="modal" ng-click="cancel($event)">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h3 class="modal-title">{{modalTitle}}--</h3>
</div>
<div class="modal-body" modal-transclude>
</div>
</div>
</div>
</div>
And my js code is as follow
$modal.open({
windowTemplateUrl: 'templates/common/modal.html',
templateUrl: 'templates/jobs/create-job-modal.html',
resolve: {
modalTitle: function(){
return 'Create new position';
}
},
controller: ['$scope', 'modalTitle', function( $scope, modalTitle ) {
$scope.modalTitle = modalTitle;
}]
});
But it seems that my scope is not accessible from modal.html template. But i can access it from create-job-modal.html template. I need it inside modal.html.
How can i achieve this. Thanks in advance
It is kind of counter-intuitive but the scope of the controller is actually the parent scope of the windowTemplate.
So you can access modalTitle by doing $parent.modalTitle in your windowTemplate.