Monthly Archives: November 2012

Format JSON – JSONLint

Hey everyone,

Just a site that I came across today that was pretty useful for JSON: http://jsonlint.com/

I’ve been working with jQuery FullCalendar and needed some sample data. It has the option to use a JSON feed but mine wasn’t working for some reason. JSONLint allowed me to both format and validate it.

Let me know if you come across any other useful formatters/validators.

Cheers,
Chris

Fields Missing from jQuery Post – Serialize Data

Hey everyone,

I was using jquery’s serialize method to post completed form data only to find that a number of my fields were missing.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
                //Display loader and disable forms
		disable_form_fields(true);
 
                //Post via ajax
		$.ajax({
			type: 'POST',
			url: 'uploads/add',
			data: $(form).serialize(),
			success: function(data, text_status, oHTTP){
				handle_form_response(data, text_status, oHTTP, $(form).data('file_id'))
			},
			error: function(){
 
				//Hide loader etc
				set_form_loading(false);
 
				//Unspecified error
				alert('An error has occurred.');
			},
			dataType: 'json'			
		});

Thanks to this stackoverflow post I realised that the data wasn’t being serialised because I’d disabled most of the fields beforehand. This was done in order to prevent the user from changing the values. To get around this I simply had to serialise the data BEFORE disabling anything.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
                //Post via ajax
		$.ajax({
			type: 'POST',
			url: 'uploads/add',
			data: $(form).serialize(),
			success: function(data, text_status, oHTTP){
				handle_form_response(data, text_status, oHTTP, $(form).data('file_id'))
			},
			error: function(){
 
				//Hide loader etc
				set_form_loading(false);
 
				//Unspecified error
				alert('An error has occurred.');
			},
			dataType: 'json'			
		});
 
               //Display loader and disable forms - DO THIS AFTER SERIALISING
		disable_form_fields(true);

Let me know if you have any issues.

jQuery DateTimePicker with Bootstrap

Hey everyone,

I ran into a bit of trouble today trying to get datetimepicker to work within bootstrap tabs. The dialog appeared however none of the buttons seemed to work. The fields also remained unpopulated.

It turned out the the issue was caused by the fact that I’d used jquery’s clone function to duplicate the tabs without reassigning field ids. This meant that there were multiple fields with the same id, confusing datetimepicker.

The solution I used was to dynamically assign all of the ids as each tab was displayed:

 
/* Bind tab change events: this has been done so that there is less js overhead */
function bind_tab_change_events(){
 
	//Bind change event
	$('.nav-tabs').bind('show', function(e){
 
		//Create vars
		var selected_file_id = $(e.target).data('file_id');
 
		//Initialisations
		initialise_time_pickers('#file_' + selected_file_id + ' .timepicker', selected_file_id);	
	})
}
 
/* Initalise timepickers */
function initialise_time_pickers(selector, unique_id){
 
	//Loop through each bound element
	$.each($(selector), function(index, value){
 
		//Set id - datepicker won't work without unique ids
		$(value).attr('id', $(value).attr('id') + '_' + unique_id);
 
		//Initialise datepicker		
		$(value).datetimepicker();
	});
}

UPDATE:
It looks like quite a few people hitting this post are looking for a bootstrap specific alternative, Sebastien has provided a link to one in the comments below:
Bootstrap DatetimePicker.

Another one that looks really good, a bit less clunky than any of the alternatives I’ve seen: http://tarruda.github.com/bootstrap-datetimepicker/

Plain timepicker: http://jdewit.github.com/bootstrap-timepicker/

Plain datepicker: http://www.eyecon.ro/bootstrap-datepicker/

Let me know if you have any questions!

preg_match() [function.preg-match]: Delimiter must not be alphanumeric or backslash – CakePHP

Hey everyone,

Ran into the following error while I was mucking around with CakePHP today:


preg_match() [function.preg-match]: Delimiter must not be alphanumeric or backslash

The error seemed a little weird as I wasn’t using any regex. It turned out that it was because of my custom validation methods. I had marked them as private instead of public. A bit of an ambiguous error message so hopefully this will be able to help some of you out!

Remove Disabled Attribute – Twitter Bootstrap

Hey everyone,

I was using Bootstrap’s disabled attribute today and just needed a way to remove it. Once again, jQuery has a quick and easy way to do this:

 
$('#my_input').removeAttr('disabled');

There’s a whole heap of documentation on the jQuery site: http://api.jquery.com/removeAttr/

Paypal_Adaptive IPN Verification: INVALID – Ruby on Rails

Hey everyone,

I’ve been working with the PayPal_Adaptive gem recently and unfortunately I’ve run into a few issues. The latest of these has been that that my IPN verification was returning an INVALID response from Paypal.

I had made a few modifications to the provided payment_notification.rb file in order to accommodate for a few app specific requirements. This left me having to pass the original data attribute params. Unfortunately this wasn’t identical to the response that PayPal expected, I actually needed to use the following:

 
#Incorrect usage
verify_ipn(params)
 
#Correct usage
verify_ipn(request.raw_post)

I realised this error after reading Tanel’s post about securing your IPN interactions so make sure you check out his blog if you run into any more problems!

Thanks,
Chris

How to Reset ID of an Element – jQuery

Hey All,

Just a quick post on how to set the ID of an element (in this case a div) with jQuery. I needed to use this to dynamically clone elements.

1
2
3
4
5
6
7
8
 
<div id="my_test_id">
     WOOOOOOOOOOOOW
</div>
 
<script type='text/javascript'>
     $('#my_test_id').attr('id', 'my_new_id');
</script>

The script above sets the id of div to my_new_id. If you’re interested, there’s a whole heap of documentation on the jquery site:
– Attr: http://api.jquery.com/attr/
– Clone: http://api.jquery.com/clone/