All posts tagged javascript

Undefined variable: javascript in cakePHP with scriptaculous

Today i am trying to use ajax call in cakephp.

<?php  echo $ajax->submit('Submit', array('url'=> array('controller'=>'users', 'action'=>'add'), 'update' => 'testdiv')); ?>

I found this error:

Undefined variable: Javascript

After a couple of searching I found the following things can cause this problem:

1. You do not have the html, javascript and ajax helper defined in your own controller (eg. user_controller.php)

var $helpers = array('Html','Javascript','Ajax'); 

2. Your render action points to a view where no view file is existing for. ( so the view file HAS to be created!

$this->render('the_method','ajax'); 

Hope it helps somebody who is experiencing the same problem I had.

jquery UI tab in cake php

At first we have to copy all the JavaScript file inside D:\xampp\htdocs\cakephp\app\webroot\js
Here we use jquery and jquery UI javascript file and css file.
We now copy all the css file inside D:\xampp\htdocs\cakephp\app\webroot\css
Leter we will load this css and java script file.

Now Create a controller articles_controller.php inside D:\xampp\htdocs\cakephp\app\controllers
And write bellow code

<?php
class ArticlesController extends AppController {
	
var $uses=null;
var $name = 'Articles';
var $helpers = array('Html','Form','Javascript'); 


 function index() {
		   
          $this->set('page_heading', 'Jquery Tab');       

       }
}
?>

To load JavaScript helper we write this code

var $helpers = array('Html','Form','Javascript'); 

Create a folder articles (D:\xampp\htdocs\cakephp\app\views\articles) and inside it create a file index.ctp write this bellow code inside index.ctp

<?php
$javascript->link('jquery-1.4.2.min.js', false);
$javascript->link('ui/jquery.ui.core.js', false);
$javascript->link('ui/jquery.ui.widget.js', false);
$javascript->link('ui/jquery.ui.tabs.js', false);

?>
<link rel="stylesheet" href="<?php echo $this->webroot . 'css/'; ?>/jquery-ui.css" type="text/css" media="screen" />

 <script type="text/javascript">
           $(function() {
               $("#tabs").tabs();
           });
	</script>

<div id="tabs" class="ui-tabs-nav">


	<ul>
		<li><a href="#tabs-1">tabs-1</a></li>
		<li><a href="#tabs-2">tabs-2</a></li>
		<li><a href="#tabs-3">tabs-3</a></li>
	</ul>
	<div id="tabs-1">

        <p>Tab 1. This is demo text. This is demo text.This is demo text.This is demo text.This is demo text.This is demo text.This is demo text.This is demo text.This is demo text.</p>
	</div>
	<div id="tabs-2">
        <p>Tab 2. This is demo text.This is demo text.This is demo text.This is demo text.This is demo text.This is demo text.This is demo text.This is demo text.This is demo text.</p>
	</div>
	<div id="tabs-3">

        <p>Tab 3.This is demo text.This is demo text.This is demo text.This is demo text.This is demo text.This is demo text.This is demo text.This is demo text.This is demo text.</p>
	</div>
</div>

we write bellow code to load the css from webroot/css. May be there is other technique to load css but this is easy to load css in cake php.

<link rel="stylesheet" href="<?php echo $this->webroot . 'css/'; ?>/jquery-ui.css" type="text/css" media="screen" />

[smProductImageAdd src="http://learneveryday.net/codecanyon/adverticement/add_codecnayon_smart-social-share-php.png" alt= "Smart Social Share" href="http://codecanyon.net/item/php-smart-social-share/202558" title="Smart Social Share (Php Plugin)" description="Smart Social share is a php plugin . Which helps you to give user to share your content with social book mark site. There are 4 plugin in this package." ref="marifdu"]

Now the you run http://localhost:85/cakephp/articles you will see the bellow out put.

You can download the code use in this tutorial.

Facebook like Expanding Textbox with Jquery.

Today i will show you how to implement Facebook like expanding textbox with Jquery.Thanks to d Josh Bush for his nice watermarkinput java script file and Srinivas Tamada to developed this script.
Facebook like Expanding Textbox with Jquery.
Javascript Code
It works with Jquery latest version 1.4.2. $(‘#content’).focus(function(){} – content is the ID of the textbox. Using $(this).animate() expanding textbox height and using $(“#button_block”).slideDown() showing the update button

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{

$("#content").focus(function()
{
$(this).animate({"height": "85px",}, "fast" );
$("#button_block").slideDown("fast");
return false;
});

$("#cancel").click(function()
{
$("#content").animate({"height": "30px",}, "fast" );
$("#button_block").slideUp("fast");
return false;
});

});
</script>




//HTML Code

<form method="post" action="">
<textarea  id="content"></textarea>
<div id="button_block">
<input type="submit" id="button" value=" Share "/>
<input type="submit" id='cancel' value=" cancel" />
</div>
</form>

[smProductImageAdd src="http://learneveryday.net/codecanyon/adverticement/add_codecnayon_smart-social-share-php.png" alt= "Smart Social Share" href="http://codecanyon.net/item/php-smart-social-share/202558" title="Smart Social Share (Php Plugin)" description="Smart Social share is a php plugin . Which helps you to give user to share your content with social book mark site. There are 4 plugin in this package." ref="marifdu"]

body
{
font-family:Arial, Helvetica, sans-serif;
}
#content
{
width:450px; height:30px;
border:solid 2px #006699;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;

}
#button
{
background-color:#3B5998;
color:#ffffff;
font-size:13px;
font-weight:bold;
padding:4px;
}
#cancel
{
background-color:#3B5998;
color:#ffffff;
font-size:13px;

padding:4px;
margin-left:10px;
}
#content
{
font-size:14px;

}
#button_block
{
display:none;


}

Pagination with jQuery, MySQL and PHP

From many days i am thinking to make a pagination script using php and jquery. Today i am making a pagination script for you. How to implement Pagination with jQuery, PHP and MySQL. It is a simple tutorial. It’s looks big but very simple script. Take a look at this screen shot.
Pagination with jQuery, MySQL and PHP.

The tutorial contains three PHP files and two js files and one css file includes jQuery plugin.

-config.php (Database Configuration)
-pagination.php
-pagination_data.php
-jquery.js
-jquery_pagination.js
–style.css

We also include the database script in the download zip file with data so that you can run this code and check.

[smProductImageAdd src="http://learneveryday.net/codecanyon/adverticement/add_codecnayon_smart-social-share-asp.net.png" alt= "Smart Social Share" href="http://codecanyon.net/item/php-smart-social-share/202558" title="Smart Social Share (Php Plugin)" description="Smart Social share is a php plugin . Which helps you to give user to share your content with social book mark site. There are 4 plugin in this package." ref="marifdu"]

Database Table

CREATE TABLE IF NOT EXISTS `northwind_products` (
  `ProductID` int(1) NOT NULL AUTO_INCREMENT,
  `ProductName` varchar(256) NOT NULL,
  `UnitPrice` decimal(4,2) NOT NULL,
  `UnitsInStock` int(10) NOT NULL,
  PRIMARY KEY (`ProductID`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=78 ;

jquery_pagination.js
Contains javascript this script works like a data controller.

$(document).ready(function()
{
//Data Loading Image
function Data_Load()
{
$("#loading").fadeIn(900,0);
$("#loading").html('<img src="bigLoader.gif" />');
}
//Hide Loading Image
function Hide_Load()
{
$("#loading").fadeOut('slow');
};

//Default Starting Page Results
$("#pagination li:first")
.css({'color' : '#FF0084'}).css({'border' : 'none'});
Data_Load();
$("#content").load("pagination_data.php?page=1", Hide_Load());

//Pagination Click
$("#pagination li").click(function(){
Data_Load();
//CSS Styles
$("#pagination li")
.css({'border' : 'solid #dddddd 1px'})
.css({'color' : '#0063DC'});

$(this)
.css({'color' : '#FF0084'})
.css({'border' : 'none'});

//Loading Data
var pageNum = this.id;
$("#content").load("pagination_data.php?page=" + pageNum, Hide_Load());
});

});

config.php
You have to change hostname, username, password and databasename.

<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "";
$mysql_database = "learneveryday_tutorial";
$db = mysql_connect($mysql_hostname, $mysql_user, $mysql_password)
or die('Error connection to database server: ' . mysql_error());
mysql_select_db($mysql_database, $db)
or die('Error connection to database server: ' . mysql_error());
?>

pagination.php
User interface page.

<?php
include('config.php');
$per_page = 10;

//Calculating no of pages
$sql = "select count(*) from northwind_products";
$result = mysql_query($sql);
$count = mysql_fetch_row($result);
$pages = ceil($count[0]/$per_page);

?>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery_pagination.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />

<div id="loading" ></div>
<div id="content" ></div>
<ul id="pagination">
<?php
//Pagination Numbers
for($i=1; $i<=$pages; $i++)
{
echo '<li id="'.$i.'">'.$i.'</li>';
}
?>
</ul>

pagination_data.php
Simple php script display data from the messages table.

<?php
include('config.php');
$per_page = 10;
if($_GET)
{
$page=$_GET['page'];
}

$start = ($page-1)*$per_page;
$sql = "select * from northwind_products order by ProductID limit $start,$per_page";
$result = mysql_query($sql);
?>
<table width="800px">
<?php
while($row = mysql_fetch_array($result))
{
$ProductID=$row['ProductID'];
$ProductName=$row['ProductName'];
?>
<tr>
<td><?php echo $ProductID; ?></td>
<td><?php echo $ProductName; ?></td>
</tr>
<?php
}
?>
</table>

CSS Code
CSS code for page numbers.

#loading
{
width: 100%;
position: absolute;
}
li
{
list-style: none;
float: left;
margin-right: 16px;
padding:5px;
border:solid 1px #dddddd;
color:#0063DC;
}
li:hover
{
color:#FF0084;
cursor: pointer;
}

You can download the full code from bellow link.