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);
});
});
Related
I create a modal and inside I insert an input field. When I write inside this input field a product name term, it must appear all the terms.
On blank page, I can see for ap (apple terms) all the apple products, no problem my ajax works fine
Now inside a page with some html element, I call a modal when there is my input fields. In this case, the ajax complexion does not work and inside the console log / result, I see my input field and not the result about my request.
I do not understand where my error below the result with a picture.
My modal call : works very fine
<!-- Link trigger modal -->
<div class="row">
<div class="col-md-12">
<div class="form-group row">
<label for="<?php echo $this->getDef('text_select_products'); ?>" class="col-5 col-form-label"><?php echo $this->getDef('text_select_products'); ?></label>
<div class="col-md-5">
<a
href="<?php echo $this->link('SelectPopUpProducts'); ?>"
data-bs-toggle="modal" data-refresh="true"
data-bs-target="#myModal"><?php echo '<h4><i class="bi bi-plus-circle" title="' . $this->getDef('icon_edit') . '"></i></h4>'; ?></a>
<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-body">
<div class="te"></div>
</div>
</div> <!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
</div>
</div>
</div>
<script src="<?php echo this->link('modal_popup.js'); ?>"></script>
now my modal with the field displayed
<div class="col-md-12">
<div class="form-group row">
<label for="<?php echo $this->getDef('text_products_name') ; ?>" class="col-5 col-form-label"><?php echo $this->getDef('text_products_name') ; ?></label>
<div class="col-md-7">
<?php echo HTML::inputField('products_name', '', 'id="ajax_products_name" list="products_list" class="form-control"'); ?>
<datalist id="products_list"></datalist>
</div>
</div>
</div>
<?php $products_ajax = $this->link('ajax/products.php'); ?>
<script>
window.addEventListener("load", function(){
// Add a keyup event listener to our input element
document.getElementById('ajax_products_name').addEventListener("keyup", function(event){hinterManufacturer(event)});
// create one global XHR object
// so we can abort old requests when a new one is make
window.hinterManufacturerXHR = new XMLHttpRequest();
});
// Autocomplete for form
function hinterManufacturer(event) {
var input = event.target;
var ajax_products_name = document.getElementById('products_list'); //datalist id
// minimum number of characters before we start to generate suggestions
var min_characters = 0;
if (!isNaN(input.value) || input.value.length < min_characters ) {
return;
} else {
window.hinterManufacturerXHR.abort();
window.hinterManufacturerXHR.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse( this.responseText );
ajax_products_name.innerHTML = "";
response.forEach(function(item) {
// Create a new <option> element.
var option = document.createElement('option');
option.value = item.id + ' - ' + item.name;//get name
option.hidden = item.id; //get id
ajax_products_name.appendChild(option);
});
}
};
window.hinterManufacturerXHR.open("GET", "<?php echo $products_ajax ; ?>?q=" + input.value, true);
window.hinterManufacturerXHR.send()
}
}
</script>
Addedd js open modal
$( document ).ready(function() {
$("#myModal").on("show.bs.modal", function(e) {
const link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("href"));
});
});
there the screen shot of the result.
console result
Maybe the event keyup never fires because the input ajax_products_name doesn't exists until shown.bs.modal event is fired.
Try:
$("#myModal").on("shown.bs.modal", function(ev) {
document.getElementById('ajax_products_name').addEventListener("keyup", function(event) {
hinterManufacturer(event)
});
})
Let's set up an example
$('#exampleModal').on('shown.bs.modal', function() {
// $('#myInput').trigger('focus')
console.log("modal opened, *now* can addEventListener to stuff within modal")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- 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">Modal title</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">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Anyway, The idea is to do the addEventListener on the ajax_products_name only after it's loaded. So given your new snippet, try this:
// instead of
$(this).find(".modal-body").load(link.attr("href"));
// do:
$(this).find(".modal-body").load(link.attr("href"), function(responseTxt, statusTxt, xhr) {
if (statusTxt == "success") {
// now that modal is opened AND content loaded
document.getElementById('ajax_products_name').addEventListener("keyup", function(event) {
hinterManufacturer(event)
})
}
});
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 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 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>