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 have the following modal, With ng-model item
<div class="uk-modal" id="modal_header_footer">
<div class="uk-modal-dialog">
<div class="uk-modal-header">
<h3 class="uk-modal-title">Editar Usuario</h3>
</div>
<form id="form_validation" class="uk-form-stacked">
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-1-2">
<div class="parsley-row">
<label for="fullname">user<span class="req">*</span></label>
<input type="text" ng-model="item.user" required class="md-input" md-input />
</div>
</div>
<div class="uk-width-medium-1-2">
<div class="parsley-row">
<label for="fullname">name<span class="req">*</span></label>
<input id="nombre" type="text" name="nombre" ng-model="item.name" required class="md-input" md-input />
</div>
</div>
</div>
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-1-2">
<div class="parsley-row">
<label for="email">Email<span class="req">*</span></label>
<input id="email" type="email" name="email" ng-model="item.email" data-parsley-trigger="change" required class="md-input" md-input />
</div>
</div>
</div>
</form>
<div class="uk-modal-footer uk-text-right">
<button type="button" class="md-btn md-btn-flat uk-modal-close">Cerrar</button>
<button type="button" ng-click="EditarUsuario(item)" class="md-btn md-btn-flat md-btn-flat-primary">Aceptar</button>
</div>
</div>
The modal call it from a button belonging to a record in datatable, "data-uk-modal="{target:\'#modal_header_footer\'}""
vm.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('Id'),
DTColumnBuilder.newColumn('usuario').withTitle('Usuario'),
DTColumnBuilder.newColumn('nombre').withTitle('Nombre'),
DTColumnBuilder.newColumn('email').withTitle('Email'),
DTColumnBuilder.newColumn('telefono').withTitle('Telefono'),
DTColumnBuilder.newColumn('estado').withTitle('Estado'),
DTColumnBuilder.newColumn('created_at').withTitle('Creado'),
DTColumnBuilder.newColumn(null).withClass('parent').withTitle('Acciones').notSortable().renderWith(function(data,type,full){
vm.usuario[data.id] = data;
return ' <i class="md-icon material-icons md-bg-light-blue-900 uk-text-contrast"></i>'+
' <i class="md-icon material-icons md-bg-red-900 uk-text-contrast"></i>';
})
];
I need to pass the data parameter, and so make use of the ng-model in the modal
There is no difference between the way we use ng-model in a modal and any other part of the website.
In your case, I suppose you want to show the user's data displayed which belong to a specific record in the table.
So if your ng-model in the modal belongs to the same controller which contains the edit func, you just need to bind the information passed as parameter to the corresponding ng-model in the modal. When the modal shows up, it will show the bind information in the modal.
Let's say, in your modal you have this:
<div class="parsley-row">
<label for="fullname">user<span class="req">*</span></label>
<input type="text" ng-model="item.user" required class="md-input" md-input />
</div>
Then in your edit function you just have to say
function edit(user){
$scope.item = user; //...item is the var used for binding the information to the modal and user is the var coming from the table
}
This can solved using dummy object. here is a code
<td title="'Payment'"> <button type="button" class="btn btn-info btn-lg pay-btn" data-toggle="modal" data-target="#myModal" ng-click="mommy(obj)" >yuty</button>
<!-- Modal content-->
<div id="myModal" class="modal fade" role="dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<form>
<div class="form-group">
<label>Amout</label>
<input type="Number" ng-model="vvv.payment">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng- click="mono=false">Close</button>
<button type="button" class="btn btn-default" ng- click="modify(vvv._id,vvv)">Submit</button>
</div>
</div>
dummy object
$scope.mommy = function(h){
console.log(h.payment);
$scope.vvv = h;
}
hope you get to understand it,
This is better way to use it
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..
http://jsfiddle.net/9sCnC/12/#
I'm going through a json file and parsing it through ng-repeat, a button on each item opening a modal window.
In this window a form is generated with data I would like to put into another data array which will be send through post to a php file...
<div ng-repeat="value in model.values">
<input type="text" ng-model="model.values[$index]" />
</div>
<hr>
<!--Details content Begin-->
<div class="circle-list">
<div class="circle-list-item" ng-repeat="course in courses | filter:query | orderBy:predicate:reverse | filter:Type" ng-mouseenter="hover(course)" ng-mouseleave="hover(course)">
<span class="btn-xs pull-right">
<span id="Time" class="glyphicon glyphicon-time"></span> {{course.duur}}u
</span>
<a id="course.Id" title="{{course.NoEDA}}" href="{{course.link}}">{{course.titel | lowercase}}</a>
<span id="Type" class="ng-class:course.type">{{course.type}}</span>
<span ng-show="course.showOverlay" class="btn-group btn-group-xs">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#ModalSubscribe{{$index}}"><span class="glyphicon glyphicon-pencil"></span></button>
<!-- <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-eye-open"></span></button> -->
<!-- Button trigger modal -->
</span>
<div class="modal fade" id="ModalSubscribe{{$index}}" tabindex="-1" role="dialog" aria-labelledby="ModalSubscribe" aria-hidden="true">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="glyphicon glyphicon-pencil"> Inschrijven</h4>
</div>
<div class="modal-body">
<!-- SHOW ERROR/SUCCESS MESSAGES -->
<!--
<div id="messages" ng-show="message" ng-class="{ 'has-error' : errormail }">{{ message }}</div>
-->
<div id="messages" class="alert alert-success" data-ng-show="message" >{{ message }}</div>
<div id="messages" class="alert alert-danger" data-ng-show="errormessage" >{{ errormessage }}</div>
<form id="register" name="register" class="form-horizontal" role="form" ng-submit="processForm()">
<div id="name-group" class="form-group">
<!-- EDA -->
<label class="col-sm-2 control-label">Opleiding:</label>
<div class="col-sm-10 controls">
<input type="text" name="eda[]" class="form-control" value="{{course.NoEDA}}" ng-model="course.NoEDA">
</div>
<!-- Name -->
<label class="col-sm-2 control-label">Naam:</label>
<div class="col-sm-10 controls">
<input type="text" name="name[]" class="form-control" placeholder="Naam" ng-model="formData.name">
</div>
<!-- Matricule -->
<label class="col-sm-2 control-label">Stamnumer:</label>
<div class="col-sm-10 controls">
<input type="number" name="matricule[]" class="form-control" placeholder="Stamnummer" ng-model="formData.matricule">
</div>
</div>
<!--<legend>Email</legend>-->
<div class="form-group" ng-class="{'has-error': errormail}">
<label class="col-sm-2 control-label">Email:</label>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="email" name="[]mail" class="form-control" data-ng-model="formData.mail" placeholder="mail"/>
</div>
<!--<span class="help-block" ng-show="errormail">{{ errormail }}</span>-->
</div>
<input type="checkbox" ng-model="formData.agree1" name="Agreement1[]" required />
Ik ben akkoord
<input type="checkbox" ng-model="formData.agree2" name="Agreement2[]" required />
Ik ga akkoord
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Sluit</button>
<button type="submit" class="btn btn-primary" ng-enabled="{{register.mail}}"><i class="glyphicon glyphicon-ok"></i> Inschrijven</button>
</div>
</form>
{{ formData }}
</div>
</div>
</div>
<!-- temp, later wel plaatsen
<span class="label label-default">{{course.Departement}}</span>
-->
<small>
<br/><i id="placelabel" class="text-muted"><span class="glyphicon glyphicon-map-marker"></span> {{course.plaats || "-"}}</i>
<i id="placename" class="text-primary"><span class="glyphicon glyphicon-calendar"></span> {{course.organisatie || "-"}}</i>
<small id="public" class="pull-right"><br /><i class="doelgroep">{{course.doelgroep}}</i></small>
</small>
</div>
</div>
<!--Details content End-->
</div>
<!--container content End-->
What I don't understand is:
ng-init="formData.eda=course.NoEDA" is putting the last item in the array I guess
value="{{course.NoEDA}}" this is showing the good item array
how do I transfer the right item from course.NoEDA to another ng-model formData.eda?
I'm just starting with this, if I'm doing this the wrong way please help me out here...
my fiddle isn't working at all but on my local server everything is working except passing the values to post them...
thanks in advance...