jquery

Disabling certain days in jquery UI datepicker

I wrote a site for my local pub and it involved a restaurant booking section. The user could select a date and a time (plus name, phone number and number of people)

The kitchen was closed on Mondays, so I needed to stop any bookings for Mondays. I had two options I could see,

  1. Server side, using PHP to check the date and refuse the request
  2. Client side, using JavaScript to block the request

I decided client side was best for the end user, otherwise they have to go back and pick a new date, etc.

I was using jquery UI’s datepicker and its very simple to just block Mondays:

$('.datebox').datepicker({
    "dateFormat"    : "DD dd/MM/yy",
    "beforeShowDay" : function(date) {
        var day_of_week = date.getDay();
        return [(day_of_week != 1), ''];
        }
    });

The day_of_week numbers start at 0 for Sunday, to 6 for Saturday. SIMPLES

Passing variable as key in jQuery ajax

I wanted to pass a simple key/value string to an Ajax request, but you cannot simply use the variable as the key in the data:

var $fieldname  = 'company_name';
var $value      = 'Tate-Davies Inc.';
var $promise = $.ajax({
    'url'       : '/some/action',
    'dataType'  : 'json',
    'data'      : {
                  $fieldname : $value
                  }
    )};

The above just will not work, and the $_GET will contain:

'fieldname'    => 'Tate-Davies Inc.'

What I actually want is:

'company_name' => 'Tate-Davies Inc.'

So, in order to fix this:

var $data      = JSON.parse('{"' + $fieldname + '":"' + $value + '"}');

And pass that instead:

var $promise = $.ajax({
    'url'       : '/some/action',
    'dataType'  : 'json',
    'data'      : $data 
    )};

Change jQuery autosuggest to 2 column dropdown

I often have the problem that the autosuggest isn’t flexible enough, and I need to show contact name AND client name in the drop down

Here is a way you can ‘hack’ the default set up:

$.ui.autocomplete.prototype._renderItem = function(ul, item) {
    var new_string = "<div style='width:450px;'>
                      <div style='width:200px; float:left;'>" + 
                      item.contactname + 
                      "&nbsp;</div>
                      <div>" + item.companyname + "</div></div>";

        return $("<li></li>")
            .data("item.autocomplete", item )
            .append("<a>" + new_string + "</a>")
            .appendTo(ul);
 };

Now, obviously the function that returns the data for the autosuggest needs to have these new fields in it (companyname, etc), a bit like this:

foreach ($data as $row) {
    $array[] = array(
        "value"       => $row['contactname'],
        "companyname" => $row['companyname'],
        "contactname" => $row['contactname'],
        "contactID"   => $row['contactID']
        );
}
echo json_encode($array);

EASY

jQuery tablesorter custom date sort

I needed a custom sort column for jquery tablesorter (http://tablesorter.com/docs/) for dates in the format of 12-Aug-2013 as the default tried to sort it as a string

Was quite complicated to work out, but think its done:

$.tablesorter.addParser({
    'id' : 'customDates',
    'is' : function(string) {
         return false;
         },
    'format' : function(string) {
        if (string == "") {
            return '';
        }
        var thedate = string.split('-');
        var monthint = {};
        monthint['Jan'] = "01";
        monthint['Feb'] = "02";
        monthint['Mar'] = "03"; 
        monthint['Apr'] = "04";
        monthint['May'] = "05";
        monthint['Jun'] = "06";
        monthint['Jul'] = "07";
        monthint['Aug'] = "08";
        monthint['Sep'] = "09";
        monthint['Oct'] = "10";
        monthint['Nov'] = "11";
        monthint['Dec'] = "12";
        var date_day = parseInt(String(thedate[0]));
        if (date_day.length == 1) {
            date_day = '0' + date_day;
        }
        var date_month = monthint[thedate[1]];
        var date_year = thedate[2];
        return date_year + date_month + date_day;
    },
    'type' : 'numeric'
    });

And then apply it to the table

$('table').tablesorter({
    'debug' : 'true', 
    'headers' : {
        0 : {
            'sorter' : 'customDates'
            } 
        } 
    });

preventDefault not firing on onkeyup event

Simple one.

$(document).on('#element', 'keyup', function(event) {
    if (event.keyCode == 13) {
        event.preventDefault();
        //do some other stuff
    }
});

This doesn’t actually work as the Key Up event is too late down the event queue for preventDefault() to have any effect. Change your code to utilise the keydown or keypress event instead and you should be fine.

$.ajaxStart() not firing

If you use the above to show a nice loading message when an AJAX call is performed, you may have come across the problem that a JSONP request means the call is not called. This is due to the fact the ajaxStart() function is triggered by a internal XMLHttpRequest and the JSONP request uses a script tag instead (for XSS safety)

There is a way round this though. Use the $.ajaxSetup() function:

$(document).ready(function() {
    $.ajaxSetup({
        'beforeSend' : function() {
            $('pleasewaitelement').show();
        },
    'complete'   : function() {
            $('pleasewaitelement').hide();
        }
    });
});

This is a default for $.ajax() calls, and unless your AJAX call specifies a beforeSend or complete function, then the defaults above will show. If you did have to use a different beforeSend or complete callback, then just add in the relevant code for the hiding/showing.

Easy.

$.ajaxStart() not firing

If you use the above to show a nice loading message when an AJAX call is performed, you may have come across the problem that a JSONP request means the call is not called. This is due to the fact the ajaxStart() function is triggered by a internal XMLHttpRequest and the JSONP request uses a script tag instead (for XSS safety)

There is a way round this though. Use the $.ajaxSetup() function:

$(document).ready(function() {
    $.ajaxSetup({
        'beforeSend' : function() {
            $('pleasewaitelement').show();
        },
    'complete'   : function() {
            $('pleasewaitelement').hide();
        }
    });
});

This is a default for $.ajax() calls, and unless your AJAX call specifies a beforeSend or complete function, then the defaults above will show. If you did have to use a different beforeSend or complete callback, then just add in the relevant code for the hiding/showing.

Easy.

Cancelling the event for jQuery imgAreaSelect

http://odyniec.net/projects/imgareaselect/

I have been using this excellent jQuery plugin which allows the user to draw a lasso around several objects to highlight then and bulk change them. However, they way I was using it, meant that the div that the event was bound to always drew the selection object. And I needed it to be draggable at the same time (like a switch)

So it was easy really, I used the unbind() event:

$(‘#object’).unbind();

Job done