add jquery auto populate page

johnlanz · Aug 23, 2011 · 10b42ec · 10b42ec
1 parent a8f3d22
commit 10b42ec
Show file tree

Hide file tree

Showing 11 changed files with 457 additions and 54 deletions.
diff --git a/application/config/autoload.php b/application/config/autoload.php
@@ -52,7 +52,7 @@
 |	$autoload['libraries'] = array('database', 'session', 'xmlrpc');
 */
 
-$autoload['libraries'] = array();
+$autoload['libraries'] = array('database');
 
 
 /*

diff --git a/application/config/database.php b/application/config/database.php
@@ -42,9 +42,9 @@
 $active_record = TRUE;
 
 $db['default']['hostname'] = 'localhost';
-$db['default']['username'] = '';
-$db['default']['password'] = '';
-$db['default']['database'] = '';
+$db['default']['username'] = 'root';
+$db['default']['password'] = 'root';
+$db['default']['database'] = 'testing';
 $db['default']['dbdriver'] = 'mysql';
 $db['default']['dbprefix'] = '';
 $db['default']['pconnect'] = TRUE;

diff --git a/application/controllers/autopopulate.php b/application/controllers/autopopulate.php
@@ -0,0 +1,39 @@
+<?php
+class Autopopulate extends CI_Controller {
+
+	function index()
+	{
+		$this->load->model('Populate');
+
+		$query = $this->Populate->get(null, 'blank');
+		$data['tests'] = $this->formatArrayToIdName($query->result_array());
+
+		$this->load->view('autopopulate', $data);
+	}
+
+	function json() {
+		$this->load->model('Populate');
+
+		$id = $this->uri->segment(4);
+		$id = explode('-', $id);
+
+		$query = $this->Populate->get(null, $id);
+		$data['content'] = $this->formatArrayToIdName($query->result_array());
+		$this->load->view('json', $data);
+	}
+
+	private function formatArrayToIdName($data) {
+		$result = array();
+		foreach ($data as $row) {
+			$result[$row['id']] = $row['name'];
+		}
+		return $result;
+	}
+
+	function page_not_found()
+	{
+		show_404('page');
+	}
+
+}
+?>
diff --git a/application/controllers/upload.php b/application/controllers/upload.php
@@ -16,10 +16,10 @@ function index()
 	function do_upload()
 	{
 		$config['upload_path'] = './uploads/';
-		$config['allowed_types'] = 'gif|jpg|png';
-		$config['max_size']	= '1000';
+		$config['allowed_types'] = 'gif|jpg|png|zip|avi';
+		/*$config['max_size']	= '1000';
 		$config['max_width']  = '1024';
-		$config['max_height']  = '768';
+		$config['max_height']  = '768';*/
 
 		$this->load->library('upload', $config);
 

