Fix Bootstrap theme error on Drupal using [Jquery update + Libraries ]

 hola chicos ;)

I recently installed Bootstrap theme on my site and enabled it to be my default theme, I noticed my firebug printing errors on my console and all js related features are disabled after the page reload,  which I started to suspect on my jquery file version and eventually I confirmed that version of my file is the culprit.

Drupal 7.x installation comes with the jquery version 1.4.x but as per date 05/2014 it is version 1.11.x so obviously you know why you get that error! I have listed few steps below to get rid of those junks!

Step 1
Install jQuery Update module and configure (admin/config/development/jquery_update) the version you need to make use of.

Note: selecting from cdn i.e(jquery, google) will fix the error for sure, if not follow the other steps down.

Step 2
Install Libraries API module and enable it , Install Bootstrap Libraries module and enable it

Step 3

Now download the latest version of bootstrap files from http://getbootstrap.com/ and extract the files in sites/all/libraries directory by renaming the folder “bootstrap”

Step 4

Make any configurations you need in the page /admin/config/development/bootstrap_library and hit save

The steps above will override all the old/existing jquery version and will be compatible with your bootstrap files.

Step 5

Post any questions or comments and Follow me on twitter @ashkar_rahman.

Drupal Quick Tip : Using Exposed filter in Block Display

This is related to my previous post about exposed filters and data export.

Making an exposed filter to display on a view page display is very simple, and making it to show in a view block  display just needs one option to be enabled.

if you’re unknown of it, you guys are going to spend hours finding it. hope this post will save you a lot of time…!

IN JUST ONE STEP!!!

If you’re in your block display and struggling to get your exposed filter simply set Use Ajax to ‘Yes’ on advanced options panel,  in default it is set to ‘No’ Check the screenshot below

Data export and exposed filter for date [ Drupal 7 Views] (in just 6 steps)

A lot of questions arise on using exposed filter for views data export, this queue helped me a little on how to fix it but not fully though, I think it would be helpful to someone out there who struggles with the same issue!

This post is all about using views exposed filters on views data export display type, I am listing a number of nodes and filtering it by user inputs for node created dates(which we use the popup calendar in Date module).

We assume that you have the needed modules below to achieve what you want.

• Views
• Date
• Views data export

Step 1:

Make sure you’ve enabled all needed modules and especially the date_popup that comes with date module, create a view for a content type(i.e : article), add the data export display and a page display,

Note :You won’t be able to save your view if these displays aren’t given a path.

Remember the path you give to data export display will be your file name you export, the path in your page display will be the path to help you look at what you’re going to export.

The “Format” in Data export could be an excel file to.

Step 2:

Add all needed fields in your data export display and make sure you have added the same in the page display too (add relationships/contextual filter if available).

For my convenience I set the page display to table format, which will look similar to what I am going to export, and add fields like, i.e (Title, node id, Posted date)

Step 3

Add the date popup calendar in “Filter criteria” and tick on the exposed filter option.

When you click on ‘add’ and search for the text ‘Date’ you’ll find many fields that is related to date (i.e node posted date, node updated date, etc...) you are supposed to select the “Date :Date (Node)” field that comes with the date module, take a look at the screenshot below.

Then select the options below :

“Popup” to get the popup calendar,  The granularity ,  etc…

especially the date that needs to get filter by: in our case it is the node post date which is the second red highlighted field on image

Then hit on “Apply and continue “

Finally click on the  exposed this filter option  checkbox and apply  it as shown below

Make sure you follow the step 3 completely on the page display as well.

Step 4

In the Data export display just below the path  option you'll find  ‘attach‘ where you need to attach your page display in it . which is one of the major step that we need to follow.

Step 5

Last step in our view ! select 'Parent sort' in the data export display settings .

Step 6

Now navigate to the path you've given in the page display , and you'll see the date filtering field which contains a date popup and an orange button called 'csv' or 'xls' embedded below your filtered contents.

Please add your questions or valuable comments !

Have a Great Day, Cheers!

Drupal Quick Tip: Issues using CkEditor and Wysiwyg with Drupal 7 (rendering Media (Vimeo,Youtube), version detection)

I am writing to all those who are frustrated just as me with the latest CkEditor version where it doesn't work as expected as the old versions, especially using Wysiwyg.

1. One of the most common problem the developers are facing after installing the Wysiwyg module and uploading the Ckeditor Library into the sites/all/libraries directory is, the Wysiwyg doesn't detect the version of the uploaded CkEditor when you navigate to /admin/config/content/wysiwyg  (I am talking about the version 4.0 and greater)

