Category Archives: JavaScript

jQuery .submit() trigger problem

Recently I experience the following problem, when I call this code it triggers an error in FireBug:

$('input[name="s"]').parents('form').submit();

With “human” words: I trired to find a input with a spefic name, then find the form wrapping this input and try to submit it. Strangely, but it trows an error in jQuery lib.
Continue reading

jQuery tip – skip $(document).ready() event

If you are new to jQuery you will notice that almost everything is wrapped with

     $(document).ready(function(){
           //your fancy javascript code here...
     });

What does it do? It check if all HTML tags are loaded and if so, execute your code. Easy as that. But if you are new to jQuery it’s really strange way of writing JS code :).

Did you know that this is not so required?

Actually if you move your JavaScript code at the end of the page you don’t need to wrap your code with that.

Hope this will be handy for someone.

Extending CakePHP Facebook plugin

Currently I am working on an application which require Facebook authentication for it’s users. As you may guess its written in CakePHP, and I’ve searched on Internet for a plugin which integrate Facebook in CakePHP application.

There is one very good CakePHP Facebook plugin written from Nick Baker, and I give a try. It’s really good plugin which provides everything for integration of Facebook (even the Facebook API) in your site. Full list example of functionality can be seen here.

Although, I’ve notice that the site is getting slow when the user is connected on the Facebook. Digging in the code I’ve noticed that the initialize() function which is responsible for the initialisation of the plugin request every time the data for the logged user from the Facebook, and this of course slows down the Application itself, because initialize() is called on every page refresh in every site.

What I’ve did – a little optimisation of the code. Here is the explanation how the improved core works:

  1. on init (initialize() function) it just assign the FB instance to the component and getting the Facebook session. This doesn’t require FB call.
  2. There is an extra parameter which could be provided to the plugin’s settings – noAuth. If this parameter is set the plugin wont attempt to login using the Auth component in the site. By default this parameter isn’t set, but it’s more convenient to have it, because in some cases like mine, I don’t use user Auth on the site except the Facebook’s. Here is a sample how to set noAuth for the plugin:
    class AppController extends Controller {
    $components = array('Facebook.Connect'=>array('noAuth'=>true));
    }
  3. Finally in your AppController::beforeFilter() you can use following in order to get the logged user’s details:
    class AppController extends Controller {
    function beforeFilter(){
    $fb = $this->Connect->user();
    }
    }

    This call has been already cached and you don’t need to worry about extra calls to Facebook site.

Another think which I’ve seen in the comments for the Nick’s article is the request to disconnect (unsubscribe) from the application without logging out of the Facebook. That’s why I’ve added a function disconnect() which doing exactly this.

Usage:

<?php
    echo $this->Facebook->disconnect(array(
                     'label'=>__('exit', true),
                     'confirm'=>__('Are you sure?', true)
                     ));
    ;?>

Possible options which could be provided in the function:

  • label – string text for the link
  • redirect – action to which user will be redirected after the logged out. If it’s not set the page will be reload.
  • confirm – javascript confirm message (for example “Are you sure?”) before user disconnected from the application.

I’ve added the confirm option in the logout as well (with the same functionality), as well as there is a new option parameter custom which will force the link creation instead or fbml logout link, because in the original implementation custom link is used only if you pass redirect action, but in some cases it need only to reload the page without any redirection and it’s convenient to have a custom link.

And finally where is the extended plugin? Of course in guthub. CakePHP-Facebook-Plugin

Update: The changes are already accepted and included in the original author of the plugin and you can found them at Plugin’s home page

Detecting if the cookies are enabled with PHP

For my current project I need a detection if the cookies are enabled or not in the user’s browser.

The easiest way to do this is by using this code:

<?php
setcookie('test', 1, time()+3600);
if(!isset($_GET['cookies'])){
    header('Location:/info.php?cookies=true');
}
if(count($_COOKIE) > 0){
    echo "Cookies are yummy!";
} else {
    echo "You didn't bring any cookies here. We are hungry!";
}
?>

The CakePHP way is almost similar:

<?php
$this->Cookie->write('test', 1);
if(!isset($_GET['cookies'])){
    header('Location:/info.php?cookies=true');
}
if(count($_COOKIE) > 0){
    echo "Cookies are yummy!";
} else {
    echo "You didn't bring any cookies here. We are hungry!";
}
?>

Ok, it’s not rocket science, but it helps πŸ™‚

CakePHP ajaxed pagination and sort

Here I will describe how I did an Ajaxed pagination for one of my projects using jQuery and Livequery Plugin. Currently I am working on a huge project which, hopefully, will feed me with some ideas for blog posts and this is one of them :). So:

1. Loading the javascript libs

Loading the jQuery and Livequery was done by Autoloader helper, but if you don’t use it just include jQuery and Livequery in your layout with following code

<?php
echo $javascript->link('jquery.min');
echo $javascript->link('plugins/jquery.livequery');
?>

Continue reading

Autocompleter plugin v 1.2

Autocompleter Plugin 1.2Hey guys,

