Dialog with ajax to create a new mode.

application/controllers/Mode.php

@@ -39,15 +39,11 @@ class Mode extends CI_Controller {
 		if ($this->form_validation->run() == FALSE)
 		{
 			$data['page_title'] = "Create Mode";
-			$this->load->view('interface_assets/header', $data);
-			$this->load->view('mode/create');
-			$this->load->view('interface_assets/footer');
+			$this->load->view('mode/create', $data);
 		}
 		else
 		{	
 			$this->modes->add();
-			
-			redirect('mode');
 		}
 	}
 

application/views/interface_assets/footer.php

@@ -1821,6 +1821,46 @@ $(document).ready(function(){
                 "scrollX": true
             });
 
+            function createModeDialog() {
+                var baseURL= "<?php echo base_url();?>";
+                $.ajax({
+                    url: baseURL + 'index.php/mode/create',
+                    type: 'post',
+                    success: function(html) {
+                        BootstrapDialog.show({
+                            title: 'Create mode',
+                            size: BootstrapDialog.SIZE_WIDE,
+                            cssClass: 'create-mode-dialog',
+                            nl2br: false,
+                            message: html,
+                            buttons: [{
+                                label: 'Close',
+                                action: function (dialogItself) {
+                                    dialogItself.close();
+                                }
+                            }]
+                        });
+                    }
+                });
+            }
+
+            function createMode(form) {
+                var baseURL= "<?php echo base_url();?>";
+                if (form.mode.value != '') {
+                    $.ajax({
+                        url: baseURL + 'index.php/mode/create',
+                        type: 'post',
+                        data: {'mode': form.mode.value,
+                            'submode': form.submode.value,
+                            'qrgmode': form.qrgmode.value,
+                            'active': form.active.value},
+                        success: function(html) {
+                            location.reload();
+                        }
+                    });
+                }
+            }
+
             function deactivateMode(modeid) {
                 var baseURL= "<?php echo base_url();?>";
                 $.ajax({

application/views/mode/create.php

@@ -9,14 +9,6 @@
 		</div>
 	<?php } ?>
 
-<div class="card">
-  <div class="card-header">
-    <?php echo $page_title; ?>
-  </div>
-  <div class="card-body">
-    <h5 class="card-title"></h5>
-    <p class="card-text"></p>
-
 		<?php if($this->session->flashdata('notice')) { ?>
 			<div id="message" >
 			<?php echo $this->session->flashdata('notice'); ?>
@@ -27,7 +19,7 @@
 
 		<?php echo validation_errors(); ?>
 
-		<form method="post" action="<?php echo site_url('mode/create'); ?>" name="create_profile">
+		<form method="post" name="create_profile">
 		<div class="form-group">
 		    <label for="modeInput">ADIF Mode</label>
 		    <input type="text" class="form-control" name="mode" id="modeInput" aria-describedby="modeInputHelp" required>
@@ -59,12 +51,7 @@
 		    <small id="activeInputHelp" class="form-text text-muted">Set to active if to be listed in Modes-list</small>
 		  </div>
 
-			<button type="submit" class="btn btn-primary"><i class="fas fa-plus-square"></i> Create mode</button>
+			<button onclick="createMode(this.form);" class="btn btn-primary"><i class="fas fa-plus-square"></i> Create mode</button>
 
 		</form>
-  </div>
-</div>
-
-<br>
-
 </div>

application/views/mode/index.php

@@ -14,7 +14,7 @@
   </div>
   <div class="card-body">
     <p class="card-text">This is the place you can customize your modes-list by activating/deactivating modes to be shown in the select-list.</p>
-      <p><a href="<?php echo site_url('mode/create'); ?>" class="btn btn-primary"><i class="fas fa-plus"></i> Create a Mode</a></p>
+      <p><button onclick="createModeDialog();" class="btn btn-primary"><i class="fas fa-plus"></i> Create a Mode</button></p>
     <div class="table-responsive">
 		<table style="width:100%" class="modetable table table-striped">
 			<thead>