I am working on it for a long time.
I have 2 radio buttons when any of them is clicked
1)it should be checked
2)a modal should appear
For the first time it works just fine, but the second time I choose the other button it won't be checked but it is checked logically just not show on the screen!
here is my code
<input type="radio" data-toggle="modal" data-target=".bs-example-modal-sm" ng-model="choice.tel" value="1" name="tel" > cell phone <br/>
<input type="radio" data-toggle="modal" data-target=".bs-example-modal-sm" ng-model="choice.tel" value="2" name="tel" > home phone <br/>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body">
<label>telephone (comma-separated)</label>
<input type="text" name="phone" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" >Save changes</button>
</div>
</div>
</div>
</div>
Related
I am not getting any response when I click the "Add new Service" button on my Service Page.
I have used Data-toggle on the "Add new service" button but It is not calling the Modal Class that I want to call.It works fine on HTML Page but not working on the ReactJS Page.
render() {
return ( <html>
<form>
<div class="row">
<div class="col-md-4"></div>
<div class="col-xs-6 col-md-3 search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" id="txtSearch"/>
<div class="input-group-btn">
<button class="btn btn-primary" type="submit">
Search
</button>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 search">
<button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#exampleModalCenter">Add New Service</button>
</div>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">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>
</div>
</form>
</html>
);
}
I using angularjs bootstrap modal, and i want to validate form before submit, so i use required in input tag like this:
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Add</h3>
</div>
<div class="modal-body">
<form id="productForm" novalidate>
<div>
<label for="ProductName"> ProductName:</label>
<input type="text" name="ProductName" id="ProductName" ng-model="model.ProductName" value="" required />
</div>
<div style="margin:10px">
<label for="Price">Price:</label>
<input type="text" name="Price" id="Price" ng-model="model.Price" required />
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="Save()" ng-disabled="productForm.$invalid">Save</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
<button type="button" class="btn btn-default modalBtn" ng-click="open()">addProduct</button>
</div>
but it doesn't work, what is the problem?
Trying adding a name to the form. productForm.$invalid refers to the name of the form. Towards the bottom of the docs there are some examples.
EDIT: I would also move the buttons into the form
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Add</h3>
</div>
<form name="productForm" novalidate>
<div class="modal-body">
<form id="productForm" name="productForm" novalidate>
<div>
<label for="ProductName"> ProductName:</label>
<input type="text" name="ProductName" id="ProductName" ng-model="model.ProductName" value="" required />
</div>
<div style="margin:10px">
<label for="Price">Price:</label>
<input type="text" name="Price" id="Price" ng-model="model.Price" required />
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="Save()" ng-disabled="productForm.$invalid">Save</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</form>
</script>
<button type="button" class="btn btn-default modalBtn" ng-click="open()">addProduct</button>
</div>
I am using angular directive for date picker from UI bootstrap. I also use ng-repeat to add multiple rows. I have added date picker code in ng-repeat. I have displayed these date pickers in bootstrap modal. Also ng-repeat is work fine. But if I add multiple row and click on single calendar icon then all calendar popups of all date picker are shown. I don't know why should this happened. I use is-open="$parent.opened1" to perform click on calendar button. If I use only is-open="opened1" then calendar popoup will open only once (means: can not open after selecting any date). And if I use is-open="$parent.opened1" then after adding multiple rows all calendar popup is open.
Here is my code-
<div class="modal fade bs-example-modal-lg preventiveCarePop" id="preventiveProcess" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<form role="myForm" name="myForm">
<div class="modal-dialog" style="width: 35%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 style="margin: 0px;">
Preventive Care: <span ng-bind="patientObj.firstName"></span>
<span ng-bind="patientObj.lastName"></span><small
class="newSmall"><span> ({{patientObj.gender}}, <i
class="fa fa-mobile fa-lg"></i>:
{{patientObj.contact.mobileNumber}})
</span></small>
</h4>
</div>
<input type="hidden" ng-model="currentReminder" />
<div class="modal-body">
<div id="divActivites" name="divActivites">
<div class="form-group">
<div class="box-placeholder" ng-repeat="preventive in preventive.preventiveDetailsList">
<div class="form-group">
<div class="row">
<div class="col-lg-4">
<label for="exampleInputEmail1">Start Date<span
style="color: red;">*</span></label>
<p class="input-group">
<input type="text" class="form-control"
datepicker-popup="dd-MM-yyyy"
ng-model="preventive.startOnDate"
is-open="$parent.opened2"
id="dos-{{$index}}"
datepicker-options="dateOptions" close-text="Close"
placeholder="Select Date" required />
<span class="input-group-btn">
<button type="button" class="btn popUpCal"
ng-click="open($event,'opened2')">
<i class="fa fa-calendar"></i>
</button>
</span>
</p>
</div>
<div class="col-lg-4">
<label for="exampleInputEmail1">End Date<span
style="color: red;">*</span></label>
<p class="input-group">
<input type="text" class="form-control"
datepicker-popup="dd-MM-yyyy"
ng-model="preventive.endOnDate"
id="doe-{{$index}}"
is-open="$parent.opened1"
datepicker-options="dateOptions" close-text="Close"
placeholder="Select Date" required />
<span class="input-group-btn">
<button type="button" class="btn popUpCal"
ng-click="open($event,'opened1')" >
<i class="fa fa-calendar"></i>
</button>
</span>
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn btn-default" ng-click="addDummyPreventive(preventive.preventiveDetailsList,currCaseSheetObjForAddPrv.speciality,preventive.preventiveDetailsList.length)" style="float: right" title="Add new preventive"><i class="fa fa-plus-circle fa-lg"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
Here is my controller
$scope.open = function($event,opened) {
$event.preventDefault();
$event.stopPropagation();
$scope[opened] = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
I don't know what I use to work all fine.
Please share your idea's.
Thanks in advance.
Please see this demo and comments inside code can be helpful.
Html:
<div class="row" ng-repeat="dt in dates">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt.date" is-open="dt.opened" datepicker-options="dateOptions" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event,dt)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
JS:
$scope.open = function($event, dt) {
$event.preventDefault();
$event.stopPropagation();
dt.opened = true;
};
I have the following Bootstrap UI modal template that displays a list of customers in a scrolling DIV.
<div>
<div class="modal-header">
<h3 class="modal-title">Select a customer</h3>
</div>
<div class="modal-body">
<div class="modal-container">
<label data-ng-repeat="cust in customers">
<input name="customer" type="radio" data-ng-value="{{cust}}" value="{{cust}}" data-ng-checked="{{cust}}.name==$parent.selected.item.name" ng-model="$parent.selected.item" />{{cust.name}}<span class="text-muted"> - {{cust.address}}</span>
</label>
</div>
<div class="modal-footer">
<button class="btn btn-success pull-left" data-ng-click="new()">New</button>
<button class="btn btn-primary" data-ng-click="ok()">OK</button>
<button class="btn btn-default" data-ng-click="cancel()">Cancel</button>
</div>
<div id="newCustomer" class="collapse">
<div class="form-group">
<label for="customerName" class="col-sm-5 control-label">Customer Name</label>
<div class="col-sm-5">
<input id="customerName" class="form-control" type="text" data-ng-model="newCustomer.name" placeholder="New customer name" />
</div>
</div>
<div class="form-group">
<label for="customerAddress" class="col-sm-5 control-label">Address</label>
<div class="col-sm-5">
<input id="customerAddress" class="form-control" type="text" data-ng-model="newCustomer.address" placeholder="New customer address" />
</div>
</div>
</div>
</div>
</div>
There are three buttons at the bottom New, OK and Cancel. What I want to happen is when the New button is clicked, the newCustomer div block should be toggled between expanded and collapsed states and importantly to resize the modal so that when expanded the modal will resize to fit the space taken up by the div block, and also to shrink the modal when the div block is collapsed.
Can this be done using a pure Bootstrap and AngularJS solution?
I am using Bootstrap v3.3.1 and AngularJS v1.3.9.
What I'd do is to actually use bootstrap collapse within your modal. This way you'd have everything done with boostrap.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<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">Modal title</h4>
</div>
<div class="modal-body">
<label data-ng-repeat="cust in customers">
<input name="customer" type="radio" data-ng-value="{{cust}}" value="{{cust}}" data-ng-checked="{{cust}}.name==$parent.selected.item.name" ng-model="$parent.selected.item" />{{cust.name}}<span class="text-muted"> - {{cust.address}}</span>
</label>
<div class="collapse" id="collapseExample">
<div class="well">
<div class="form-group">
<label for="customerName" class="col-sm-5 control-label">Customer Name</label>
<div class="col-sm-5">
<input id="customerName" class="form-control" type="text" data-ng-model="newCustomer.name" placeholder="New customer name" />
</div>
</div>
<div class="form-group">
<label for="customerAddress" class="col-sm-5 control-label">Address</label>
<div class="col-sm-5">
<input id="customerAddress" class="form-control" type="text" data-ng-model="newCustomer.address" placeholder="New customer address" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
NEW BUTTON
</button>
<button class="btn btn-primary" data-ng-click="ok()">OK</button>
<button class="btn btn-default" data-ng-click="cancel()">Cancel</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
http://jsfiddle.net/tea6gj4e/1/
I am using AngularJS as my front-end, below is my HTML file
<div >
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-body">
<div style="margin-bottom: 10px;">
<button type="button" ng-click='cancel()' class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">{{alert.summary}}</h4>
</div>
<form name="alertForm" novalidate>
<div ng-if="!displayMap">
<alert ng-if='displayAlertMsg' type="alertMsg.type">{{alertMsg.message}}</alert>
<input type="hidden" ng-model="alert.source" />
<div class="field-box">
<span class="checkboxLabel">Public: </span><input type="checkbox" id='updateType' ng-true-value="1" ng-false-value="0" ng-model="alert.publicAlert"></input>
</div>
<div class="field-box">
<label>qweqwName:</label>
<input class="span5" id='updateName' ng-model="alert.summary" required />
</div>
<div class="field-box">
<label>Notes:</label>
<textarea id='updateNotes' ng-model="alert.details" rows="2" required ></textarea>
</div>
<div class="span3" style="margin-left: 0px;">
<div class="field-box">
<label>Priority:</label>
<select ng-model="updatePriority" ng-options="p.name for p in priorities" ng-change='updateP(updatePriority)'></select>
</div>
<div class="field-box">
<label>Status:</label>
<select ng-model="updateState" ng-options="s.name for s in statusList" ng-change="updateS(updateState)"></select>
</div>
</div>
</div>
<div id="alertmap-buttons" class="span2 no-margin">
<button id="alert-add-location" class="btn btn-default pull-left" ng-click="displayMap = !displayMap"><span ng-if="!displayMap">Add Location</span><span ng-if="displayMap">Done</span></button>
<button id="alert-cancel-location" class="btn btn-danger" ng-if="displayMap">Cancel</button>
</div>
<div id="latlng-label" class='span3 pull-right no-margin'>
<div class="pull-left"><label class="latlng-label">lat: {{alert.latitude}}</label></div>
<div class="pull-right"><label class="latlng-label">long: {{alert.longitude}}</label></div>
</div>
<!--Select Coords from map-->
<!--Google Map Directive-->
<div ng-init="displayMap = false" ng-if="displayMap">
<google-map class="create-alert-map angular-google-map-container" center="map.center" zoom="map.zoom"
draggable='true'
events="mapEvents">
<markers models="themarkers"
coords="'self'"
>
</markers>
</google-map>
</div>
<!--Lat and Long
<input placeholder="Latitude" class="span2" id='updateLat' ng-model="alert.latitude" />
<input style="float: right" placeholder="Longitude" class="span2" id='updateLong' ng-model="alert.longitude" /-->
</form>
</div>
<div ng-if="!displayMap" class="modal-footer">
<button type="button" class="btn btn-default" ng-click="submit()" ng-disabled="alertForm.$invalid">Save</button>
<button type="button" class="btn btn-default" ng-click="cancel()">Close</button>
</div>
</div>
</div>
This file is given to me by client and he want some CSS changes etc in that. But when I try to edit the file nothing is happening to the modal dialog box, for example if I change button text from Save to Submit it's not applying in the file. How come this???
If this information is not enough I can give controller JS file also. Thanks..