15 November 2011

Drupal use two different jquery version with noconflict

While developing a website using drupal, we had a requirement, this requirement can be achieved using simple function available on recent release of jQuery, but in drupal 6 core has jQuery 1.2.6 and also if we update the jQuery with drupal module jQuery_update, we shall have only 1.3.2. So next, we can add recent release of jQuery1.7 through theme. Our new requirement will work now fine, hey we appreciate ourselves. But after a few minutes, we will come to know that many other jQuery function stopped working. After debugging, we will know that both version of jQuery is loaded in the same page, so version conflict.

What is the solution?

After digging the net and with reference to the jQuery documentation, I came to know that jQuery has a feature Using jQuery with Other Libraries i.e jQuery can be used with other libraries like mootools,  prototype etc. in a single webpage. To enable this feature jQuery has a function called noConflict.

How to use this function.
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
     // Use jQuery via jQuery(...)
     // Use Prototype with $(...), etc.

Above example demonstrates how jquery can be used with other library. $ is used in both libraries so because of conflict javascript will stop execution.  jQuery.noConflict() line will release the $ variable from jQuery, so we have to write using jquery instead of $ in the jQuery program, this makes the prototype to use $ and execute the code. this way the both libraries run smoothly.

In the same way, we can use the two different version of jQuery in a single page (Drupal). By default drupal core will add jQuery 1.2.6 So in your code you add the latest jQuery and call the noConflict function like the below sample code. Below sample code use a shortcut $j, so from here instead of $ you may use the
$j to access the functions from jQuery 1.7.
<script src="jquery-latest.js"></script>
     var $j = jQuery.noConflict();
     // Use jQuery via $j(...)
       // isNumeric function introduced in latest version 1.7
     // Use $ for 1.2.6 version $(...), etc.

If you are using a plugin which is depends on 1.7 then use as below

<script src="jquery-latest.js"></script>
     // Use jQuery via $j(...)
       // we may use usual code here
     // Use $ for 1.2.6 version $(...), etc.

11 August 2011

Drupal: How to add css file to specific drupal page.

We all know in Drupal, we can add css files in theme folder via info file, through the declaration [stylsheets][all][] = style.css.

We can go on add as many css files. All CSS files added through info file will be available through out the site.

If we are working to develop a small website, this will be a right solution, where we won't worry about the performance / maintainability etc.

But when we work for large scale web portals, we would plan for each minor aspects of the web portal. In this case we would have many pages, so we would have a large / heavy CSS file.

Now, we want to split the CSS file in theme folder and we want to add them only on required pages.

So if we have our module, Hook_init is the right place to add the css, we can add the css file, by calling drupal_add_css function.

Hook_init will be called on every page callback, but it will not called when the page is cached. Don't worry cached page already will have your css.

In module also, if we have page callback, then we can call the drupal_add_css inside the callback function, which makes sure, only when the callback function is called the css will add to the page.

Don't try to use the drupal_add_css in page tpl's which won't work, because already variables are generated in preprocess function.

Here i will explain you to add css file in hook_init for multiple pages.

The code will look like

  // declare an array to list the pages we need to add css, 
//This will be easy to add pages in future. $pages = array ( 'node/add/page', 'node/%/edit', 'home', 'home/*', ); // convert the array to string, append a newline to every array element. $pages = implode(chr(10),$pages); // this drupal_get_path_alias
// will return the alias path if found or the original one which is passed. $path = drupal_get_path_alias($_GET['q']); // Compare with the internal and path alias (if any). $page_match = drupal_match_path($path, $block->pages); if ($path != $_GET['q']) { $page_match = $page_match || drupal_match_path($_GET['q'], $block->pages); } if ($page_match) { drupal_add_css(drupal_get_path('xyz','module'),'module'); } ?>

Place this snippet inside the hook_init, now your css will be added only on above listed pages in $pages array.

28 July 2011

How to theme Unordered (item) list with unique id or class assigned to all LI in Drupal

Drupal has many built in theme function to construct HTML elements, One of the frequently used is 'Item_list'. This theme function used to build a HTML ordered / unordered list.
$data = array('List 1','List 2', 'List 3');
$output = theme('item_list', $data);
The Above use of theme function will output the <UL> and <LI> without any class or id.
For Example:
<ul >
<li > List 1 </li>
<li > List 2 </li>
<li > List 3 </li>

If we need to have the output as below.
For Example:
<h3> Title </h3>
<ul class="my-list">
<li clase="list" id="list-1"> List 1 </li>
<li clase="list" id="list-2"> List 2 </li>
<li clase="list" id="list-3"> List 3 </li>

Then our code will look like.

$items = array(
array('data' => 'List 1', 'Class' => 'list', 'id' => 'list-1'),
array('data' => 'List 2', 'Class' => 'list', 'id' => 'list-2'),
array('data' => 'List 3', 'Class' => 'list', 'id' => 'list-3')
$title = 'Title';
$output = theme('item_list', $items, $title, 'ul', array('class' => 'my-list'));

In $items array for each item we defined an array with key data, class and id, this will be transformed to HTML.
Title parameter will be printed prefix to the UL tag, with header tag.
And 'ul' parameter decides the type ordered / unordered tag to be printed. defualt is UL
Last a class attribute to UL tag, you may add id or any HTML attribute to UL / OL tag, defining inside the array as key => value.
Refer this in Drupal API

27 July 2011

A journey with Drupal as a developer

Drupal - The word I heard in my office four years back(2007). From then with my company (Unimity Solutions Pvt. Ltd.), I started adopting the Drupal in my profession.

The early days when we started developing drupal 5 projects, it was very hard to understand.

For instance if we think about the form. A form in php is very simple, define the Form HTML with action attribute pointing to a PHP page, and the php page will manage all the server side functionality. But in Drupal you have to define the form in a array and you need to follow the hook system of drupal to handle the form server side validation and submission. To understand the Drupal form you must have knowledge about drupal hook system then you need to understand form api(which is a separate tutorial). First of all we are not able to relate any way the approach of PHP(or any platform) form submission and the drupal form.

Next if you talk about theme, Drupal has separated the logic and HTML. You will have a theme function or template file to put your HTML. Which is also very new to me. I use to put all HTML and PHP in the same page.

You will understand from my above views, that at early stage how pour I'm, I don't have proper knowledge about MVC also.

But as time move, I slowly started learning Drupal, at the same time I also started to understand the MVC concept, Web standards, Re-usablity, Scalability, Performance, Cache, Security, etc.As all these are properties of Drupal.

Now I'm capable to doing anything as required, by following all above said concepts, features and best practices. Drupal teach me all those concepts and features. Now I can  even build a framework. Thanks to Drupal.

If I praise Drupal, then I must not forgot the community, which is working for the development of Drupal framework. All my praise to Drupal is directly linked to the community.  Now I thought of giving back the community. For that as a first step I donated to Drupal Association and became individual member. The Second thing is now I started writing tutorials about Drupal. This Blog is the first step to the tutorial. In coming days I will write about Drupal, Web2.0, Jquery and Mobile technology.

Thanks to Drupal and its community.
My Drupal Profile