Digital Indian Gov: Javascript

Showing posts with label Javascript. Show all posts

Youtube Instant Search with Jquery and Ajax

SoAs.in June 22, 2017 Javascript

The instant search feature has massively changed the web in past couple of weeks. I had developed real-time Youtube instant search with Jquery and Ajax. It is very simple like my previous posts, just reading the Youtube API JSON file with Jquery.

Javascript Code
$(".search_input").keyup(function(){})- search_input is the class name of input tag. $(this).val() - calling the input search box value. The encodeURIComponent() function encodes special characters (More infomation).

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

$(".search_input").keyup(function()
{
var search_input = $(this).val();
var keyword= encodeURIComponent(search_input);
// Youtube API 
var yt_url='http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&format=5&max-results=1&v=2&alt=jsonc';

$.ajax
({
type: "GET",
url: yt_url,
dataType:"jsonp",
success: function(response)
{

if(response.data.items)
{
$.each(response.data.items, function(i,data)
{
var video_id=data.id;
var video_title=data.title;
var video_viewCount=data.viewCount;
// IFRAME Embed for YouTube
var video_frame="<iframe width='640' height='385' src='http://www.youtube.com/embed/"+video_id+"' frameborder='0' type='text/html'></iframe>";

var final="<div id='title'>"+video_title+"</div><div>"+video_frame+"</div><div id='count'>"+video_viewCount+" Views</div>";

$("#result").html(final); // Result

});
}
else
{
$("#result").html("<div id='no'>No Video</div>");
}
}
});
});
});
</script>
// HTML code
<input type="text" class='search_input' />
<div id="result">
</div>

Youtube JSON file
JSON file keyword : Twitter Oauth 9lessons

{
"apiVersion":"2.0",
"data":
{
"updated":"2010-09-29T12:44:49.913Z",
"totalItems":2,
"startIndex":1,
"itemsPerPage":1,
"items":[{
"id":"yhrbmUbF0IE",
"uploaded":"2010-02-23T18:21:03.000Z",
"updated":"2010-09-21T01:50:37.000Z",
"uploader":"9lessons",
"category":"Tech",
"title":"Twitter Oauth Connect",
"description":"labs.9lessons application to twitter oauth connect using PHP",
"tags":["PHP","twitter","Oauth"],
"thumbnail":
{
"sqDefault":"http://i.ytimg.com/vi/yhrbmUbF0IE/default.jpg",
"hqDefault":"http://i.ytimg.com/vi/yhrbmUbF0IE/hqdefault.jpg"
},
"player":
{
"default":"http://www.youtube.com/watch?v\u003dyhrbmUbF0IE&feature\u003dyoutube_gdata_player",
"mobile":"http://m.youtube.com/details?v\u003dyhrbmUbF0IE"},
"content":
{
"1":"rtsp://v6.cache2.c.youtube.cb3MM/0/0/0/video.3gp",
"5":"http://www.youtube.com/v/yhrbmUdata",
"6":"rtsp://v6.cache7.c.youtube.com/.3gp"
},
"duration":93,
"rating":3.0,
"likeCount":"1",
"ratingCount":2,
"viewCount":2481,
"favoriteCount":1,
"commentCount":1,
"accessControl":
{
"syndicate":"allowed",
"commentVote":"allowed",
"rate":"allowed",
"list":"allowed",
"comment":"allowed",
"embed":"allowed",
"videoRespond":"moderated"
}}
]
}
}

CSS

body 
{
background-color:#86c9ef;
color:#000;
font-family:'Georgia', Times New Roman, Times, serif
}
#result
{
background-color:#000;
margin-top:25px;
min-height:400px;
width:640px;
border:solid 10px #ffffff;
-moz-border-radius:9px;
-webkit-border-radius:9px;
}
#no
{
padding:30px;
font-size:24px;
color:#fff;
}
#title
{
background-color:#fff;
font-size:26px;
text-align:left;
padding-bottom:8px;
}
#count
{
background-color:#fff;
text-align:left;
padding-top:8px;
}

