JavaScript is a dynamic language. It is mainly used for client-side scripting i.e.  user requests an HTML page with JavaScript in it, the script is sent to the browser and then browser perform some task like effects, events etc.

Here you will learn how one can use CodeIgniter’s JavaScript class after loading the provided JavaScript library.

Before moving further, first we need to set and configure the path as shown below:

Syntax

Set this line in “application/config/config.php”.

// Here is the location, where "jquery.min.js" stored.
$config['javascript_location'] = 'http://localhost/codeigniter_javascript/js/jquery.min.js';

To initialize the Javascript class manually in your controller constructor.

$this->load->library('javascript'); // to load JavaScript library
$this->load->library('javascript/jquery');

One can set different events by using syntax:

$this->jquery->event('element_path', code_to_run()); //Here "event" is like focus, blur, click etc. 

The below block of code is from example that we have created in which “$data” is an array whose each index stores different function call of  jQuery library.

// This function return the js file location, so we have to echo this line in <head> tag.
$data['library_src'] = $this->jquery->script();

// $this->jquery->event('element_path', code_to_run());
// Following jQuery code set according to syntax.

$data['click'] = $this->jquery->_click('#click', "alert('Hello! You Click the button');");
$data['dbl_click'] = $this->jquery->_dblclick('#double_click', "alert('Hello! You Double Click the button');");

// $this->jquery->effect(target, optional speed, optional extra information);
// Following jQuery code set according to syntax, Here first parameter is the "target", in which you want to apply jquery effect.
// Second is "optional speed",which set effect motion in "miliseconds",its optional.
// Third parameter " optional extra information" is like "callback" function, its also optional.

$data['hide'] = $this->jquery->_hide('#content', 800);
$data['show'] = $this->jquery->_show('#content', 800);
$data['fade_in'] = $this->jquery->_fadeIn('#content', 800);
$data['fade_out'] = $this->jquery->_fadeOut('#content', 800);
$data['toggle'] = $this->jquery->_toggle('#content');
$data['slide_up'] = $this->jquery->_slideUp('#content',800);
$data['slide_down'] = $this->jquery->_slideDown('#content',800);
$data['slide_toggle'] = $this->jquery->_slideToggle('#content',800);

// Pass the variable "$data" in view page, which holds multiple tasks of js using CodeIgniter library.
$this->load->view('js_class_view', $data);

Now you can create these below mentioned files and put them in their respective folder or you can download from the link given.

 

Download script   

 

Tutorial Codes In details:

Below are the codes used in this tutorial with proper explanation.

Controller File : js_class.php

This file will help you to initialize, set the configuration and pass it to “view” page.

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');

class Js_Class extends CI_Controller {

// Load Library.
function __construct() {
parent::__construct();
$this->load->library('javascript');
$this->load->library('javascript/jquery');
}

// View "js_class_view" Page.
public function index() {
// its hold the "jquery.min.js" path with <script> tag, and store in variable.
$data['library_src'] = $this->jquery->script();

$data['click'] = $this->jquery->_click('#click', "alert('Hello! You Click the button');");
$data['dbl_click'] = $this->jquery->_dblclick('#double_click', "alert('Hello! You Double Click the button');");
$data['hide'] = $this->jquery->_click('#hide_div', $this->jquery->_hide('#content', 800));
$data['show'] = $this->jquery->_click('#show_div', $this->jquery->_show('#content', 800));
$data['fade_in'] = $this->jquery->_click('#fadein_fun', $this->jquery->_fadeIn('#content', 800));
$data['fade_out'] = $this->jquery->_click('#fadeout_fun', $this->jquery->_fadeOut('#content', 800));
$data['toggle'] = $this->jquery->_click('#toggle', $this->jquery->_toggle('#content'));
$data['slide_up'] = $this->jquery->_click('#slideup', $this->jquery->_slideUp('#content',800));
$data['slide_down'] = $this->jquery->_click('#slidedown', $this->jquery->_slideDown('#content',800));
$data['slide_toggle'] = $this->jquery->_click('#slidetoggle', $this->jquery->_slideToggle('#content',800));

// Pass the variable "$data" in view page, which holds multiple task of js using codeigniter library.
$this->load->view('js_class_view', $data);
}
}
?>

 

View File : js_class_view.php

This file will help you, that where to print variables, which recieve from “controller”.

<html>
<head>
<title>Codeigniter javascript and jquery class</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/style.css">

