MySandbox » jquery

jQuery Tutorial : Simple ajax star rating with php (extended)

ronggur — Mon, 18 Jan 2010 23:32:41 +0000

Some people ask me question about how to implement my last star rating in multiple star rating, and here is the answer on how to implement it.

1. Upgrade latest table

Since you’ll need to add ‘id’ on multiple record then we need to upgrade the existing table. Here is the full sql

CREATE TABLE IF NOT EXISTS `vote` (
 `id` int(11) NOT NULL auto_increment,
 `desc` varchar(50) NOT NULL,
 `counter` int(8) NOT NULL default '0',
 `value` int(8) NOT NULL default '0',
 PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
-- Dumping data for table `vote`
--

INSERT INTO `vote` (`id`, `desc`, `counter`, `value`) VALUES
(1, 'star - 1', 0, 0),
(2, 'star - 2', 0,0);

2. CSS

We still can stylesheet from the previous post. No need to modify it.

3. PHP files (index.php & update.php)

There are some code changes in this files. If in previous post we just need an html file to represent the star rating, now we need php file to do it. Here is full code for index.php and some simple code explanation in it





jQuery Tutorial : Simple ajax star rating











Star Rater - 


 
 
 
 1
 2
 3
 4
 5

And this is for update.php

4. Javascript

// JavaScript Document
 $(document).ready(function() {
 // get rating function
 function getRating(id){
 $.ajax({
 type: "GET",
 url: "update.php",
 data: "do=getrate&id="+id,
 cache: false,
 async: false,
 success: function(result) {
 // apply star rating to element
 $("#current-rating-"+id+"").css({ width: "" + result + "%" });
 },
 error: function(result) {
 alert("some error occured, please try again later");
 }
 });
 }

 // link handler
 $('.ratelinks li a').click(function(){
 // get the parent id
 var idStar = $(this).parent().parent().attr('id');
 $.ajax({
 type: "GET",
 url: "update.php",
 data: "rating="+$(this).text()+"&do=rate&id="+idStar,
 cache: false,
 async: false,
 success: function(result) {
 // remove #ratelinks element to prevent another rate
 $("#ratelinks").remove();
 // get rating after click
 getRating(idStar);
 },
 error: function(result) {
 alert("some error occured, please try again later");
 }
 });

 });
 });

That’s it! hope it works for you . You can add some modification like notification, or loader while processing.

- View Demo

- Download zip file jQuery Tutorial : Simple ajax star rating with php (extended) (309)

You can give me some coffee if you want to :D

Bookmark It

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Google Maps : Pointing and get your marker location

ronggur — Sat, 01 Aug 2009 11:13:44 +0000

In this post i want to try give some simple script to get your marker location in google maps. Next we will ceate one marker and when you drag and drop it, you’ll get the position of the marker ( latitude and langitude ). You can use this kind of script if you want to add google maps feature in to your websites and want to point position and save it in to your database

Image Preview

As usual we’ll use jQuery to give some little help. Lets start

1. HTML & PHP files

You can copy html below. Make sure you already have key for your google maps and use your own key . And also don’t forget to include jQuery library.

To get the current position of the marker, we will use hidden intput to store the position temporary before we post it to php file.






Google Map in Learning









Your Location : 
Latitude : 
Longitude :

Next is one line php script and named it ‘post.php’, this script just to show that your post data from html is work.


var_dump($_POST);

2. JavaScript

Lets create addmarker.js. Here is the code, i put some comment above the line


$(document).ready(function() {
$("#wrapper_map").width($("#map_canvas").width());
// initialize default lat &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; lang in this case i set to Indonesia

var indLat = -2;
var indLng = 120;

// setup default position into text and hidden input

$("#sLat").text(indLat);
$("#sLng").text(indLng);
$("#lat").val(indLat);
$("#lng").val(indLng);

// start setup google maps

var map = new GMap2(document.getElementById("map_canvas"));
var center = new GLatLng(indLat, indLng);
map.setCenter(center, 4);
map.setUIToDefault();

var marker = new GMarker(center, { draggable: true });

GEvent.addListener(marker, "dragstart", function() {
map.closeInfoWindow();
});

// a listener to get current position and store it to hidden input in html

GEvent.addListener(marker, "dragend", function() {
// latitude
$("#sLat").text(roundNumber(getObjectLoc(marker, 'lat'), 5));
// store it temporary in hidden input (lat)
$("#lat").val(getObjectLoc(marker, 'lat'));
// longitude
$("#sLng").text(roundNumber(getObjectLoc(marker, 'lang'), 5));
// store it temporary in hidden input (lng)
$("#lng").val(getObjectLoc(marker, 'lang'));
});

// adding marker
map.addOverlay(marker);
// end setup google maps

// fungction to get the marker posistion

getObjectLoc = function(object, type){
var objectLoc = '';
if(type=='lat'){
objectLoc = object.getLatLng().lat();
}else{
objectLoc = object.getLatLng().lng();
}

return objectLoc;
}

// just round your position if you think it is too long to show

roundNumber = function(rnum, rlength) {
newnumber = Math.round(rnum*Math.pow(10,rlength))/Math.pow(10,rlength);
return newnumber;
}
});

That’s all. So when you press ‘Save’ button it should print out your current marker position.

- View Demo

- Download file Google Maps : Pointing and get your marker location (100)

You can give me some coffee if you want to :D

Bookmark It

New Google search interface Have you tried the new google search intrerface? here i...

Related posts brought to you by Yet Another Related Posts Plugin.

jQuery Tutorial : Simple ajax star rating with php

ronggur — Sat, 30 May 2009 03:08:11 +0000

I made this simple ajax star rating for my latest poject. And now i want to share it to you. Let’s start it .

Step 1 : CSS Star Rater

First thing is the star rater. I got this cool ‘css star rater’ from http://www.komodomedia.com/ . I assumed that we already understood how to use it, so we will not talk too much about this ‘css star rater’.

Step 2 : Create MySQL table

Next is create table (using MySQL) to store the data. You can copy the script below


CREATE TABLE IF NOT EXISTS `vote` (
`counter` int(8) NOT NULL default '0',
`value` int(8) NOT NULL default '0'
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Step 3 : PHP

After finished create table, then we can start create some php code to handle input, update and retrieve data from the database, here is the code. I added some important comment in it

Step 4 : JavaScript

Next thing is javascript code. Below is the code, you can put this code between tag or put it in separated javascript file.

Don’t forget to link the jquery library into your document

Step 5 : Put it all together

Put your css, javascript in one html






jQuery Tutorial : Simple ajax star rating










Star Rater



1
2
3
4
5

That’s it! . You can add some modification like notification, or loader while processing.

- View Demo

- Download zip file jQuery Tutorial : Simple ajax star rating with php (2503)

This article inspired by http://www.yvoschaap.com/

You can give me some coffee if you want to :D

Bookmark It

jQuery Tutorial : Simple ajax star rating with php (extended) Some people ask me question about how to implement my...

Related posts brought to you by Yet Another Related Posts Plugin.

jQuery Tutorial : Horizontal Animated Menu

ronggur — Sun, 25 Jan 2009 16:07:58 +0000

In this occasion, we’ll try to build basic horizontal animated menu using jQuery. Ok, lets just start it

Step 1 : Create files needed

Ok, first let us create files needed to build this ‘menu’. All we need is :

jQuery library, you can download the latest version in http://code.google.com/p/jqueryjs/downloads/list
JavaScript document – let us named it ‘menu.js’
index.html
style.css

Let we bundle it in one directory.

Step 2:Build html structure

After all files created then we can start from build some structure in index.html including embedding documents from outside (jQuery library, style.css, menu.js) into section. If you too lazy to type it your self, all you have to do just copy following code into your index.html :p.






Jquery Tutorial : Horizontal animated menu







Home
About Us
Contact Us

Finished? lets go to the next step

Step 3 : Create style sheet code

We need some basic styles to make the menu working. Tag

is to display menu description. This

will create automatically by using jQuery function and value in it is taken from ‘title’ attribute in inside the list. We’ll see it later.


*{
margin:0;
padding:0;
}
body{
font:12px Arial, Helvetica, sans-serif;
color:white;
}
a{
text-decoration:none;
color:white;
}
#wrapper{
padding:40px 40px;
}
#menu{
float:left;
}
ul,li{
list-style:none;
}
li{
padding:10px 10px;
height:40px;
float:left;
width:100px;
background-color:#333333;
border-right:1px solid #666666;
overflow:hidden;
display:block;
}
li a{
float:left;
vertical-align:top;
position:absolute;
}
li p{
vertical-align:top;
text-align:left;
margin-left:0;
margin-top:0;
padding-left:65px;
width:155px;
text-align:right;
color:#CCCCCC;
display:none;
}