"The version of CKEditor could not be detected."

one of the solution (which is a bad practice) is to edit the ckeditor.js file inside the

directory sites/all/libraries/ckeditor, you will have to find the version written in the file

probably in the first line i.e (version:"4.1") and replace it with a lesser than the 4.0th

version i.e (version:"3.6")

2. Though the ^^^ above solves the Ckeditor detecting issue, this doesn’t work well with media embedding.

My simple solution for this is completely remove the latest version of your ckeditor and

re-upload the old but steady/reliable version of it (I prefer version 3.6.6.1)

Drupal Quick Tip: Create a Google map with Custom markers on Drupal in just 5 steps

1. Get the Latitude and Longitude of your map

• Go to http://www.satsig.net/maps/lat-long-finder.htm  and enter in the address. Click Go!

2. Get the API Key for your site

• Go to https://developers.google.com/maps/signup and enter in the website URL, then generate a key (this will need to be done twice, once for the dev site and again when we knew the live URL.

3. Get the JS code for to place it in you block

• Go to http://mapmaker.donkeymagic.co.uk/ and enter in the Latitude and Longitude [Step 1]. 
• Give the marker a name such as "myMarker". 
• Enter in the address into the Popup Content box.
• Click Add marker.
• Then click the"Share map" button
• Select JavaScript tab and you will see code generated. Copy that code.

4. Go to your Drupal site and add new block. Paste in the code. On the 7th line, it says key= and then some numbers and letters. Replace that entire line with the key you generated.

• Then within the function loadMap(), replace:
•  icon0.image = "http://www.google.com/mapfiles/marker.png"; icon0.shadow = "http://www.google.com/mapfiles/shadow50.png";
• with
• icon0.image = "/sites/all/themes/THEMENAME/images/MARKER-NAME.png"; icon0.shadow = "/sites/all/themes/THEMENAME/images/MARKER-SHADOW-NAME.png";

5.  Set the Block to the desired region/view.  And that's it ...!

, Drupal hooks : Basic Ajax request/response with Drupal 7 menu hook

Hello world!
This tutorial assumes that you are at least 50% familiar with drupal hook_menu()  and Jquery Ajax and I apologize in advance because I’ll be sticked with the topic and never come out of it. please post a comment below if you need more clarifications in any other areas not-related to the topic. Thank you.
 
My goal: Very simple!

• I am having a HTML form with a textfield in a page.
• Once the text field is filled and when the cursor moves/changes from it I need to pass the textfield value to my Drupal module with the use of AJAX and receive the response from it.

• How to create a custom module
• How to add a js to my module file
• So now we are all set with our custom module named “mymodule” with few files inside the directory
• mymodule.module
• mymodule.info
• mymodule.js (added to the module and could be named as your wish, not limited to your modules name )

Step 1

• In my module file I right the hook_menu()

Code:

/*

* Implementation of hook_menu()

*/

function mymodule_menu() {

$items['any/path/% ] = array(

  'page arguments' => array(2),

  'page callback' => 'myAnyFunction',

  'access arguments' => array('access content'),

  'type' => MENU_CALLBACK

 );

 return $items;

}