Twitter Oauth Home Timeline Display with Jquery and PHP.

SoAs.in June 22, 2017 Javascript

In this post I want to explain how to display Twitter Oauth home time line with Jquery and PHP. it is very simple just follow this post. I hope you like this.

Twitter Home Timeline JSON File
Take a look at blue color bold words.

{ "posts":[
{        
"favorited": false,
"contributors": null,
"truncated": false,         
"text": "9lessons blog http://9lessons.info",
"created_at": "Tue Sep 14 06:48:09 +0000 2010",         
"retweeted": false,         
"coordinates": null,         
"source": "<a href="http://labs.9lessons.info">labs</a>",         
"in_reply_to_status_id": null,         
"in_reply_to_screen_name": null,         
"in_reply_to_user_id": null,         
"place": null,         
"retweet_count": null,         
"geo": null,         
"id": 24454801041, // Tweet Id        
"user": 
{           
   "follow_request_sent": false,            
   "profile_use_background_image": true,            
   "id": 15761916, //User Id
   "verified": false,            
   "profile_sidebar_fill_color": "FFFFFF",            
   "profile_text_color": "000000",            
   "followers_count": 2242,            
   "protected": false,            
   "location": "Chennai, INDIA",            
   "profile_background_color": "dedede", 
   "listed_count": 170,            
   "utc_offset": 19800,
   "statuses_count": 1097,  
   "description": "Engineer, Blogger, I love skyblue web",            
   "friends_count": 80, 
   "profile_link_color": "ad0000",
   "profile_image_url": "http://url/srinivas_normal.jpg", 
   "notifications": false,            
   "show_all_inline_media": false,            
   "geo_enabled": false,            
   "profile_background_image_url": "http://url/newbgx.png",            
   "name": "Srinivas Tamada ",            
   "lang": "en",            
   "profile_background_tile": false,            
   "favourites_count": 9,            
   "screen_name": "9lessons",            
   "url": "http://9lessons.info",            
   "created_at": "Thu Aug 07 10:47:26 +0000 2008",            
   "contributors_enabled": false,            
   "time_zone": "Chennai",            
   "profile_sidebar_border_color": "333333",            
   "following": true        
}     
}, 

{
// Second Tweet...
},
{
// Third Tweet...
}

]}

home.php
Contains javascript and PHP code. $(".mytweets").click(function(){}) - mytweets is the class name of anchor tag using $.getJSON() functions calling tweets.json file with passing $user_session.

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.timeago.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".mytweets").click(function()
{
$.getJSON("tweets.json?user=<?php echo $user_session;?>",
function(data)
{
$.each(data.posts, function(i,data)
{
// Reading JSON file take a look at above code bold blue color words.
var id=data.id;
var text=data.text;
var created_time=data.created_at;
var screen_name=data.user.screen_name;
var image=data.user.profile_image_url;
var source=data.source;

var div_data ="<div class='twitter_status' id='"+id+"'><img src="+image+" class='twitter_image'/><a href='http://twitter.com/"+screen_name+"'>"+screen_name+"</a> "+text+"<br/><div class='twitter_posted_at'><span class='timeago' title='"+created_time+"'></span><i>via "+source+" </i></div></div>";
$(div_data).appendTo(".tweets");
$(".timeago").timeago(); // jquery timeago plugin converting into timestamp
});
});
return false;
});
});
</script>
<a href='#' class='mytweets'>My Tweets </a> 
<div class='tweets'></div>

.htaccess file code
$.getJSON function much flexible .json So that using .htacces file rewriting tweets.php to tweets.json.

RewriteEngine on

RewriteRule tweets.json$ tweets.php

Library http://github.com/jmathai/twitter-async

tweets.php (About JSON code is the output)
Contains PHP code you can download the library files from my previous post. Using method get_statusesHome_timeline() getting twitter home timeline json file. More information about methods click here