<!--Here is Jquery file "jquery.min.js", which send from controller as variable-->
<?php echo $library_src; ?>
</head>
<body>
<div class="main">
<div id="content">
<h2 id="form_head">Javascript Library Example</h2><br/>
<hr>
<div id="form_input">
<?php
echo form_open();
// Name Fied
echo form_label('User Name');
$data_name = array(
'name' => 'name',
'class' => 'input_box',
'placeholder' => 'Please Enter Name',
'id' => 'name'
);
echo form_input($data_name);
echo "<br>";
echo "<br>";
// Password Field
echo form_label('Password');
$data_name = array(
'type' => 'password',
'name' => 'pwd',
'class' => 'input_box',
'placeholder' => '',
'id' => 'pwd'
);
echo form_input($data_name);
?>
</div>
<div id="form_button">
<?php echo form_submit('submit', 'Submit', "class='submit'"); ?>
</div>
<?php
// Form Close
echo form_close();
?>
</div>
</div>

<!-- Buttons, which perform jquery task -->
<div id="js_button">
<h3 id="button_heading">Click Buttons and view the effect, using javascript library in codeIgniter</h2>

<button type="button" class="button_type" id="click">Click Me</button>
<br>
<button type="button" class="button_type" id="double_click">Double Click</button>
<br>
<button type="button" class="button_type" id="hide_div">Hide</button>
<br>
<button type="button" class="button_type" id="show_div">Show</button>
<br>
<button type="button" class="button_type" id="fadeout_fun">Fade Out</button>
<br>
<button type="button" class="button_type" id="fadein_fun">Fade In</button>
<br>
<button type="button" class="button_type" id="toggle">Toggle</button>
<br>
<button type="button" class="button_type" id="slidetoggle">Slide Toggle</button>
<br>
<button type="button" class="button_type" id="slideup">Slide Up</button>
<br>
<button type="button" class="button_type" id="slidedown">Slide Down</button>
</div>

<!-- script tag recieve variables with js event,which send from controller. -->
<script type="text/javascript">
<?php echo $click; ?>
<?php echo $dbl_click; ?>
<?php echo $hide; ?>
<?php echo $show; ?>
<?php echo $fade_in; ?>
<?php echo $fade_out; ?>
<?php echo $toggle; ?>
<?php echo $slide_toggle; ?>
<?php echo $slide_down; ?>
<?php echo $slide_up; ?>
</script>
</body>
</html>

 

CSS File : style.css

Styling HTML Elements.

body {
font-family: 'Raleway', sans-serif;
}
.main
{
width: 1015px;
position: absolute;
top: 10%;
left: 20%;
}
#form_head
{
text-align: center;
background-color: #E8F2FF;
height: 66px;
margin: 0 0 -29px 0;
padding-top: 35px;
border-radius: 8px 8px 0 0;
color: rgb(97, 94, 94);
}
#content {
position: absolute;
width: 450px;
height: 365px;
border: 2px solid grey;
border-radius: 10px;
margin-top: 125px;
}
#form_input
{
margin-left: 50px;
margin-top: 36px;
}
label
{
margin-right: 6px;
font-weight: bold;
}
#form_button{
padding: 0 21px 15px 15px;
position: absolute;
bottom: 0px;
width: 414px;
background-color: #E8F2FF;
border-radius: 0px 0px 8px 8px;
border-top: 1px solid #E8F2FF;
margin-top: 30px;
margin-left: 0;
}
.submit{
font-size: 16px;
background: linear-gradient( #66B2FF 5%, #0080FF 100%);
border: 1px solid #84BBF3;
color: white;
font-weight: bold;
cursor: pointer;
border-top: 1px solid grey;
width: 300px;
border-radius: 5px;
padding: 10px 0;
outline: none;
margin-top: 20px;
margin-left: 15%;
}
.submit:hover{
background: linear-gradient(#0080FF 5%, #004C99 100%);
}
.input_box{
height:40px;
width:240px;
padding:20px;
border-radius:3px;
background-color:#E8F2FF;
margin-left:45px;
}
.button_type{
font-size: 16px;
background: linear-gradient( #66B2FF 5%, #0080FF 100%);
border: 1px solid #84BBF3;
color: white;
font-weight: bold;
cursor: pointer;
width: 300px;
border-radius: 5px;
padding: 10px 0;
outline: none;
margin-top: 20px;
margin-left: 15%;
}
.button_type:hover{
background: linear-gradient(#0080FF 5%, #004C99 100%);
}
div#js_button {
position: absolute;
margin-left: 800px;
margin-top: 55px;
}
input#name {
margin-left: 33px;
}
#button_heading
{
text-align: center;
color: rgb(97, 94, 94);
}

 

Conclusion

Thanks for reading the complete post. Hope you have got the concept. You can share your views in the space provided below and get in touch with us.

Related Posts:

CodeIgniter - Getting Started With MVC
CodeIgniter Installation and Configuration
CodeIgniter Image Library For Image Manipulation