I have a Bootstrap modal popup form which is opened as per button click in AngularJS, I am wondering how is it still showing even if a button is disabled.
please take a look button code below:
<a class="btn btn-sm btn-info" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false" ng-disabled="!ItemName || ItemDescription">
Submit
</a>
I have below model popup code:
<div id="modal-form-submit" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="blue bigger"> DEMO MODEL FORM </h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12 col-xs-12">
<div class="form-group">
<label class="control-label" for="toitems">To:</label>
<div class="tags full-width">
<span class="tag" ng-repeat="tag in tags">{{ tag.Description }}</span>
</div>
</div>
</div>
</div>
</div>
<hr />
<div class="modal-footer">
<button class="btn btn-sm" data-dismiss="modal">
<i class="ace-icon fa fa-times"></i>
Cancel
</button>
<button class="btn btn-sm btn-primary " ng-disabled="!ItemCode || !ItemDescription"
ng-click="SaveEntireFormData()" type="button">
<i class="ace-icon fa fa-check"></i>
Confirm
</button>
</div>
</div>
</div>
</div>
I don't want to use the jquery js, I really want to resolve this using angular js.
Just add disabled to your anchor tag class
<a class="btn btn-sm btn-info disabled" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false" ng-disabled="ItemName || ItemDescription">
The disabled attribute doesn't work for anchor tags. They are built for tags like button, fieldset etc.
Consider adding this CSS to fix this issue:
a[disabled] {
pointer-events: none;
}
I did this and its working perfect.
<a class="btn btn-sm btn-info" ng-class="{'disabled':(!ItemName || !ItemDescription)}" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false">
try this
ng-disabled="(!ItemName) || (ItemDescription) "
if possible plz tell what is ItemName and ItemDescription.
remember that in angularjs if you want to disable any field you have to do this
ng-disabled = 'true' ;
Related
I want to clear the values of a certain table so I want to get the table name using Bootstrap modal. I want the name of the table in url.
This is my code:
Here I'm sending the name of the table into the modal
<ol class="breadcrumb text-center">
<li class="breadcrumb-item">
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product1">Insert1</a>
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product2">Insert2</a>
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product3">Insert3</a>
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product4">Insert4</a>
</ol>
I want to pass the value inside data-table into href as clear.php?clear_id="table_name"
<div class="modal fade" id="scrapModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel1">Confirm Clear?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Are you sure you want to clear scrap for this table.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-danger" href="clear.php?clear_id=">Clear</a>
</div>
</div>
</div>
</div>
Thank you in advance!
You can dynamically change the href value of the Clear button in your modal by utilising the shown.bs.modal event trigger and building the URL with the data-table attribute at your disposal provided by the relatedTarget property in the event object.
I've add a clear button click event to emphasise this visually.
$('#scrapModal').on('show.bs.modal', function (e) {
var table = $(e.relatedTarget).data('table')
var href = 'clear.php?clear_id=' + table
$('.btn-danger', this).attr('href', href)
console.log(href)
})
// Simulate "clear" button click to alert href value
$('#scrapModal .btn-danger').on('click', function (e) {
e.preventDefault()
alert(e.target.pathname + e.target.search)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<ol class="breadcrumb text-center">
<li class="breadcrumb-item">
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product1">Insert1</a>
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product2">Insert2</a>
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product3">Insert3</a>
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product4">Insert4</a>
</li>
</ol>
<div class="modal fade" id="scrapModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel1">Confirm Clear?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to clear scrap for this table.
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-danger" href="#">Clear</a>
</div>
</div>
</div>
</div>
Use the following lines of code inside your script tag and this should work fine.
$('#scrapModal .btn-danger').on('click', function (e) {
e.preventDefault()
alert(e.target.pathname + e.target.search)
})
You can do it by using a simple script like this:
$('#scrapModal').on('show.bs.modal', function (event) {
var table = $(event.relatedTarget).data('table');
$(this).find('.btn-danger').attr("href", "clear.php?clear_id=" + table);
)}
This will run when the modal appears. It would be better to give the confirm button an id attribute in order to look up in a more elegant way.
You can find more information about varying the modal content here: https://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content
I have a panel with buttons
<div class="panel panel-default" style="padding-left:15px; padding-top:5px; padding-right:15px; float:left">
<button class="btn btn-default" data-toggle="modal" data-target="#myModal" onclick="">Edit</button>
<div class="btn-group btn" style="padding:0;">
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Line</li>
<li>Bar</li>
</ul>
</div>
<button class="btn btn-default">Show</button>
</div>
</div>
and for the dropdown, when the user selects an option, it should change the name of the button
$(function () {
$(".dropdown-menu li a").click(function () {
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});
});
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
#*<button type="button" class="btn btn-danger" style="float:left;" data-dismiss="modal">Cancel</button>*#
<button type="button" class="btn btn-success" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
but it also changes the name of the Edit button. I don't know what am I doing wrong :( It is possible to group a dropdown in left and a Show button to the right, change the left button name according to the selection without affecting the rest of the buttons and also, to display one popup based on the selection when the user presses Show (each selection has it's own popup)?
I'm pretty new in JavaScript programming so please be gentle :)
You code was not working because you CSS selector .btn:first-child is selecting multiple btn elements thus updating multiple buttons text.
If you want to update the toggle button you can do this as follows.
You can select the toggle button using this selector .btn.dropdown-toggle
in you jquery.
I would suggest you to add an id to the button and select it using an id.
SNIPPET
$(function() {
$(".dropdown-menu li a").click(function() {
//$('.btn.dropdown-toggle').text($(this).text());
$('#toggle').text($(this).text());
});
$('#show').click(function(){
var show = $('#toggle').text();
alert(show);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel panel-default" style="padding-left:15px; padding-top:5px; padding-right:15px; float:left">
<button class="btn btn-default" data-toggle="modal" data-target="#myModal" onclick="">Edit</button>
<div class="btn-group btn" style="padding:0;">
<button id="toggle" data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Line</li>
<li>Bar</li>
</ul>
<button id ="show" class="btn btn-default">SHOW</button>
</div>
</div>
I have a button which triggers a function from the JS for removing an entity:
<div type="button" class="transparentButton" ng-click="Remove(data)" title="Delete"
style="border-radius:50%;width:36px;height:36px;background-color:red;color:black;float:left;margin-left:5px;font-size:18px;"
><i class="glyphicon glyphicon-remove"></i></div></div>
I wanted to change it the way that it, at first, asks for a confirmation and then proceeds with the delete, so made the following change when clicking the button:
<div type="button" class="transparentButton" title="Delete" data-toggle="modal" data-target="#Confirm"
style="border-radius:50%;width:36px;height:36px;background-color:red;color:black;float:left;margin-left:5px;font-size:18px;"
><i class="glyphicon glyphicon-remove"></i></div></div>
And enabled some Modal in order to ask for confirm:
<div class="modal fade" id="Confirm" tabindex="-5" role="dialog" aria-labelledby="modalLabel" aria-hidden="true" style="display: none;top:70px">
<div class="modal-dialog">
<div class="container">
<form class="form-signin">
<h4 class="delete-title">Sure you want to Delete?</h4>
<br>
<div class="yesnolink">
<a class="button1" ng-click="Remove(data)" style="float:left;margin-left:80px;">Delete</a>
<a class="button1" data-dismiss="modal" style="margin-right:100px;">Cancel</a>
</div>
</form>
</div>
</div>
</div>
Fun starts from here, the function triggered correctly when I use the initial button, but no action when I try to call it from modal. Any idea what am I missing?
I can load the modal using this piece of code with no issues.
<button type="button" class="btn btn-danger btn-sm" id="sweet_prompt">
Deploy Code <i class="icon-play3 position-right"></i>
</button>
However, I need it as an HTML link and not a button (don't want to mess with the themes' CSS styling). Nothing happens when I click on the link.
<a href="#" data-target="#sweet_prompt" data-toggle="modal">
<i class="icon-history position-left"></i>Deploy Code
</a>
Fixed: I modified it so that the link is constructed this way.
<a id="sweet_prompt">Deploy Code</a>
Look this example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-target="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<div class="modal fade hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-remote="/mmfansler/aQ3Ge/show/">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
Given that we (currently) don't know how the modal is being triggered, I'll assume the listener is attached to either button#sweet_prompt or perhaps just #sweet_prompt.
Rewrite either the HTML of your link to use the selector the listener is attached to, or rewrite the listener to attach to the <a/> element.
I have a Bootstrap Modal which contains a Submit Button.Apart from this Modal I have another one also which contains Form and other elements like Lables, Text boxes and a Submit button.Now I have a requirement where in a click Submit button of first Modal , it should submit the Form of the Second Modal..Below I am posting my First and Second Modal HTML Prototype ..
<div class="modal alert" id="DeleteModal" tabindex="-1" role="dialog" aria-labelledby="DeleteModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title" id="DeleteModalLabel">Confirm Delete</h3>
</div>
<div class="modal-body">
<div class="form-group">
<label class="col-sm-6 control-label">Are You Sure To Delete !!!</label>
</div>
</div>
<div class="modal-footer">
<div class="pull-right">
<button type="submit" class="btn btn-success"><i class="glyphicon glyphicon-trash"></i> Delete</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> Cancel</button>
</div>
</div>
</div>
</div>
and Here is the Second One..
<div class="modal fade" id="StudentModal" tabindex="-1" role="dialog" aria-labelledby="StudentModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<form action="~/GetStudent" class="form-horizontal" role="form" method="post" id="frmStudent">
<div class="modal-footer">
<div class="pull-right">
<button type="submit" class="btn btn-success"><i class="glyphicon glyphicon-ok"></i> Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> Close</button>
</div>
</div>
</form>
</div>
</div>
Please suggest me How can this is possible.Thanks..
Adding a class to delete button
<button type="submit" class="btn btn-success delete"><i class="glyphicon glyphicon-trash"></i> Delete</button>
Write a click event.
$('.delete').on('click',function(){
$('#DeleteModal').modal('hide');
$("#frmStudent").submit();
});
Note : This is just a basic example. Now if you want to use ajax to submit the form then there are way different steps to achieve it.