<?php
include("db.php");
include 'EpiCurl.php';
include 'EpiOAuth.php';
include 'EpiTwitter.php';
$consumerKey='xxxxxxxxxxxxxxxxxxxx';
$consumerSecret='xxxxxxxxxxxxxxxxxxxx';

if($_GET['user'])
{
$user=$_GET['user']; // user session
// Getting stored oauth_token and oauth_token_secret values form users table
$sql=mysql_query("select oauth_token,oauth_token_secret from users where user='$user'");
$row=mysql_fetch_array($sql);
$oauthToken=$row['oauth_token'];
$oauthSecret=$row['oauth_token_secret'];
if(strlen($oauthToken)&gt;5 && strlen($oauthSecret)>5 )
{
$Twitter = new EpiTwitter($consumerKey, $consumerSecret);
$Twitter->setToken($oauthToken,$oauthSecret);
$hometimeline = $Twitter->get_statusesHome_timeline();
$tweets=json_encode($hometimeline-&gt;response);
$final = '{"posts":'.$tweets.'}';
echo $final;
}
}
?>

CSS

.twitter_status
{
min-height:60px;
padding:6px;
border-bottom:solid 1px #DEDEDE
}
.twitterr_status a
{
color:#3cf;
text-decoration:none
}
.twitterr_status a:hover{
color:#3cf;
text-decoration:underline
}
.twitter_image{
float:left;
margin-right:14px;
width:50px;
height:50px;
padding:3px;
}
.twitter_posted_at{
font-size:11px;
padding-top:4px;
color:#999
}

Dynamic Dependent Select Box using Jquery and Ajax

SoAs.in June 22, 2017 Javascript

How to do dynamic dependent select box using Jquery, Ajax, PHP and Mysql. Dependent select box when a selection is made in a "Parent" box it allow to refresh a "child" box list data. In this post I had given a database relationship example betweent "category" and "subcategory". It's very simple jquery code hope you like this.

Database
Sample database tables. Data table contains list boxes complete data, data_parenttable foreign key relationship with Data table contains parent and child relation.

CREATE TABLE 'data'
(
'id' int primary key auto_increment,
'data' varchar(50),
'weight' int(2),
);

CREATE TABLE `data_parent`
(
`pid` int(11) primary key auto_increment,
`did` int(11) unique,
`parent` int(11),
Foreign key(did) references data(id)
)

Data storing like this.
data data_parent

sections_demo.php
Contains javascipt and PHP code. $(".country").change(function(){}- country is the class name of select box. Using $(this).val() calling select box value. PHP code displaying results from data table where weight='1'

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".country").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;

$.ajax
({
type: "POST",
url: "ajax_city.php",
data: dataString,
cache: false,
success: function(html)
{
$(".city").html(html);
}
});

});

});
</script>
//HTML Code
Country :
<select name="country" class="country">
<option selected="selected">--Select Country--</option>
<?php
include('db.php');
$sql=mysql_query("select id,data from data where weight='1'");
while($row=mysql_fetch_array($sql))
{
$id=$row['id'];
$data=$row['data'];
echo '<option value="'.$id.'">'.$data.'</option>';
} ?>
</select> <br/><br/>

City :
<select name="city" class="city">
<option selected="selected">--Select City--</option>
</select>

ajax_city.php
Contains PHP code. Displaying results from data and date_parent tables

<?php
include('db.php');
if($_POST['id'])
{
$id=$_POST['id'];
$sql=mysql_query("select b.id,b.data from data_parent a,data b where b.id=a.did and parent='$id'");
while($row=mysql_fetch_array($sql))
{
$id=$row['id'];
$data=$row['data'];
echo '<option value="'.$id.'">'.$data.'</option>';
}
}
?>

Digital Indian Gov

Labels

Layout

Post Style

Technology

Breaking News

Articles by "Javascript"

Youtube Instant Search with Jquery and Ajax

Twitter Oauth Home Timeline Display with Jquery and PHP.

Dynamic Dependent Select Box using Jquery and Ajax

Digitalindiagov.com

Contact Form