Drupal & Ajax using Jquery

Beginning Jquery In Drupal Theming

JQuery In Drupal

Drupal & AJAX. Drupalcamp Finland 2010

Basic Modalbox using Jquery

Hello, here i have demonstrated a simple modal popup using JQuery. This modal popup is very basic so u can understand the code flow easily.

Create a new HTML file and and follow these steps..

1. You have to add Jquery Core to at the header of your page.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

2. Then u have prepare the html like this.

<a href="#popup" name="modal">Click here to show popup</a>

<div id="popup_item">
 <div id="popup" class="modalbox" style="display:none;">
  <a href="#"class="close"/>Close</a>
  what ever the modal content! what ever the modal content! what ever the modal content! what ever the modal content! what ever the modal content!
 </div>
 <div id="shadow"></div>
</div>

The 1st <a> is the link which will active the modal popup and the <div id=”popup_item”> will be the modal popup.

3. Now You have to add the Jquery code which will make your modalbox/popup functional

<script>

$(document).ready(function() {    

 $('a[name=modal]').click(function(e) {

  e.preventDefault();
  var id = $(this).attr('href');
  var shadowHeight = $(document).height();
  var shadowWidth = $(window).width();
  $('#shadow').css({'width':shadowWidth,'height':shadowHeight});

  $('#shadow').fadeIn('fast');    

  var winH = $(window).height();
  var winW = $(window).width();

  $(id).css('top',  winH/2-$(id).height()/2-100);
  $(id).css('left', winW/2-$(id).width()/2);

  $(id).fadeIn('slow'); 

 });

 $('#popup_item #shadow').click(function () {
  $(this).hide();
  $('#shadow').fadeOut('slow');    
  $('.modalbox').hide();
 });        

 $('#popup_item .close').click(function (e) {
  e.preventDefault();
  $('#shadow').fadeOut('slow');    
  $('.modalbox').hide();
 });        

});

</script>

4. Finally the CSS,

<style>
#shadow {
 display:none;
 position:fixed;
 left:0;
 top:0;
 z-index:9000;
 background-color:#000;
 opacity: 0.8;
}

#popup_item .modalbox {
 position:fixed;
 left:0;
 top:0;
 display:none;
 z-index:9999;
}

#popup_item .close{
 position:absolute;
 background-color:#fff;
 border:1px solid red;
 color:red;
 padding:2px 5px;
 right:-10px;
 text-decoration:none;
 top:-10px;    
}

#popup_item #popup {
 width:400px;
 height:auto;
 padding:10px;
 background-color:#fff;
}
</style>

Now run the html file and enjoy.

Modalbox comparison

Feature Overview

Module I GI IS HC IC V MS
Lightbox2 YES YES YES YES YES YES YES
jQuery Lightbox YES YES NO NO NO NO NO
Thickbox YES YES NO YES1 YES NO2 YES
Shadowbox YES YES YES YES YES YES YES3
Greybox Redux YES NO NO YES NO NO NO
I  = Images
GI = Grouped Images
IS = Image Slide show
HC = HTML Content
IC = Inline Content
V  = Videos
MS = Multilingual Support

Notes:

  1. Thickbox: the documentation says it supports HTML content via the use of iframes. While I managed to get this to work with some sites, it didn’t work with others including google.com. I believe this is because of the addition of GET parameters to the url.
  2. Thickbox: in theory it should be possible to view videos in a thickbox, but it’s not enough to just provide it with a link to a video. It works quite nicely with Embedded Media Field videos though where the emfield module creates the embed object and inserts it into thickbox’s iframe.
  3. Shadowbox: multilingual support is available in the 5.x-1.0 version. 5.x-2.0 moves language support from the module to Shadowbox itself and proper options will be added to allow translation in the near future. Multi-lingual support will be added to the 6.x-1.x-dev version when it has a full release.

For reference, “grouped images” means that you can group images together and manually navigate between them using “next” and “previous” buttons. A “slideshow” means it’s possible to group images together and have the browser automatically traverse through them without clicking any buttons, usually accompanied by a play/pause feature. “Video” support means either that they can display flash content in the lightbox or video in a player within the lightbox.

Source: drupal.org

Flash cache problem when parsing XML file

Flash cache problem when parsing XML file

Sometimes when we use a flash mp3 player where song lists are fetched from a XML file, it shows the same song as before after re-writing the XML and reloading the player using AJAX. This is simply a cache problem u know.

To solve this issue u need to open the source (.fla) of ur flash player. At the line where u call the XML file

Example:

myMp3player.loadConfig("http://<path-to-server>/config.xml");

Here after the file name (config.xml) add this code :

+"?nocache="+new Date().getTime()

That is,

myMp3player.loadConfig("http://<path-to-server>/config.xml"+"?nocache="+new Date().getTime());

Done! now u can call ur flash player by AJAX without having any cache problem. :)

My quick Facebook Application :)

I thought to prepare an application where I hold all users’ blood group. Dont afraid to see how scratched the code is :P

Application url:  http://apps.facebook.com/mybloodgroup/

DB SQL:

CREATE TABLE `bloodgroup` (
 `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
 `fb_uid` VARCHAR( 255 ) NOT NULL DEFAULT '0',
 `fb_uname` VARCHAR( 255 ) NULL ,
 `group` VARCHAR( 255 ) NULL
 ) ENGINE = MYISAM

PHP Code:

<?php
// Application: bloodgroup

// u have to put the fb php client to a specific directory
require_once '../client/facebook.php'; 

$appapikey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
$appsecret = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
$facebook  = new Facebook($appapikey, $appsecret);
$user_id   = $facebook->require_login();

$db_ip   = "localhost";
$db_user = "xxxxxx";
$db_pass = "xxxxxx";
$db_name = "xxxxxx";

mysql_connect($db_ip, $db_user, $db_pass) or die("Could not connect: " . mysql_error());
mysql_select_db($db_name);

if(isset($_POST['action']) && $_POST['action']=='insert'){

 $fb_uid = $user_id;
 $bg_group = $_POST['bg_group'];
 $bg_fb_uname = $_POST['bg_fb_uname'];

 $sql= "SELECT * FROM `bloodgroup` WHERE fb_uid = ".$user_id." ";
 $result = mysql_query($sql) or die('Error, select failed');
 if (mysql_num_rows($result) != 0) { $needupdate = 1; }

 if ($needupdate == 1){
 $sql= "UPDATE `bloodgroup` SET `group` = '".$bg_group."',`fb_uname` = '".$bg_fb_uname."' WHERE fb_uid = ".$user_id." ";
 mysql_query($sql) or die('Error, update failed');
 }
 else{
 $sql= "INSERT INTO `bloodgroup` (`fb_uid`,`fb_uname`,`group`) VALUES ('".$user_id."','".$bg_fb_uname."','".$bg_group."')";
 mysql_query($sql) or die('Error, insert failed');
 }

}

?>
<fb:dashboard></fb:dashboard>
<h1> BLOOD GROUP </h1>

<div>
<form id="bloodgroup_insert" name="bloodgroup_insert" method="post" action="<? $_SERVER['PHP_SELF'] ?>">
 My Blood Group :
 <select name="bg_group">
 <option>A Positive</option>
 <option>A Negative</option>
 <option>B Positive</option>
 <option>B Negative</option>
 <option>AB Positive</option>
 <option>AB Negative</option>
 <option>O Positive</option>
 <option>O Negative</option>
 </select>
 <input type="hidden" id="bg_fb_uname" name="bg_fb_uname" value="<?php echo "<fb:name useyou='FALSE' uid='$user_id'/>"; ?>" />
 <input type="hidden" id="action" name="action" value="insert"/>
 <input type="submit" name="add" value="ADD" />
</form>
</div>

<?
 //SQL for own BG
 $sql= "SELECT * FROM `bloodgroup` WHERE fb_uid = ".$user_id."";
 $result = mysql_query($sql) or die('Error, select failed');

 if (mysql_num_rows($result) == 0) {
  $notset_bg = 1;
  $bloodgroup = "Not set yet";
 }
 else{
  $notset_bg = 0;
  while ($row = mysql_fetch_assoc($result)) {
   $bloodgroup = $row["group"];
   $bloodgroup_own = $bloodgroup;
   $bg[$user_id]["group"] = $row["group"];
   $bg[$user_id]["entrytime"] = $row["entrytime"];
  }
 }

 if($no_bloodgroup == 0){
  echo "<br> HELLO <fb:name useyou=\"FALSE\" uid=\"$user_id\"/>";
  echo "<fb:profile-pic uid=\"$user_id\" size=\"square\" linked=\"true\" /> Your Blood group is ".$bloodgroup.", Added on :".$bg[$user_id]["entrytime"].".";
  echo "<br>";
 }
?>

<? // People Who Have same Blood Group like my one.
echo "<p>People Who Have ".$bloodgroup_own." Blood Group : </p>";
echo "<br>"; $sql= "SELECT * FROM `bloodgroup` WHERE `group` LIKE '".$bloodgroup_own."'  ORDER BY RAND() LIMIT 5";
 $result = mysql_query($sql) or die('Error, select failed');
 if (mysql_num_rows($result) == 0) {
 $nodata_bg = 1;
 $bloodgroup = "Not set yet";
 }
 else{
 $nodata_bg = 0;
 while ($row = mysql_fetch_assoc($result)) {
 $bloodgroup = $row["group"];
 echo "<fb:profile-pic uid= ".$row["fb_uid"]." size=\"square\" linked=\"true\" /> <!--fb:name uid=\"$friend\"/--> : ".$bloodgroup." ";
 }
 }
?>

<div style=" height:5px; width: auto; background-color:#993366;" > </div>

<? // my friends blood group
$friends = $facebook->api_client->friends_get();
echo "<p>My Friends Blood Group : </p>";
echo "<br>";
$i=1;
foreach ($friends as $friend) {

 //SQL to find the BG
 $sql= "SELECT * FROM `bloodgroup` WHERE fb_uid = ".$friend."";
 $result = mysql_query($sql) or die('Error, select failed');
 if (mysql_num_rows($result) == 0) {
 $no_bloodgroup = 1;
 $bloodgroup = "Not Available";
 }
 else{
 $no_bloodgroup = 0;
 while ($row = mysql_fetch_assoc($result)) {
 $bloodgroup = $row["group"];
 $bg[$friend]["group"] = $row["group"];
 $bg[$friend]["pos-neg"] = $row["pos-neg"];
 $bg[$friend]["entrytime"] = $row["entrytime"];
 }
 }
 if($no_bloodgroup == 0){
 echo "<fb:name uid=\"$friend\"/> : ".$bloodgroup;
 echo "<br>";
 $i++;
 }
}

?>
<div style=" height:15px; width: auto;><? echo "Developed by, <fb:name uid=619926881 />"; ?> </div>