today I’ve released a new version of the WordPress Plug-in “Autocompleter”.

What is the change?

The new version contains ability to display number of matches per word or phrase in the drop-down. The example is available in this blog (top/left search field). Of course in order to activate this you should go to Admin under the Settings section, where there is an option “Autocompleter” πŸ™‚

Bear in mind that ‘number of matches’ are not the posts in the blog, but number of times where the tag or category is used. I would provide small example of this.

Let’s imagine that in your blog you have 3 posts all tagged with WordPress and one of them is in the WordPress category, while other 2 are in another category.

The result in matches for wordpress would be 4, because there are 3 tags attached to the posts and 1 of the posts is attached to the wordpress category. Hope this make sense to you.

There is also ability to change the word ‘matches’ with your own, or even word in your language.

If you want to play with position of the matches, you could change autocompleter.css from the plug-in directory.

That’s it. I hope you like this plug-in.

5 useful jQuery plugins which saved me a lot of work

Recently I was working on some projects which required some advanced techniques. Sometimes you should stop thinking how to make it with HTML and CSS, and just to do it with good JavaScript code.

So far, all of these plug-ins were forced because of design decisions, but anyway important here is the plug-ins and the great job which they doing. So:

jScrollPane

jScrollPane is a jquery plug-in which allows you to replace the browsers default vertical scroll bars on any block level element with an overflow:auto style. You can easily control the appearance of the custom scroll bars using simple CSS.

I have use it because the designer decided to show the content in a size of business card, and the client of course wanted to provide as many information as he could. If course this one could be done with single line of code: overflow: scroll; in the css definition, but this way you cannot control the appearance of the scroll bar, so from the design point of view it was unacceptable.

Anyway, the plug-in is really rich of features, and really easy to be used. It requires some other plug-ins, for full capacity, but it is good.

jQuery pager plug-in

It’s a plug-in which transform long pages into paged area. To be fair, this is what the client wanted as interface – paged content based on paragraphs. Unfortunately the content includes also the bullet lists which are problematic with it. The plug-in provide ability to set up the appearance, i.e. putting your own labels on the pager links and height of the area.

Dimensions

This plug-in give the ability to know the width, height and position of an element in the page. I’ve wrote about it in my previous post, and although it’s not used in the new design it’s really handy.

Silky smooth marquee

In the same project I was asked to implement a news ticker /who uses such things these days, anyway :)/. So, standard marquee tag was, just ok, but it is not smooth enough. This plug-in does exactly this – making the scroll smooth and the text more readable.

and the last but not least

jQuery validation plug-in

As the name says this plug-in provide a form validation. The good thing is that it’s “validate as you type”. So it could mark field as invalid instantly when you insert more than required chars or enter an invalid email.

Well, not a rocket science, but at least they are helpful πŸ™‚ Hope this post helps someone.

Careful with JavaScript includes

Ok, this is not a code snippet article. It’s just an experience which you probably already met, but it was nightmare to find and it took me 1/2 a day to fix this “stupid” bug.

So what is the case?

Working on a project including some advanced JavaScript and Ajax techniques my coworker Milen noticed that the Session is not behaving as expected. In a simple function like:

 function test($id = false){
  if ($id != false) {
    echo $id;
    echo $k = $this->Session->read('some_var');
    $this->Session->write('some_var', $id);
  }
  $this->set('tests', $this->paginate());
 }

The result should be quite easy to be predicted: if you pass for example 5 on the second reload the $k should be with the same value as $id. Unfortunately instead of 5 the $k was ‘images’. Yep, quite strange, isn’t it?

if you put die() at the end of the function, the result is as expected.

What was the problem

In our current project we are using jQuery and some of it’s plugins. So the problems was in the ThickBox plugin. If you remove it from the header everything works.

Digging into unpacked version of the plugin we’ve noticed that the loading picture is not where it should be. there is an variable

 var tb_pathToImage = "images/loadingAnimation.gif"

and as you may notice the path is not compatible with Cake convention and obviously it’s not in the http://server/cakeapp/tests/test/images/.

In the example above we were writing id into the session. Yes but calling: http://server/cakeapp/tests/test/images/loadingAnimation.gif mean that $id take value of ‘images’.

It was quite tricky, because if you loading CSS or JavaScript and the file is not there, FireBug or even the html /if there is no correct CSS the styling will fail/ will warn the developer, but image loaded into the JS function is quite difficult to find.

Anyway, the conclusion is “Watch you JavaScript libs and what files they require”.

My first WordPress plugin

Hey,

I am very proud to present you, my first plugin for WordPress platform – Autocompleter.

The plugin adding autocomplete functionality for the search input field of your blog. The values are the tags and categories existing in the blog and this way you will help your visitors to find easily the proper information in your blog.

My first implementation was with Prototype and Script.aculo.us, but because I like very much jQuery library and I found a wonderful plugin for autocomplete, I build it with jQuery.

You can check the demo in this blog – top right – search box πŸ™‚

Hope you will like it and you will vote for it πŸ™‚ Thanks

The official page is: wordpress.org/extend/plugins/autocompleter