$items['any/path/% ] :  This is where you define a path, the “%” is the parameter meter that will be passed from the AJax request.

'page arguments' => array(2) :  You get the second argument of the path which is the ‘%’ (so “any” is 0 , “path” is 1, ‘%’ is 2).

'page callback' => 'myAnyFunction', : This is the function that will be triggered once the defined path is called, here is where we are going to right the response for Ajax.

'access arguments' => array('access content'):  This should be specified definitely when creating a module,if not you might get permission issues.

'type' => MENU_CALLBACK : Specify the menu type [checkout the ccomplte refrence here for menu types ]

return $items; You return the menu.

Step 2

• And right the below Jquery with ajax request

Code:

jQuery(document).ready(function() {

$('#mytextfield').change(function() {

//Get the value of the textfield on change

var textfieldvalue= $('#mytextfield').val();

//pass the value to the url you created in the hook_menu();

path = '/customer/autofill/'+textfieldvalue;

$.ajax({

            url: path,

            method: 'POST', //you can make use of the GET method tooo

            success: function(data) { // recieve the response from the defined function

                        alert(data);

            }

            });

              false;

            });

Step 3

• Now the response to the ajax to be written in the module file again
• Can you remember this 'page callback' => 'myAnyFunction'  we wrote in step 1
• So “myanyfunction” will be the function to respond the Ajax request

Code: 

//The $argument1 is the value passed by ajax and retrieved by hook_menu() and again passed to the function

function myAnyFunction($argument1){

//This will be printed as the response

echo ‘Successfully received ’. $argument1;

}

Hmmmm..! are we done?
BOOOOM! yes we did it.

Note :  This is a very basic thing that you can do with AJAX and Drupal, there are more complicated things that you can deal with. I’ll be coming up with a very nice tutorial to do auto-fill fields using Ajax and Drupal 7 Database layer.

Please place your valuable comments below. Thnak you.

Stay tuned by following me in twitter

Drupal 7 + WYSIWYG + CkEditor | Install and configure

Before we start how to Install and configure Wysiwyg and CKEditor into your Drupal site , lets have a quick look about it?

What does WYSIWYG stands for?
It stands for What You See Is What You Get

Why do we use it?
WYSIWYG editors are used to generate the HTML code necessary for viewing web page content.

How useful they’re?
They are particularly useful for people with limited or no knowledge of HTML code in other words you do not need HTML tags to use.

As you create your content, the editor creates the code in background.

For example, if you want your text to appear in different colours, fonts in different sizes, all you need is to highlight the text and select the appropriate option from the tools available in the editor.

What is CKEditor?
CKEditor is a text editor to be used inside web pages. It's a WYSIWYG editor, which means that the text being edited on it looks as similar as possible to the results users have when publishing it. It brings to the web common editing features found on desktop editing applications like Microsoft Word and OpenOffice. 
This is the ideal editor for developers, created to provide easy and powerful solutions to their users.

Installation and Configurations

• Download wysiwyg module from http://drupal.org/project/wysiwyg
• Extract to your (modules sites/all/modules) directory
• Then navigate to admin/config/content/wysiwyg to download the editor Library you want to install in your site
• So, here I am going to select CKEditor
• and I downloaded it from http://ckeditor.com/download
• once the .zip file is downloaded extract the file and place it in sites/all/libraries folder
• Go back again to admin/config/content/wysiwyg, now you’ll see the window as shown below in image 1.0

Image 1.0

• Here is the place that I am going to select which input format is going to use the CKEditor/Wysiwyg
• I’ll select the Filtered HTML format and hit “Save” (when the input format is selected to be filtered html I’ll be able to see the CKEditor whenever I create a block, node etc...)
• ^^^ Even after the above step we’ll not find the needed icons or plugins in the editor, it will look simply plain

Image 2.0

• Now you need to enable all the plugins that you need to appear in the CKEditor as shown in the Image 4.0 Navigate to admin/config/content/wysiwyg/profile/filtered_html/edit and expand the option “Buttons and Plugins” and check all the plugins that you wanted to appear in the Editor.

 

Image 3.0

• We’ve done it! didn’t we ? check it for yourself , go and create a content , make sure the input format is “Filtered HTML" ------
  Boooom!

Image 4.0

Drupal Quick Tip: Drupal 7 FAQs | Drupal Modules | Drupal Panels | Drupal Questions | Drupal Doubts

Common

• What is Drupal?

http://drupalthread.blogspot.com/search/label/Drupal%20Introductions

• What is module in Drupal?

Module is like an addon/plugin that you install and enable in drupal to enhance and

expand features in your site. The modules are developed by the drupal community

Drupal 7

• How do I get the Admin menu as Drupal 6?

Install and enable the module Administration module and Disable the module “Toolbar”

which comes with the core modules in Drupal 7

• How to enable the “PHP Code” filter when creating a content?

Go to Modules list (/admin/modules) and enable “PHP filter” module under core category

• I cannot create a Panel Page in panels !

Enable the  “Page manager” module in the modules page

• I want to create a content type which has my taxonomy terms as a field too !

When creating a feild in your content type make sure you select the field-type as

“Term reference”

• Can I create dummy contents in Drupal 7?

Yes, you can!

Install the Devel module and enable the Devel Genrate module too (which is a sub

module of it)

• How to add conditional stylesheets in Drupal 7

Download and install the “conditional stylesheets” module from

http://drupal.org/project/conditional_styles and add the below code in your .info file as

need

  conditional-stylesheets[if IE 7][all][] = ie7.css

• Where do I place my new custom panel layout?

It should be placed in layout folder inside your theme folder eg:

sites/all/themes/mytheme/layouts

Every week we update the article! stay tuned !