I'm currently building a webapp in MVC C#. I want to open a popup window, where the user can enter lots of information, so he can make a new 'user'. However I have trouble making the window actually pop up. Later on, I'd also like to close the window, though I doubt that'll be much trouble after I got this. Below is my code so far:
<button class='btn btn-lg btn-default giveMeSomeSpace leaveMeAlone createUser dialog' onclick='createNewApplication()'>Create a new application</button>
<div class="modal" id="modal-new-app" tabindex="-1" role="dialog" aria-labelledby="modal-new-app" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
...
<div class="modal-body">
</div>
</div>
</div>
</div>
...
function createNewApplication() {
$.ajax({
url: '#Html.Raw(#Url.Action("Create", "User"))',
success: function (data) {
$("#modal-body").html(data);
},
cache: false
});
$('#modal-new-app').modal('show');
}
EDIT: corrected a typo, though that wasn't the error. Additionally, the error I get in Console of Chrome dev tools:
Uncaught TypeError: undefined is not a function
referring to
$('#modal-new-app').modal('show');
My and my college have been looking and we got it working.
<div class="modal" id="modal-new-app" tabindex="-1" role="dialog" aria-labelledby="modal-new-app" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close cancel" data-dismiss="modal"><span aria-hidden="true">×</span>
<span class="sr-only">Close</span></button>
<h4 class="modal-title">Create a new user</h4>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
.
$(document).ready(function () {
createNewApplication();
$('#tableApps').DataTable();
});
function createNewApplication() {
$.get('#Html.Raw(#Url.Action("Create", "UserIS"))', function (data) {
$('#modal-new-app .modal-body').html(data);
});
}
Related
When I make an ajax call, I show my modal (options.beforeSend). But, when I get an ajax result error (options.error) I would like to hide this modal. I've tryied but no success.
Index.cshtml
#* Modal - load spin *#
<div class="modal fade" id="itemLoader" tabindex="-1" role="dialog" aria-labelledby="ModalLabel2" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
</div>
<div class="modal-body d-inline text-center">
<div class="spinner-border spinner-border-sm text-info" role="status">
<span class="sr-only small"></span>
</div>
<span class="far fa-dizzy fa-3x text-secondary" style="display:none;"></span>
<label id="ModalStatus">Loading...</label>
</div>
</div>
</div>
</div>
Before send I toggle/show the modal:
options.beforeSend = function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
// My modal (works fine)
$('#itemLoader').modal('toggle');
$('#itemLoader').modal('show');
};
options.success = function (data) {
if (data.idOrder!= null) {
window.location.href = "/app/order/order?Id=" + data.idOrder;
}
};
If error (after a partial view return, from ModelState is not valid), I am trying to hide the modal, but I can't:
options.error = function (res) {
// When my modelState is not valid, return partial view with required messages (working fine)
$('#chkForm').html(res.responseText);
// But I can't hide the modal (does not work)
var modal = $("#itemLoader");
modal.hide();
// hide modal (does not work)
$('#itemLoader').modal('hide');
$('#itemLoader').hide();
};
I have tryied the close button on modal, but no sucess as well:
<button id="btnclosemodal" class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
// Does not work
$('#btnclosemodal').click();
// Does not work
$("#btnclosemodal").trigger("click");
error function will be called if the request fails. I think here it will not enter the error function since it return the partial view normally. You can use f12 and debug it in the source tab.
Instead, I think you should hide the modal in the success function.
You can try to toggle the modal on error, like this:
$('#itemLoader').modal('toggle');
I want to pop up my div class that contains user at password text box but nothings happen and I test also my function if its running correctly that's why I put alert in my function. This my code bellow. I try so many solution and yet still not show my div. Can any give me a best solution regarding this matter or other way to pop up the web form without leaving my current page.
#model TBSWebApp.Models.User
#{
ViewBag.Title = "UserLogin";
Layout = "~/Layout/_webLayout.cshtml";
}
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<div>
<fieldset>
<div class="container">
<div class="row">
<div class="col-xs-12">
<button id="btnShowModal" type="button" class="btn btn-sm btn-default pull-left col-lg-11 button button4">
Sign-in
</button>
<div class="modal fade" tabindex="-1" id="loginModal" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">Satya Login</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input class="form-control" type="text" placeholder="Login Username" id="inputUserName" />
</div>
<div class="form-group">
<input class="form-control" placeholder="Login Password" type="password" id="inputPassword" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary button button4">Sign</button>
<button type="button" id="btnHideModal" class="btn btn-primary button button4">
Hide
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
<footer>
<p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">
©
<script>document.write(new Date().toDateString());</script>
</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
//$(document).ready(function () {
$("#btnShowModal").click(function () {
alert("test");
$("#loginModal").modal('show');
});
$("#btnHideModal").click(function () {
$("#loginModal").modal('hide');
});
// });
</script>
I already solved my problem
<script>
$(document).ready(function () {
$("#submitButton").click(function () {
if (($("#userNameTextBox").val() != "") && ($("#passwordTextBox").val() != ""))
$.ajax(
{
type: "POST", //HTTP POST Method
url: "UserLogin/UserLogin", // Controller/View
dataType: "text/html",
data:
{ //Passing data
UserID: $("#userNameTextBox").val(),
Password: $("#passwordTextBox").val(),
}
});
});
});
//$(document).ajaxStart(function () { $("#loadingImg").show(); });
//$(document).ajaxStop(function () { $("#loadingImg").hide(); });
</script>
Here i have cshtml and js ajax .. I have two sites ..First site opened the popup modal ...Another site not opened the popup modal why?.
<div class="modal fade bs-example-modal-lg" id="addNote" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-large">
<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"> Notes for <span id="noteTitle">#Model.TitleName</span></h4>
</div>
</div>
</div>
<span class="float-right btn" id="btnnote" onclick="openAuthNotePopup();" style="padding:0px;"><img title="Add Note" width="25" height="25" alt="Add Note" src='#Url.Content("~/Content/images/sticky-note2.png")' /></span>
function openAuthNotePopup() {
var memberNotesUrl = '#(Url.Action("CreateNote", "Notes", new { area = AreaName.Notes}))' + "?modulePageID=" + '#((int)Enums.Page.NoteAuthorizations)' + "&id=" + '#(Model.AuthorizationID)' + "&memberOrProviderID=" + '#(Model.MemberID)' + "&titleName=" + '#(titleName)';
$("#divNotes").html("");
$.ajax({
type: 'GET',
url: memberNotesUrl,
success: function (data) {
$("#divNotes").html(data);
$('#addNote').modal()
$('#addNote').modal('show')
}
});
}
I have input form in Bootstrap model popup. I want to show error message in div when submit button for saving. My model popup is in update panel. I am trying to do and its not working.
<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-hidden="true">×</button>
<h4 class="modal-title">SMTP Configuration</h4>
</div>
<div class="modal-body">
Here is a input form
<div id="ErrorDiv" class="required" runat="server">
This is a div where i want to show content
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<asp:Button ID="btnEdit" runat="server" Text="Save" OnClick="Save" class="btn btn-success" ValidationGroup="Group1" />
</div>
</div>
</div>
</div>
Below is the server side method to show content.
public void ShowError(string Message)
{
ErrorDiv.InnerHtml = Message;
upModal.Update();
}
How can I show error content to div?
To open error model popup from Server side.
You need to update your Server side function ShowError to this.
public void ShowError(string Message)
{
ErrorDiv.InnerHtml = Message;
upModal.Update();
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "ErrorModel", "$('#myModal').modal('show');", true);
}
for this you have to put the div with id myModal, into update panel.
This will trigger jQuery function on Client side after server side execution complete and the model open manually.
Other way to do this
If you don't want to put model div into update panel then follow this way.
Update your Model div like below
<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-hidden="true">×</button>
<h4 class="modal-title">SMTP Configuration</h4>
</div>
<div class="modal-body">
Here is a input form
<div id="ErrorDiv" class="required">
This is a div where i want to show content
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
</div>
</div>
Add JavaScript function as below into aspx file.
function showError(error){
$("#ErrorDiv").html(error);
$('#myModal').modal('show');
}
And call the JavaScript function from server side like this
public void ShowError(string Message)
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "ErrorModel", "ShowError('"+Message+"');", true);
}
Here, you can explore more about ScriptManager.RegisterStartupScript Method
I'm creating a modal using twitter bootstrap in my application.creating a modal on onclick event
It is working fine in firefox and chrome. but while running my application in ie8, inside that modal NewPage.aspx page is not getting viewed properly.
here is my code :
<div id="MyModal" class="modal hide in">
<div class="modal-dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
<h3 id="myModalLabel">
Header</h3>
</div>
<div class="modal-content">
<div class="modal-body">
<iframe id="modal-frame" src="" style="zoom: 0.60; position: relative;" frameborder="0"
height="450" width="850"></iframe>
</div>
</div>
</div>
</div>
<button modalurl="~/NewPage.aspx" id="lnkNewModal" onclick="openMyModal(this);"
runat="server">Modal</Button>
function openMyModal(curObj) {
$("#MyModal").modal({
"backdrop": "static",
"keyboard": true,
"show": true
});
var url = $(curObj).data("modalurl");
$('#MyModal').on('show', function () {
$('#modal-frame').attr("src", url);
});
$('#MyModal').modal({ show: true });
}
Thank you all in advance for your response.
You have a slight error in the Javascript code
function openMyModal(curObj) {
var url = $(curObj).attr("modalurl"); //Note here
$('#MyModal').on('show', function () {
$('#modal-frame').attr("src", url);
});
$("#MyModal").modal({
"backdrop": "static",
"keyboard": true,
"show": true
});
}
this works perfectly , Cheers!!!