Step 4: Create javascript code

After styles code finished, last step is code for javascript. You can copy my code below. I already put comment each line.

*update script in Friday 17 July 2009 - thanks to http://www.pixelmakers.co.uk


$(document).ready(function() {
// initialize default menu width

initwidth = $("li").width(); // updated

// hover in
$("li").hover( function(){
// get the title inside 
description = $(this).children("a").attr("title");
// start the animation
$(this).stop().animate({width: "220"},{queue:false, duration:"fast" });
// remove previously 
$(this).children("p").remove();
// create 
 and attach title into it
$(this).find("a").after("
"+description+"")
// create animation to make it looks good
$(this).children("p").stop().animate({ opacity: "show" }, {queue:false, duration:"fast"});
// hover out
},function(){
// animate it to the basic width
$(this).stop().animate({width: initwidth},{queue:false, duration:"fast"});
// fade out animation
$(this).children("p").stop().animate({ opacity: "0" }, {queue:false, duration:"fast"});
});
});

Done!, that’s all. If you’ve been following the steps correctly, the menu effect should working properly.

Let me know if there’s somethin more easy step to make the similar effect, cause i’m also in learning jQuery .

You can view the demo here or download full sourcode jQuery Tutorial : Horizontal Animated Menu | size : 20.2 KB

You can give me some coffee if you want to :D

Bookmark It

jQuery Tutorial : Simple ajax star rating with php (extended) Some people ask me question about how to implement my...

Related posts brought to you by Yet Another Related Posts Plugin.