This blog is about using bootstrap modal using AngularJS and Javascript, there are two different ways of using the modal and fetching the values from the modal.
I have added few fields in the modal and accessing the fields from the modal using two different buttons, below are the buttons
Modals code is same but only the function of fetching the values is different.
Here is how the modal looks
Here is the code of the page with the modal code and accessing the values of the modal in different ways.
Check out the code and if any issue or queries just comment I would be happy to help.
Happy coding!!
I have added few fields in the modal and accessing the fields from the modal using two different buttons, below are the buttons
Modals code is same but only the function of fetching the values is different.
Here is how the modal looks
Here is the code of the page with the modal code and accessing the values of the modal in different ways.
Check out the code and if any issue or queries just comment I would be happy to help.
1: <apex:page sidebar="false" showHeader="false" docType="html-5.0" standardStylesheets="false" applyBodyTag="false" applyHtmlTag="false">
2: <html lang="en">
3: <title>Manage Users</title>
4: <head>
5: <meta charset="utf-8"></meta>
6: <meta name="viewport" content="width=device-width, initial-scale=1"></meta>
7: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link>
8: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
9: <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
10: <script>
11: $(document).on("click","#myReset",function() {
12: $('#myModal').modal('hide');
13: });
14: //click to save data filled in the modal using javascript
15: $(document).on("click", "#btnCreateContact", function(event){
16: var fn = document.getElementById("firstname").value;
17: var ln = document.getElementById("lastname").value;
18: var ph = document.getElementById("phone").value;
19: var em = document.getElementById("email").value;
20: var title = document.getElementById("title").value;
21: if(em == '' || ln == '' || fn == '' || title == '') {
22: alert('First Name, Last Name, Email and Title are required.');
23: } else {
24: //calling remote action
25: YOUR_APEX_CLASS.REMOTE_ACTION_METHOD(fn, ln, em, title, ph, function(response,event) {
26: $('#myModal').modal('hide');
27: if (event.status) {
28: //debugger;
29: if (response == null || response == '') {
30: //Reload window and close modal
31: //window.location.assign(window.location.href);
32: window.location.reload(true);
33: $('#myModal').modal('hide');
34: } else {
35: $('#myModal').modal('hide');
36: alert(response);
37: window.location.reload(true);
38: }
39: } else {
40: $('#myModal').modal('hide');
41: alert(event.message);
42: window.location.reload(true);
43: }
44: },{escape:false, buffer: false});
45: }
46: });
47: // USING ANGULAR NOW
48: //Initialling controller
49: myapp.controller('MainController',['$q','$log','$scope',function($q,$log,$scope){
50: $scope.firstname = '';
51: $scope.lastname = '';
52: $scope.phone = '';
53: $scope.email = '';
54: $scope.title = '';
55: //CALL REMOTE ACTION METHOD
56: MY_CLASS_NAME.REMOTE_ACTION(firstname, lastname, phone, email, title, function(response,event) {
57: // DO YOUR STUFF HERE
58: });
59: }]);
60: </script>
61: </head>
62: <!-- Modal -->
63: <div class="modal fade" id="myModal">
64: <div class="modal-dialog">
65: <!-- Modal content-->
66: <div class="modal-content">
67: <div class="modal-header">
68: <button type="button" class="close" data-dismiss="modal">×</button>
69: <h4 class="modal-title">Contact Details</h4>
70: </div>
71: <div class="col-xs-12 form-group">
72: </div>
73: <div class="col-xs-12 form-group">
74: <label>First Name<font color="red">*</font></label>
75: <input class="form-control" id="firstname" value="" ng-model="firstname"/>
76: </div>
77: <div class="col-xs-12 form-group">
78: <label>Last Name<font color="red">*</font></label>
79: <input class="form-control" id="lastname" value="" ng-model="lastname"/>
80: </div>
81: <div class="col-xs-12 form-group">
82: <label>Email<font color="red">*</font></label>
83: <input class="form-control" id="email" value="" ng-model="email"/>
84: </div>
85: <div class="col-xs-12 form-group">
86: <label>Title<font color="red">*</font></label>
87: <input class="form-control" id="title" value="" ng-model="title"/>
88: </div>
89: <div class="col-xs-12 form-group">
90: <label>Phone</label>
91: <input class="form-control phone" id="phone" onchange="formatPhone(this);" ng-model="phone"/>
92: </div>
93: <div class="btn-group" align="center">
94: <button id="btnCreateContact" class="btn btn-primary btn-md center-block" style="margin-left: 216px;">Save</button>
95: <a href="#" id="myReset" class="btn btn-primary btn-md center-block" style="margin-left: 15px;">Cancel</a>
96: </div>
97: <br></br>
98: <br></br>
99: <div class="modal-footer">
100: </div>
101: </div>
102: <br></br>
103: </div>
104: <br></br>
105: </div>
106: <br></br>
107: <div >
108: <div class="container">
109: <div class="panel panel-default">
110: <br></br>
111: <div class="btn-group" align="center" style="left: 27%;">
112: <button id="blocds" data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-md center-block" style="margin-left: 15px;">Modal Using Javascript</button>
113: <button id="blocds" data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-md center-block" style="margin-left: 15px;background-color:#DF4720">Modal Using AngularJS</button>
114: </div>
115: <br></br>
116: <br></br>
117: </div>
118: </div>
119: </div>
120: </html>
121: </apex:page>
Happy coding!!