diff --git a/application/models/populate.php b/application/models/populate.php
@@ -0,0 +1,39 @@
+<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
+class Populate extends CI_Model 
+{
+	function _construct()
+    {
+		parent::_construct();
+    }
+
+	function get($id = null, $parent = null)
+	{
+
+		if ($id) {
+			if (is_array($id)) {
+				$this->db->where_in('id', $id);
+			} else {
+				$this->db->where('id', $id);
+			}
+		}
+
+		if ($parent) {
+			//get data if parent is null
+			if ($parent == 'blank') {
+				$condition = null;
+			} else {
+				$condition = $parent;
+			}
+
+			if (is_array($condition)) {
+				$this->db->where_in('parent_id', $condition);
+			} else {
+				$this->db->where('parent_id', $condition);
+			}
+		}
+
+		return $this->db->get('autopopulate');
+	}
+
+}
+?>
diff --git a/application/views/autopopulate.php b/application/views/autopopulate.php
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery Auto Populate Box</title>
+	<base href="<?php echo substr($_SERVER['SCRIPT_NAME'], 0, strrpos($_SERVER['SCRIPT_NAME'], "/")+1); ?>" />
+	<link href="css/demo.css" rel="stylesheet" type="text/css" />
+	<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
+	<script src="js/jquery.autopopulatebox.js" type="text/javascript"></script>
+</head>
+<body>
+
+<h1>jQuery Auto Populate Box!</h1>
+
+<h3 style="padding-bottom: 20px;">Sample 1</h3>
+
+<div class="input clearfix">
+	<label for="tests">Tests</label>
+	<select id="tests" name="test">
+		<option value="">(select)</option>
+		<?php foreach ($tests as $key => $test): ?>
+		<option value="<?php echo $key; ?>"> <?php echo $test; ?> </option>
+		<?php endforeach; ?>
+	</select>
+</div>
+
+<div class="input clearfix">
+	<label for="categories">Categories</label>
+	<select id="categories" name="category">
+		<option value="">(select)</option>
+	</select>
+</div>
+
+<div class="input clearfix">
+	<label for="contents">Contents</label>
+	<select id="contents" name="content">
+		<option value="">(select)</option>
+	</select>
+</div>
+<script>
+	jQuery(function($) {
+		$('#tests').autoPopulateBox({
+			emptyLabel: '(select)',
+			url: 'index.php/autopopulate/json/',
+			allSeparator: '/',
+			change: 'category',
+
+			category: {
+				target: '#categories',
+				change: 'content'
+			},
+			content: {
+				target: '#contents'
+			}
+		});
+	});
+</script>
+<br /><br />
+
+
+<h3 style="padding-bottom: 20px;" id="sample2">Sample 2</h3>
+
+<div class="clearfix">
+	<div class="multiple">
+		<label for="tests2">Tests</label>
+		<select id="tests2" name="test2" multiple="multiple">
+			<?php foreach ($tests as $key => $test): ?>
+			<option value="<?php echo $key; ?>"> <?php echo $test; ?> </option>
+			<?php endforeach; ?>
+		</select>
+	</div>
+
+	<div class="multiple">
+		<label for="categories2">Categories</label>
+		<select id="categories2" name="category" multiple="multiple"></select>
+	</div>
+
+	<div class="multiple">
+		<label for="contents2">Contents</label>
+		<select id="contents2" name="content" multiple="multiple"></select>
+	</div>
+</div>
+
+<script>
+	jQuery(function($) {
+		$('#tests2').autoPopulateBox({
+			url: 'index.php/autopopulate/json/',
+			allSeparator: '/',
+			change: 'category2',
+
+			category2: {
+				target: '#categories2',
+				change: 'content2'
+			},
+			content2: {
+				target: '#contents2'
+			}
+		});
+	});
+</script>
+
+</body>
+</html>
diff --git a/application/views/json.php b/application/views/json.php
@@ -0,0 +1 @@
+<?php echo json_encode($content); ?>
diff --git a/application/views/upload_form.php b/application/views/upload_form.php
@@ -45,6 +45,7 @@
 	<script type="text/javascript">
 		jQuery(function($){
 			$('.fileUpload').fileUploader({
+				allowedExtension: 'jpg|jpeg|gif|png|zip|avi',
 				afterEachUpload: function(data, status, formContainer){
 					$jsonData = $.parseJSON( $(data).find('#upload_data').text() );
 				}

diff --git a/application/views/welcome_message.php b/application/views/welcome_message.php
@@ -3,59 +3,15 @@
 <head>
 	<meta charset="utf-8">
 	<title>Welcome to CodeIgniter</title>
-
-<style type="text/css">
-
-body {
- background-color: #fff;
- margin: 40px;
- font-family: Lucida Grande, Verdana, Sans-serif;
- font-size: 14px;
- color: #4F5155;
-}
-
-a {
- color: #003399;
- background-color: transparent;
- font-weight: normal;
-}
-
-h1 {
- color: #444;
- background-color: transparent;
- border-bottom: 1px solid #D0D0D0;
- font-size: 16px;
- font-weight: bold;
- margin: 24px 0 2px 0;
- padding: 5px 0 6px 0;
-}
-
-code {
- font-family: Monaco, Verdana, Sans-serif;
- font-size: 12px;
- background-color: #f9f9f9;
- border: 1px solid #D0D0D0;
- color: #002166;
- display: block;
- margin: 14px 0 14px 0;
- padding: 12px 10px 12px 10px;
-}
-
-</style>
+	<link href="css/demo.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 
 <h1>Welcome to CodeIgniter!</h1>
 
-<p>The page you are looking at is being generated dynamically by CodeIgniter.</p>
-
-<p>If you would like to edit this page you'll find it located at:</p>
-<code>application/views/welcome_message.php</code>
-
-<p>The corresponding controller for this page is found at:</p>
-<code>application/controllers/welcome.php</code>
+<p>Sample jQuery Fileuploader: <a href="index.php/upload/">click here.</a></p>
 
-<p>If you are exploring CodeIgniter for the very first time, you should start by reading the <a href="user_guide/">User Guide</a>.</p>
+<p>Sample jQuery Auto Populate Box: <a href="index.php/autopopulate/">click here.</a></p>
 
 
 <p><br />Page rendered in {elapsed_time} seconds</p>

diff --git a/css/demo.css b/css/demo.css
@@ -0,0 +1,80 @@
+body {
+	background-color: #fff;
+	margin: 40px;
+	font-family: Lucida Grande, Verdana, Sans-serif;
+	font-size: 14px;
+	color: #4F5155;
+}
+
+a {
+	color: #003399;
+	background-color: transparent;
+	font-weight: normal;
+}
+
+h1 {
+	color: #444;
+	background-color: transparent;
+	border-bottom: 1px solid #D0D0D0;
+	font-size: 16px;
+	font-weight: bold;
+	margin: 24px 0 2px 0;
+	padding: 5px 0 6px 0;
+}
+
+code {
+	font-family: Monaco, Verdana, Sans-serif;
+	font-size: 12px;
+	background-color: #f9f9f9;
+	border: 1px solid #D0D0D0;
+	color: #002166;
+	display: block;
+	margin: 14px 0 14px 0;
+	padding: 12px 10px 12px 10px;
+}
+
+.input {
+	font-size: 1.2em;
+	line-height: 1em;
+	padding-bottom: 10px;
+}
+.input label {
+	float: left;
+	display: block;
+	width: 120px;
+}
+.input select {
+	float: left;
+	display: block;
+}
+
+.multiple {
+	float: left;
+}
+.multiple label {
+	display: block;
+	width: 140px;
+}
+.multiple select {
+	min-width: 120px;
+}
+
+/* clearfix */
+.clearfix:after {
+	content: "."; 
+	display: block; 
+	height: 0; 
+	clear: both; 
+	visibility: hidden;
+}
+.clearfix {
+	display: inline-block;
+}
+/* required comment for clearfix to work in Opera \*/
+* html .clearfix { 
+	height:1%;
+}
+.clearfix { 
+	display:block;
+}
+/* end clearfix */
-Original file line number
+Diff line change
@@ Expand Up / @@ -52,7 +52,7 @@ @@
     |	$autoload['libraries'] = array('database', 'session', 'xmlrpc');
     */
-    $autoload['libraries'] = array();
+    $autoload['libraries'] = array('database');
     /*
@@ Expand Down @@