changes for making the add form with pure javscript

public/js/backend/admin.js

@@ -39,14 +39,26 @@ var Backend = {}; // common variable used in all the files of the backend
                 request = new ActiveXObject("Microsoft.XMLHTTP");
             }
             request.open(method, url, true);
-            request.setRequestHeader('X-CSRF-TOKEN', 'application/x-www-form-urlencoded; charset=UTF-8');
+            request.setRequestHeader('X-CSRF-TOKEN', csrf);
+            request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
             if("post" === method.toLowerCase()){
                 request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
                 data = this.jsontoformdata(data);
             }
-            request.onload = callback.success(request);
+            
+
+            // when request is in the ready state change the details or perform success function 
+            request.onreadystatechange = function()
+            {
+                if (request.readyState === XMLHttpRequest.DONE) {
+                    // Everything is good, the response was received.
+                    request.onload = callback.success(request);
+                } 
+            };
             
             request.onerror = callback.error;
+
+            
             
             request.send(data);
         },
@@ -68,6 +80,13 @@ var Backend = {}; // common variable used in all the files of the backend
             return urljson;
         },
 
+        removeClass:function(el,className){
+            if (el.classList)
+                el.classList.remove(className);
+            else
+                el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+        }
+
     },
 
       /**

resources/views/backend/access/users/create.blade.php

@@ -182,31 +182,66 @@
     {{ Html::script('js/backend/access/users/script.js') }}
     <script type="text/javascript">
 
+
         Backend.Utils.documentReady(function(){
-         
+
             Backend.Access.init();
-            callback = {
-                success:function(request){
-                    if (request.status >= 200 && request.status < 400) {
-                        // Success!
-                        var resp = request.responseText;
-                        console.log(resp);
-                    } else {
-                    // We reached our target server, but it returned an error
-                    console.log("errror");
-                    }
-                },
-                error:function(){
-                    console.log("errror");
-                }
-            };
             csrf = $('meta[name="csrf-token"]').attr('content');
-            Backend.Utils.ajaxrequest("{{ route('admin.get.permission') }}","post",{role_id: $('.get-role-for-permissions').val()},csrf,callback);
-
-        });
+           
+            /**
+             * This function is used to get clicked element role id and return required result
+             */
+             document.querySelectorAll(".get-role-for-permissions").forEach(function(element){
+                element.onclick =function(event){
+                    callback = {
+                        success:function(request){
+                            console.log("request",request,request.status);
+                            if (request.status >= 200 && request.status < 400) {
+                                // Success!
+                                var response = JSON.parse(request.responseText);
+                                var p = response.permissions;
+                                var q = response.rolePermissions;
+                                var qAll = response.allPermissions;
+
+                                
+                                document.querySelector(".get-available-permissions").innerHTML = "";
+                                htmlstring = "";
+                                if (p.length == 0) {
+                                    document.querySelector(".get-available-permissions").innerHTML = '<p>There are no available permissions.</p>';
+                                } else {
+                                    for (var key in p) {
+                                        var addChecked = '';
+                                        if (qAll == 1 && q.length == 0) {
+                                            addChecked = 'checked="checked"';
+                                        } else {
+                                            if (typeof q[key] !== "undefined") {
+                                                addChecked = 'checked="checked"';
+                                            }
+                                        }
+                                        htmlstring += '<label class="control control--checkbox"> <input type="checkbox" name="permissions[' + key + ']" value="' + key + '" id="perm_' + key + '" ' + addChecked + ' /> <label for="perm_' + key + '">' + p[key] + '</label> <div class="control__indicator"></div> </label> <br>'; 
+                                    }
+                                }
+                                document.querySelector(".get-available-permissions").innerHTML = htmlstring;
+                                Backend.Utils.removeClass(document.getElementById("available-permissions"),'hidden');
+
+                            } else {
+                                // We reached our target server, but it returned an error
+                                console.log("errror in request");
+                                document.querySelector(".get-available-permissions").innerHTML = '<p>There are no available permissions.</p>';
+                            }
+                        },
+                        error:function(){
+                            console.log("errror");
+                            document.querySelector(".get-available-permissions").innerHTML = '<p>There are no available permissions.</p>';
+                        }
+                    };
+                    
+                    Backend.Utils.ajaxrequest("{{ route('admin.get.permission') }}","post",{role_id: event.target.value ,"_tocken":csrf},csrf,callback);
+                }
+             });
+            document.getElementById("role-3").click();
             
-
-
-        
+        });
+      
     </script>
 @endsection