OK, so, I have a modal with some form, that should save changes on Save button, but dismiss them on Close button. Save works fine, but Close doesn't dismiss changes.
Here's how the modal opens:
<i class="glyphicon glyphicon-file semi-transparent" data-ng-class="{'semi-transparent': !test.text}" data-toggle="modal" data-target="#testModal"></i>
Here's the modal:
<div class="modal fade " id="testModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Text</h4>
</div>
<div class="modal-body">
<textarea class="form-control ng-pristine ng-valid ng-touched" rows="9" style="margin-top: 15px;" data-ng-model="test.text"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-blue" data-dismiss="modal" data-ng-click="save()">Save changes</button>
</div>
</div>
</div>
Is there a way to dismiss changes on Close, using data-target to open a modal?
When you make changes in your textarea, it's saved in your model text.text, it's the two-way binding of Angular.
So you will have to add a ng-click="cancel()" on the close button :
<button type="button" class="btn btn-default" data-dismiss="modal" data-ng-click="cancel()">Close</button>
And reset your $scope.test.text value to the previous state in that function.
Try this
<button type="button" class="close" data-dismiss="testModal">
Related
I've some problem with a bootbox confirm dialog, when it shows up it's as
I'm using this inside a metronic 8.1 template and invoking it as
bootbox.confirm({
size: "small",
message: "Are you sure?",
callback: function (result: boolean) {
if (result) {
_this.spinner.show();
_this.dataOwnerService.deleteData(item.id).subscribe(() => {
_this.notifyService.showSuccess("Item deleted successfully.", "Success");
_this.refresh();
},
() => {
_this.notifyService.showError(
'Error while deleting item.',
'Unable to delete.'
)
}, () => {
_this.spinner.hide();
})
}
}
});
As far as I've read there's no way to customize the button, and even on the homepage of the library there's no style loaded, but it appears on the right and correctly rendered
What can I check?
Thanks
Kinda of old question, but: you'll see that when using Bootbox with Bootstrap 5 - the v5 version of Bootbox doesn't generate a modal with the updated Bootstrap 5 classes and content.
Basically, what Bootstrap 5 wants:
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</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>
versus what we create:
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="bootbox-close-button close" aria-hidden="true">×</button>
<div class="bootbox-body">Hello world!</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary bootbox-accept">OK</button>
</div>
</div>
</div>
</div>
I do have a work-in-progress update that addresses this, if you're okay with prerelease versions: https://github.com/makeusabrew/bootbox/tree/v6-wip
We (meaning I) have pushed out a v6 version of Bootbox that should work as intended with Bootstrap 6. Please note that while Bootstrap no longer requires jQuery, Bootbox still does.
I have a edit page like this
i have a comment button in this page,which is a modal form ,where users can leave their comment
when i submit the Comment form,the entire page is reloading and im losing the edit page content.
Im handling edit page content and comment box in two different forms.
So when i submit the comment form,the modal should open as it is and also the edit page content should not be gone.
This is my modal
<div class="modal modal_outer right_modal fade" id="information_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
<div class="modal-dialog" role="document">
<div class="modal-content ">
<div class="modal-header bg-warning" style="height:50px;padding:10px 5px;font-family:'Delivery';">
<h4 class="modal-title">Comments:</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body get_quote_view_modal_body">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100">
<h5><i class="fas fa-user"></i> User 1</h5>
<small class="ml-auto">1 days ago</small>
</div>
<p>This is for testing.Please ignore this.</p>
</a>
</div>
<form asp-page-handler="SubmitChat">
<div class="form-group mt-2">
<label for="TxtAreaChatBox"><b>Leave Your Comments</b></label>
<textarea asp-for="RequestChatBox.Comments" class="form-control" id="TxtAreaChatBox" rows="4"></textarea>
<input id="hdnCommentReqID" type="hidden" asp-for="RequestChatBox.RequestID" value='#Request.Query["RequestID"]' />
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-danger" data-dismiss="modal"><i class="fas fa-window-close mr-2"></i> Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
------------Edited-------------------
<!---COMMENT BOX STARTS HERE-->
<div class="modal modal_outer right_modal fade" id="information_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
<div class="modal-dialog" role="document">
<div class="modal-content ">
<div class="modal-header bg-warning" style="height:50px;padding:10px 5px;font-family:'Delivery';">
<h4 class="modal-title">Comments:</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body get_quote_view_modal_body">
<div class="list-group">
#if (Model.ShowRequestChatBox != null){
#foreach (var item in Model.ShowRequestChatBox)
{
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100">
<h6><i class="fas fa-user"></i> <i>#Html.DisplayFor(modelItem => item.CommentedUser)</i></h6>
<small class="ml-auto">#Html.DisplayFor(modelItem => item.LastModifiedTimeStamp)</small>
</div>
<p>#Html.DisplayFor(modelItem => item.Comments)</p>
</a>
}
}
</div>
<form asp-page-handler="SubmitChat" data-ajax="true" data-ajax-method="post" data-ajax-complete="Completed">
<div class="form-group mt-2">
<label for="TxtAreaChatBox"><b>Leave Your Comments</b></label>
<textarea asp-for="RequestChatBox.Comments" class="form-control" id="TxtAreaChatBox" rows="4"></textarea>
<input id="hdnCommentReqID" type="hidden" asp-for="RequestChatBox.RequestID" value='#Request.Query["RequestID"]' />
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-danger" data-dismiss="modal"><i class="fas fa-window-close mr-2"></i> Cancel</button>
<button type="submit" id="BtnChatSubmit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--COMMENT BOX ENDS HERE-->
Javascript
function Completed(event) {
if (event.responseText != "") {
alert("Some Error Has Occured.Please Check Your Entered Values.");
} else {
alert("Your Comment Has Been Added Successfully");
}
}
Thanks,
Teena
im new at using laravel 8, im following this tutorial tu create an ADD button with the modal but seems like the difference in version of laravel cause the problem where nothing happenned when i clicked on the ADD button. i'm following this video tutorial https://www.youtube.com/watch?v=rQ4m6xe5wGM&list=PLRheCL1cXHrvJvoJ68PXdJr5tr5Aob2-c&index=9
this is the code from the getbootstrap that i copied from the website. the step is just the same as the tutorial but mine doesnt popout
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="#getbootstrap">Open modal for #getbootstrap</button>
<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">New message</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="mb-3">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
if you want to popup a bootstrap modal when clicking a button in bootstrap version 4
use data-target attribute like this data-target="#exampleModal" pass an id with a hashtag .then you can make a popup that modal when button click pass that id in modal class id attribute id="exampleModal"
<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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<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>
I am trying to use bootstrap 4 modal plugin only.
I linked the JQuery first & then the JS file of plugin found in bootstrap/js/dist/modal.js in their Github repo.
After including modal.js it gives me this error in console on page refresh & i am unable to use bootstrap modal.
Uncaught TypeError: Cannot read property 'on' of undefined
Here's my modal HTML
<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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<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>
Including JQuery & Modal.js above the </body> tag
<script src="js/vendors/jquery.min.js"> </script>
<script src="js/vendors/modal.js"> </script>
</body>
</html>
I have been trying to make this work but the submit button is not working at all.
The bootstrap modal window I am using is:
<div class="modal fade" id="search" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4><span class="fa fa-search"></span> Search Anything...</h4>
</div>
<form name='searchdata' action="webarch/search.php" method="post" id="form1">
<div class="modal-body">
<div class="input-with-icon success-control">
<input type="text" class="form-control" id="form1Amount" name="searchvalue" placeholder="Search in users or #hashtags"><br/>
<button type="submit" name='user_search' form="form1" id="user_search" value='user' class="btn btn-danger btn-cons"><i class="fa fa-user"></i> User</button>
<button type="submit" name='tag_search' form="form1" value='tag' class="btn btn-default"><i class="fa fa-tag"></i> Tags</button>
</div>
</div>
</form>
</div>
</div>
Whenever I click the submit buttons, nothing happens and the form doesn't post the values.
Let me know how to make this work.
Try this using javascript. It worked for me:
<form name='searchdata' id="search_form" action="search.php" method="get">
<div class="input-with-icon success-control">
<input type="text" class="form-control" id="form1Amount" name="searchvalue" placeholder="Search in users or #hashtags"><br/>
</div>
<button onclick="form_submit()" name='user_search' value='user' class="btn btn-danger"><i class="fa fa-user"></i> User</button>
<button onclick="form_submit()" name='tag_search' value='tag' class="btn btn-default"><i class="fa fa-tag"></i> Tags</button>
</form>
<script type="text/javascript">
function form_submit() {
document.getElementById("search_form").submit();
}
</script>
Submit button is not in the form. Place form="modal-details" to the button, which is form id. You should not have data-dismiss="modal" on submit button, which is a bootstrap handler for closing the modal box. It is working for me.
<div class="modal fade" id="filterModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Client Filter</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form asp-action="Details" asp-controller="Client" method="get" id="modal-details">
<div class="form-group">
<label for="recipient-name" class="col-form-label">Branch:</label>
<select asp-for="NetworkUnitId" class="custom-select form-control">
<option value="0">All</option>
#foreach (var client in classifierService.GetClients())
{
<option value="#client.Id">#client.Name</option>
}
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" form="modal-details">Search</button>
</div>
</div>
</div>
</div>
You have not mentioned modal-content here. I think that's why you may be getting the error.
<button type="button" class="btn btn-primary" data-target="#search" data-toggle="modal" name="button">modal</button>
<div class="modal fade" id="search" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<div class="modal-title">
<a class="close" data-dismiss="modal">×</a>
<h4><span class="fa fa-search"></span> Search Anything...</h4>
</div>
</div>
<form name='searchdata' action="webarch/search.php" method="post" id="form1">
<div class="modal-body">
<form class="frm-group" action="index.html" method="post">
<div class="modal-content">
<input type="text" name="" value="">
<button type="submit" name='user_search' form="form1" id="user_search" value='user' class="btn btn-danger btn-cons"><i class="fa fa-user"></i> User</button>
<button type="submit" name='tag_search' form="form1" value='tag' class="btn btn-default"><i class="fa fa-tag"></i> Tags</button>
</div>
</form>
</div>
</div>