I'm using modal bootstrap in my asp.net web site.
Since I need to modify the text according to the errors to return in the code behind I change the text value of the control before making the call but it doesn't work. Message don't change.
This my HTML:
<!-- /.modal error-->
<div id="ModalError" class="modal fade bs-example-modal-center" tabindex="-1" role="dialog" aria-labelledby="myCenterModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content alert-primary">
<div class="modal-header">
<h4 class="modal-title text-danger" id="CenterModalLabel">Errore</h4>
<i class="mdi mdi-alert-octagon-outline" style="font-size:30px"></i>
</div>
<div class="modal-body">
<asp:Label runat="server" ID="ltlErrormsg" Text="Errore"></asp:Label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-danger" data-dismiss="modal">Ok</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
function openModal() {
$('#ModalInfo').modal('show');
}
function openModalErr() {
$('#ModalError').modal('show');
}
ValidatorUpdateIsValid = function () {
Page_IsValid = AllValidatorsValid(Page_Validators);
SetValidatorStyles();
}
SetValidatorStyles = function () {
var i;
// clear all
for (i = 0; i < Page_Validators.length; i++) {
var inputControl = document.getElementById(Page_Validators[i].controltovalidate);
if (null != inputControl) {
WebForm_RemoveClassName(inputControl, 'parsley-error');
}
}
// set invalid
for (i = 0; i < Page_Validators.length; i++) {
inputControl = document.getElementById(Page_Validators[i].controltovalidate);
if (null != inputControl && !Page_Validators[i].isvalid) {
WebForm_AppendToClassName(inputControl, 'parsley-error');
}
}
}
</script>
This my code behind:
Private Sub cmdCambiaPwd_Click(sender As Object, e As EventArgs) Handles cmdCambiaPwd.Click
Dim strOldPassword As String
If txtPassword.Value = "" Then
ltlErrormsg.Text = "Compilare le password"
ScriptManager.RegisterStartupScript(Me, Me.GetType(), "Pop", "openModalErr();", True)
Exit Sub
End If
I've found problem.
Modal windows are out of an update panel in my page.
So I move them in updatepanel and work.
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)
})
}
});
I want a Modal to display all the changes made in the Edit form in ASP.NET MVC application. If user has not made any changes then Modal should not appear.
I have written JavaScript code which shows the changes but I do not think that this is the proper way to do this.
I have a Modal which opens on click of Submit button.
My JavaScript Code is:
<script type="text/javascript">
var FirstName = "#Html.Raw(ViewBag.FName)";
var LastName = "#Html.Raw(ViewBag.LName)";
var NameAddress = "#Html.Raw(ViewBag.NameAddress)";
$(document).ready(function () {
$("#btnSubmit").click(function () {
if ($("#FName").val() == FirstName && ("#LName").val() == LastName && ("#Address").val() == NameAddress ) {
alert("There is no value changed in textbox");
}
else {
alert("First Name changed from:" + FirstName + " to " + $("#FName").val());
}
});
});
</script>
Modal to display the changes:
<input type="submit" id="btnSubmit" value="Save" class="btn btn-primary" data-toggle="modal" data-target="#ListofChanges" />
<div id="ListofChanges" 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">PhoneBook Details changed from</h4>
</div>
<div class="modal-body">
<ul>
<li>
"#Html.Raw(ViewBag.FName)"
</li>
<li>
"#Html.Raw(ViewBag.LName)"
</li>
<li>
"#Html.Raw(ViewBag.NameAddress)"
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Please guide me. I got stuck in this. Thank you.
You have to use a modal method to open it up:
<script type="text/javascript">
var FirstName = "#Html.Raw(ViewBag.FName)";
var LastName = "#Html.Raw(ViewBag.LName)";
var NameAddress = "#Html.Raw(ViewBag.NameAddress)";
$(document).ready(function () {
$("#btnSubmit").click(function () {
if ($("#FName").val() == FirstName && ("#LName").val() == LastName && ("#Address").val() == NameAddress ) {
alert("There is no value changed in textbox");
}
else {
$('#ListofChanges').modal('show') // <-- HERE
}
});
});
</script>
Docs here to Modal methods
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');
});
I have problem, with knockout.js and bootstrap modal. On button click i open bootastrap modal, for creating new city. Then i submit form and save in base. Problem is because submiting works only first time. After that it doesn't work.
Here is how it look like
html file
> <!-- Modal add new city
> ==================================================-->
> <div class="modal fade" id="addCity" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
> <div class="modal-dialog">
> <form data-bind="submit: onSubmit">
> <div class="modal-content">
> <div class="modal-header">
> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
> <h4 class="modal-title">Dodaj novi grad</h4>
> </div>
> <div class="modal-body">
> <div class="input-group">
> <span class="input-group-addon">Ime grada</span>
> <input type="text" class="form-control" placeholder="Ime grada" data-bind="value : city_name">
> </div
>
>
> </div>
> <div class="modal-footer">
> <button type="button" class="btn btn-default" data-dismiss="modal">Zatvori</button>
> <button type="submit" class="btn btn-success">Sacuvaj</button>
> </div>
> </div><!-- /.modal-content -->
> </form>
> </div><!-- /.modal-dialog -->
> </div><!-- /.modal -->
js file
var viewModel = ko.computed(function()
{
var self = this;
var cities = getAllCities();
self.cities = ko.observableArray(cities);
self.city_name = ko.observable();
self.logo_path = ko.observable();
//add new city
self.onSubmit = function()
{
var data = JSON.stringify(
{
city_name : self.city_name(), logo_path : self.logo_path()
}); // prepare request data
var response = ajaxJsonPost("/services/private_service/add_city", data, false, false);
if (response.status === ResponseStatus.SUCCESS) {
$("#cityName").attr("value", "");
$('#addCity').modal('hide');
self.cities.push(data);
} else {
//handle error
}
};
});
ko.applyBindings(new viewModel());
Can you not just do an ajax request instead of a form submit? Something like:
$.ajax({
url: "/services/private_service/add_city",
data: data,
success: function (data) {
$("#cityName").attr("value", "");
$('#addCity').modal('hide');
self.cities.push(data);
}
});
Unless you have written script for this method, I'm not familiar with "ajaxJsonPost()".