Thursday 17 December 2015

Bootstrap Modal Using AngularJS and Javascript in #Salesforce

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.

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">&times;</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!!

23 comments:

  1. I once again find myself personally spending a significant amount of time both reading and leaving comments.
    Angularjs Training in Bangalore , Angular 2 Training in bangalore , Python Training in Bangalore

    ReplyDelete
  2. Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with extra information? It is extremely helpful for me.
    DevOps Training in Chennai

    DevOps Online Training in Chennai

    DevOps Training in Bangalore

    DevOps Training in Hyderabad

    DevOps Training in Coimbatore

    DevOps Training

    DevOps Online Training

    ReplyDelete
  3. Excellent Blog! I would Thanks for sharing this wonderful content.its very useful to us.This is incredible,I feel really happy to have seen your webpage.I gained many unknown information, the way you have clearly explained is really fantastic..keep up!!

    Java training in Bangalore

    Java training in Hyderabad

    Java Training in Coimbatore

    Java Training

    Java Online Training

    ReplyDelete
  4. The short answer is that Kotlin code is safer and more concise than Java code, and that Kotlin and Java files can coexist in Android apps, so that Kotlin is not only useful for new apps, but also for expanding existing Java apps.
    Java Training in Chennai

    Java Training in Bangalore

    Java Training in Hyderabad

    Java Training in Coimbatore

    Java Training

    ReplyDelete
  5. Excellent Blog! I would Thanks for sharing this wonderful content.its very useful to us.This is incredible,I feel really happy to have seen your webpage I gained many unknown information, the way you have clearly explained is really fantastic.

    AWS Course in Chennai

    AWS Course in Bangalore

    AWS Course in Hyderabad

    AWS Course in Coimbatore

    AWS Course

    AWS Certification Course

    AWS Certification Training

    AWS Online Training

    AWS Training


    ReplyDelete
  6. Really nice required information & the things i never imagined and i would request, wright more blog and blog post like that for us. Thanks you once agian...


    python training in bangalore

    python training in hyderabad

    python online training

    python training

    python flask training

    python flask online training

    python training in coimbatore




    ReplyDelete
  7. Yes, it is hard, compared to other small desktop or web programming projects. ... If you have prior experience in programming than android dev will be very easy to pick up, especially if you're familiar in Java.thanks for your share!!

    Android Training in Chennai

    Android Online Training in Chennai

    Android Training in Bangalore

    Android Training in Hyderabad

    Android Training in Coimbatore

    Android Training

    Android Online Training

    ReplyDelete
  8. Nice article i was really impressed by seeing this article, it was very interesting and it is very useful for me.Thanks for sharing this wonderful content.its very useful to us.I gained many unknown information, the way you have clearly explained is really fantastic.
    oracle training in bangalore

    oracle training in hyderabad

    oracle training

    oracle online training

    hadoop training in chennai

    hadoop training in bangalore

    ReplyDelete
  9. Excellent Post with very informative information waiting for next blog thank you.

    Data Analytics Course Online

    ReplyDelete
  10. Fantastic article with top quality information found very useful thanks for sharing
    typeerror nonetype object is not subscriptable

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. Thanks for sharing this informative post with us. This information is very useful for those who are searching best Angularjs Development Services, or Angularjs Development Company

    ReplyDelete