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">
Related
Here's a picture of the current output:
output image
I'm trying to have it show the active title when you click download, and not every entry.
I'm also trying to have it show the download file(s) name instead of static text, or the URL.
The JS code that loads the titles is:
(function($){
var titledbApp = angular.module('dsshop', ['angular-loading-bar'])
.config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
cfpLoadingBarProvider.includeSpinner = false;
cfpLoadingBarProvider.parentSelector = '#loading-bar-container';
}]);
titledbApp.controller('TitleListController', function TitleListController($scope, $http) {
$http.get('https://nitrobrew.github.io/BrewShopNitro/list0.json').then(function(response){
$scope.titles = response.data.sort(function(a, b){
if(a.name.toUpperCase() < b.name.toUpperCase()) return -1;
if(a.name.toUpperCase() > b.name.toUpperCase()) return 1;
return 0;
});
});
});
//Filesize filter, credit to https://gist.github.com/yrezgui/5653591
titledbApp.filter( 'filesize', function () {
var units = [
'bytes',
'KB',
'MB',
'GB',
'TB',
'PB'
];
return function( bytes, precision ) {
if ( isNaN( parseFloat( bytes )) || ! isFinite( bytes ) ) {
return '?';
}
var unit = 0;
while ( bytes >= 1024 ) {
bytes /= 1024;
unit ++;
}
return bytes.toFixed( + precision ) + ' ' + units[ unit ];
};
});
})();
The HTML code that loads the modal box (bootstrap modal) is:
<div class="modal fade" id="downloadModal" tabindex="-1" role="dialog" aria-labelledby="downloadModalLabel">
<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" ng-repeat="title in titles">
<center>{{title.name}} download menu</center>
</h4>
</div>
<div class="modal-body">
<a ng-href="{{title.files[0].url}}" title="{{title.files[0].url}}"
ng-repeat="title in titles">File 1</a>
<br>
{{title.files[1]}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-blue" data-dismiss="modal"
data-toggle="tooltip">Cancel</button>
</div>
</div>
</div>
</div>
Any help is greatly appreciated!
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);
});
});
I am having multiple div's which trigger modal and I am passing data-pic-id to take actions accordingly when some button inside modal is clicked. The issue is when I pass data attribute to modal using on('show.bs.modal', function(e) and get its value from associated target using var picId = $(e.relatedTarget).data('pic-id'); its fine till here but now there are two buttons inside modal when I pass the picId to their onclick events I get unexpected results its not the same as of picId outside their events and represent someother id.
HTML:
<div class="photo_border" data-pic-id="1" data-toggle="modal" data-target="#camera_picker">
<div class="photo_border" data-pic-id="2" data-toggle="modal" data-target="#camera_picker">
<div class="photo_border" data-pic-id="3" data-toggle="modal" data-target="#camera_picker">
<div class="photo_border" data-pic-id="4" data-toggle="modal" data-target="#camera_picker">
<div class="photo_border" data-pic-id="5" data-toggle="modal" data-target="#camera_picker">
<div id="camera_picker" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<p id="cam_disclaimer"></p>
<button type="button" id="camera_btn" class="btn btn-default"><span class="glyphicon glyphicon-camera" aria-hidden="true"></span> Camera</button>
<button type="button" id="gallery_btn" class="btn btn-default"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span> Gallery</button>
</div>
<div class="modal-footer">
<button type="button" id="cancel_btn" class="btn btn-default" data-dismiss="modal"></button>
</div>
</div>
</div>
JS
$('#camera_picker').on('show.bs.modal', function(e) {
var picId = $(e.relatedTarget).data('pic-id');
var title = "";
alert("start "+picId);
switch(picId) {
case 1:
title = app.getDic().main_image;
break;
case 2:
title = app.getDic().front_image;
break;
case 3:
title = app.getDic().side_image;
break;
case 4:
title = app.getDic().back_image;
break;
case 5:
title = app.getDic().interior_image;
break;
case 6:
title = app.getDic().wheel_image;
break;
default:
title ="";
}
//get data-id attribute of the clicked element
$(e.currentTarget).find('.modal-title').text(title);
//populate the textbox
$(e.currentTarget).on('click', 'button#gallery_btn', function(e) {
console.log('gallery');
/**
* Issue is here
**/
alert("currentTarget "+picId);
$('#camera_picker').modal('hide');
$('.modal-backdrop').remove();
});
$(e.currentTarget).on('click', 'button#camera_btn', function(e) {
console.log('camers');
/**
* Issue is here
**/
alert("currentTarget "+picId);
$('#camera_picker').modal('hide');
$('.modal-backdrop').remove();
});
});
Edit:
Cleaned Js from extra stuff..
According to the Jquery documentation you need to pass picId as event.data.
try this way:
$(e.currentTarget).on('click','button#gallery_btn',{'picId':picIdGlobal},function(e){
alert("currentTarget "+e.data.picId);
});
I have some modal forms to complete some fields, in this case I have 2 modal forms, 1 for Jury and 1 for Contact, when I press 'Add' link, in both cases works fine, but the problem is when I want to edit contact.
When I press Edit in both cases I call controller to complete the Java form and then, return to view and simulate a click in "Add" button with JQuery. In jury case works fine, but in Contact I only get a dark screen (like if modal works), but modal window never appear. Other problem is, when I press Edit button in Jury and then close the jury modal form, when I press Edit in Contact it launch the jury modal form...
Contact Modal and Add link (Edit link doesn't works)
<div class="row margin-top-10">
<div class="col-xs-2 col-md-2 col-md-push-10">
<a id="btnAddCForm" href="#modal-cForm-form" data-toggle="modal" class="btn fpa btn-block pull-right">AÑADIR NUEVO</a>
</div>
</div>
<div id="modal-cForm-form" class="modal fade" tabindex="-1" aria-hidden="true">
<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">Nuevo/Editar Forma de contacto</h4>
</div>
<div class="modal-body">
<div class="scroller" style="height:390px" data-always-visible="1" data-rail-visible1="1">
Some fields
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn default">CANCELAR</button>
<button type="button" onclick="addContactForm();" class="btn fpa">ACEPTAR</button>
</div>
</div>
</div>
</div>
Jury Modal and Add link (Works fine)
<div class="row margin-top-10">
<div class="col-xs-2 col-md-2 col-md-push-10">
<a id="btnAddJurado" href="#modal-jury-form" data-toggle="modal" class="btn fpa btn-block pull-right">AÑADIR NUEVO</a>
</div>
</div>
<div id="modal-jury-form" class="modal fade" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="resetValues();"></button>
<h4 class="modal-title">Nuevo/Editar Jurado</h4>
</div>
<div class="modal-body">
<div class="scroller" style="height:300px" data-always-visible="1" data-rail-visible1="1">
Some Fields
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" onclick="resetValues();" class="btn default">CANCELAR</button>
<button type="button" onclick="addJury();" class="btn fpa">ACEPTAR</button>
</div>
</div>
</div>
</div>
Onload (In main html document)
window.onload = function () {
/*<![CDATA[*/
var idJuryAux = /*[[${person.juryAux.id}]]*/
null;
var idContactFormAux = /*[[${person.contactFormAux.id}]]*/
null;
/*]]>*/
var idProvincia = $('#provinceField').val();
var idPais = $('#countryField').val();
if (idPais == '-1') {
$('#provinceField').attr("readonly", true);
} else {
$('#provinceField').attr("readonly", false);
}
if (idProvincia == '-1') {
$('#cityField').attr("readonly", true);
} else {
$('#cityField').attr("readonly", false);
}
if (idJuryAux != null) {
/*<![CDATA[*/
var idCat = /*[[${person.juryAux.category}]]*/
null;
var idCargo = /*[[${person.juryAux.juryType}]]*/
null;
var catName = /*[[${person.juryAux.categoryName}]]*/
null;
var cargoName = /*[[${person.juryAux.juryTypeName}]]*/
null;
/*]]>*/
$('#btnAddJurado').trigger('click');
$("#categoryField").select2('data', {
id: idCat,
text: catName
});
$("#juryTypeField").select2('data', {
id: idCargo,
text: cargoName
});
}
if (idContactFormAux != null) {
/*<![CDATA[*/
var idType = /*[[${person.contactFormAux.type}]]*/
null;
var typeName = /*[[${person.contactFormAux.typeName}]]*/
null;
var idTag = /*[[${person.contactFormAux.tag}]]*/
null;
var tagName = /*[[${person.contactFormAux.tagName}]]*/
null;
var idPais = /*[[${person.contactFormAux.country}]]*/
null;
var paisName = /*[[${person.contactFormAux.countryName}]]*/
null;
var idProvincia = /*[[${person.contactFormAux.province}]]*/
null;
var provName = /*[[${person.contactFormAux.provinceName}]]*/
null;
var idCity = /*[[${person.contactFormAux.city}]]*/
null;
var cityName = /*[[${person.contactFormAux.cityName}]]*/
null;
var idInst = /*[[${person.contactFormAux.institution}]]*/
null;
var instName = /*[[${person.contactFormAux.institutionNme}]]*/
null;
/*]]>*/
$('#btnAddCForm').trigger('click');
$("#typeField").select2('data', {
id: idType,
text: typeName
});
$("#tagField").select2('data', {
id: idTag,
text: tagName
});
$("#countryField").select2('data', {
id: idPais,
text: paisName
});
$("#provinceField").select2('data', {
id: idProvincia,
text: provName
});
$("#cityField").select2('data', {
id: idCity,
text: cityName
});
$("#institutionField").select2('data', {
id: idInst,
text: instName
});
}
}
P.S. addJury(); and addContactForm(); only closes modal window, both works fine!
EDIT: I'm still waiting for a response...
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');
});