jQuery noConflict

In a recent project, we had to load jQuery as a part of a chrome extension into an external page where the $ alias has already been used. We tried the classic solution: jQuery.noConflict(), which returns control of $ back to the other library. However, it did not work and we had to dig more.

Got it working with this:

Facebook Developer Garage Dhaka – Open Stream API

The first ever “Facebook Developer Garage” took place in Dhaka, Bangladesh and I am proud to be a part of it. I was one of the speakers of this spectacular event organized by Facebook and IBT bangladesh. I spoke about the recently released Open Stream API from Facebook. It was more of an overview rather than a detail one. Here goes the slides:

I have created a quick start example which outlines both Facebook Connect and the Open Stream API. You can check that here. A blog post covering the steps is coming soon in 3-4 days.

Stay tuned if you have interest in them.

Cheers

jQuery Essentials – Round 3

I still receive a good number of hits to my first (10 jQuery Essentials) and second (jQuery Essentials – Round 2) collection of jQuery plugins. So, I have been thinking about making the next post in the series for quite some time. Time has always been the killer of ideas, along with the fact that not too many plugins found way to my list of favorites.

Now that I have some fresh essentials, this post was inevitable.

[poll id=”2″]

18. jQuery UI

ui

This is the official big boss with a number of core interactions (drag, dropping, sorting, selecting, resizing) and few great widgets (accordions, date pickers, dialogs, sliders, tabs) built on top of those. Although its a great collection, I somehow haven’t been able to use it in any real projects yet. It seems small plugins always get a favor than big collections 🙂

19. Facebox

facebox

This is a cute, little plugin that shows Facebook style dialog boxes using jQuery. It supports nearly all the possible contents you might want to show in a dialog box: image, div, remote pages. It has both automatic behavior and manual invoking. Simple and fun to me.

(more…)

Cross-Domain AJAX calls using PHP

AJAX has become the core component of many web applications around us. And its fairly easy to handle AJAX now a days, with the help of various javascript libraries (ex: jQuery, Prototype, Mootools, YUI, etc). But there is one security issue that web browsers impose in doing AJAX calls – they don’t let you do AJAX calls in web servers different than yours. That means, if your script is in www.mydomain.com and you’re trying to do AJAX call to www.anotherdomain.com/get.php, then the browser will through error like: “Error: uncaught exception: Permission denied to call method XMLHttpRequest.open”.

Now, there are a number of solutions to this problem. Instead of explaining them all to you, lemme provide you the simplest one: using a PHP transport file. If you already know the thing and just need the script, download from here.

Others, let’s see an example implementation first.

Example use

   1: xmlHttp.onreadystatechange=function()
   2: {
   3:     if(xmlHttp.readyState==4)
   4:     {
   5:         alert(xmlHttp.responseText);
   6:     }
   7: }
   8:  
   9: xmlHttp.open("GET", 'http://myserver.com/transport.php?action=' + 
  10:                     urlencode('different-server.com/return_call.php') +
  11:                     '&method=get&data1=101&data2=pass', true );
  12:  
  13: xmlHttp.send(null);

Now, lets see how it works:

  1. The script makes an AJAX call to the myserver.com/transport.php with a few parameters:
    • action = the target URL you need to fetch, from a different domain
    • method = the HTTP method (post/get)
    • data1, data2 = sample parameters for using as either query-string or POST fields
  2. When the request is received by transport.php, it uses cURL to make a call to the page mentioned in action.
  3. Based on the method, it either makes a GET request or a POST request. In both cases, it sends the extra parameters that are sent.
  4. After the response is received, transport.php echoes it. So, you have what you need!

Download

transport.php
Cross-Domain AJAX call transporter.
Downloaded: [downloadcounter(transport)] times

Comments and suggestions are most welcomed 🙂

jQuery Essentials – Round 2

I’ve seen some steep traffic in my blog after my first post on jQuery (10 jQuery Essentials). Thanks to everybody who paid a visit. It’s time for the Round 2 of the same series.

The new collection walks through some more areas in the web toolkit where jQuery can help UI builders out. Although it contains the elements missing from the last post, it also includes better implementation of some previously mentioned element (for example, the tabs).

Without more blabbing, here we go:

11. InnerFade with JQuery

“InnerFade is a small plugin for the jQuery. It’s designed to fade any element inside a container in and out. Thess elements could be anaything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.”

12. jQuery BlockUI Plugin

The jQuery BlockUI Plugin shows the gray overlay over your whole page or a page element to prevent the users from interacting with it. Its very useful in conjunction with AJAX, where you need to intentionally limit the user’s actions for some time. The author has included a number of examples matching most practical uses.

13. tablesorter 2.0 (beta)

This excellent implementation of a table sorting has made its way even if its in the beta stage. I’ve looked for a simple solution of this type for too many times, and now finally found it. It allows you to present your data in table and will allow multi-column sorting behavior to it. And implementation is pretty straight-forward.

14. jCalendar

A beautifully done inline dynamic calendar with a few useful features – navigation, auto sizing, degradation, etc. It looks aesthetically pleasing to me than many other calendar implementation.

15. idTabs

A fabulous tab implementation using jQuery! It has outnumbered all the implementation before. A ticker in the site says the best thing to me: “It’s not overloaded with features, it gets to the point.” Superbly done!

16. EasyDrag jQuery Plugin

A great implementation of drag n drop functionality using jQuery. It makes any DOM element draggable, with the minimal amount of code. Very handy if you want to facilitate the user with something on the site that they can move along and place wherever they need.

17. jTagEditor

It’s a nice, simple plugin that can turn your textarea into a tag editor. The editor can provide a variety of commands in a non-WYSIWYG way. Helpful if you would like your visitors enter contents without much fuss. Its lightweight and customizable. And the author shows some good examples as well.

That will conclude the list for today. Again, thanks to the visitors who came by to pay a visit and also to the mighty resource finders: Google, Ajax Rain, Ajaxian, and AJAX Magazine.

Goodbye for today!

Md Emran Hasan
Co-founder & CTO
Right Brain Solution Ltd.