jquery event on addClass or show/hide

Its often require to fire some event when new class is getting added to the element, or when element is moving from hidden state to visible state or otherwise.

I come across similar scenario while rendering graph using jqplot library. Though if you have div hidden and you try to plot the graph on it, it won't display the graph when you make the parent variable visible. In similar situation it requires replot (which is basically redraw of the element.)

As there is no 'hide' event in DOM, so we will not be able to bind the event. Other way to resolve this issue is by Javascript MutationObserver. In which you can select target node (element) and observer instance.

Though you can find many complex solution on web, here is the simple and neat way to do it using jQuery.

Lets say you have element with class 'xyx', and upon making it to visible you would like to fire few more calls and refresh certain things on the page. You can do it using trigger -

$(".xyz").show();
$("xyz.").trigger('cssClassChanged');

The similar calss cssClassChanged needs to be listen somewhere that its been triggered, so its almost like publisher - subscriber model. Here is the sample -

$('.xyz').bind('cssClassChanged', function(){ perform your steps });


Easy and simple solution.

Setup email notification for team on github commits

Once more than one person start working on some code its good to get notification on what other team mates are committing and with git repo its easy to setup this with help of google groups.

1. Create a new google group. Add one member - noreply@github.com
   Add the team/users email address which should be same as their github email id, the one they using it to access repo.
2. Go to Github repository.
3. Click on Settings from right navigation.
4. Click on Service Hooks from left navigation.
5. Click on Email - Provide google group name you have created (@googlegroups.com).
6. Click Update the settings.
7. Check its working fine by click on 'Test Hook'.

At the end you should get sample test email with last commit. After this setup all team members/members of google groups will get email upon commit from anyone on the repo.

Django inline extend from different pages based on condition

Its been sometime I have posted anything on this blog. Recently I came across nice inline syntax if you need to extend the pages based on certain condition. e.g. I have container master page which i want to choose differently if user is logged in or not -

{% extends user.is_authenticated|yesno:"my_home.html,base_home.html" %}

It checks if person is authenticated or not, if authenticated it will extend my_home.html otherwise it will extend base_home.html

Downgrade the pip installed package

While installing something on my local for my application I run into problem where it replaced (overwrote) one the of the package which wasn’t compatible with other applications I was using. So basically I was dependent on two applications which were dependent on another third party application but not of the same version.

Of coures, I was not ready for that upgrade, so I had to downgrade the version manually for that package, I am sure people run into similar problem often. 

Here are the steps I followed -

In this case Django 1.5 was installed, so it removed my existing Django 1.4.5 and installed 1.5

To downgrade and again go back to Dajngo 1.4.5, you need to locate the egg file for Django which normally you can find it in your vritual env path -

//lib/python2.7/site-packages/Django-1.5.1-py2.7.egg-info

Delete this file, and install 1.4.5 manually with following command -

pip install django==1.4.5

You can follow the same instruction for any other package.

Django admin staff authentication on your webapp views

Lets say you have certain views you want to control the access and should be only accessible by staff members.

Its two lines of code change and you are done. 

from django.contrib.admin.views.decorators import staff_member_required

in your module’s views.py

@staff_member_required

def staffdashboard(request):

            ….

            ….

            return render_to_response(‘dashboard.html',context_instance=RequestContext(request))

When user tries to access the view, it will check if user is authorized staff member. If not it will prompt for admin login screen.

@ in file attributes - What does it mean?

While working today I noticed @ sign in the file permission attributes while listing files under folder by 'ls -la'

e.g. 

J-MacBook-Pro:hooks temp$ ls -la .git/hooks/
total 80
drwxr-xr-x  11 J  staff   374 Jan  9 13:10 .
drwxr-xr-x  16 J  staff   544 Jan  8 18:33 ..
-rwxr-xr-x   1 J  staff   452 May 19  2012 applypatch-msg.sample
-rwxr-xr-x   1 J  staff   896 May 19  2012 commit-msg.sample
-rwxr-xr-x@  1 J  staff   160 Aug  8 23:06 post-commit.sample
......

Have you ever seen it? What does it mean?

@ signifies that the file has some extended attributes apart from what you are seeing while listing. e.g. it came from some remote package, or part of any build, downloaded from net, added by text editor which can result into corrupt file.

In order to check what those extended attributes are -


J-MacBook-Pro:hooks temp$ ls -la@ ../.git/hooks/
total 88
drwxr-xr-x  12 J  staff   408 Jan  9 13:11 .
drwxr-xr-x  16 J  staff   544 Jan  8 18:33 ..
-rwxr-xr-x   1 J  staff   452 May 19  2012 applypatch-msg.sample
-rwxr-xr-x   1 J  staff   896 May 19  2012 commit-msg.sample
-rwxr-xr-x@  1 J  staff   160 Aug  8 23:06 post-commit.sample
com.macromates.caret  32 

.......

Here its added by TextMate, and it result into corrupt file. Further doing more search on it - 


$ xattr -l post-commit.sample 
com.macromates.caret: {
    column = 19;
    line = 144;
}

In order to remove it, run below command -

$xattr -d com.macromates.caret post-commit.sample

All set!

jQuery Wizard Options

Recently I worked on a piece where we needed wizard like functionality, and I did little bit searching on different wizard options available in jQuery. Here are some of the options available with some comments. 

You can use the one which suits your requirements -


http://techlaboratory.net/smartwizard
- Demo, user registration, validation, detailed


http://www.wbotelhos.com/stepy/
- Validations, Style



http://jquerytools.org/demos/scrollable/wizard.html
- Good, you might need to change the styles etc.


http://www.noveltheory.com/Wizard/
- very basic

https://github.com/jackkeller/jquery-stepwizard
- Step wizard, again basic one

http://thecodemine.org/#

Addition to this if you are planning to do more along with wizard functionality like registration form etc, I would recommend to use sisyphus.js. Its provides auto-save google docs/gmail like feature which leverage HTML5 - local storage to prevent your work when you accidentally close or refresh the page.