jQuery Notes

SET INPUT VALUE BY ID
---------------------
$('input[id=' + id + ']').attr('value', "");
 
CURRENT SELECT / OPTIONS
-------------------------
$('form#new_image select[id=image_modality] :selected').attr('value')

CURRENT CHECKBOX CHECKED
-------------------------
if ($('#checkbox').attr('checked')) {
     // do something
}
FIND CHILDREN OF IDS
---------------------
$('#sidebar').find('#image_list_item_' + img_id).remove();	

Functions
----------------------------------------
$.trim(str)

VERIFY THAT AN ELEMENT EXISTS IN JQUERY
----------------------------------------
if ($('#id').length) {
 // do stuff
}

REPACE BODY
--------------
$('#element_id_').html("");
$('#all-images').html('<%=escape_javascript(render(:partial => 'image_list'))%>');

APPEND TO BODY
--------------
$('<div>hello<\/div>').appendTo(document.body);
  
ALAX
-----  
jQuery.get( url, [data], [callback], [type] ) 
$.get($(this).attr('href'), null, null, 'script');

jQuery.post( url, [data], [callback], [type] )


redirect a window
------------------
window.location.href = 'http://example.com';
top.location = 'http://example.com';
window.location.reload();


Close a thickbox
-----------------
self.parent.tb_remove();
self.parent.location.reload(true);


Replace form buttons with cool link buttons
--------------------------------------------
jQuery.fn.make_form_button = function() {
	var color = 'blue';
	var label = $(this).attr('value');
	
  button_color = $(this).attr('class').match(/button-color-(.*)/);
	if (button_color.length > 2) {
		color = button_color[2];
	}			
	$(this).after("<span class='buttonwrapper'><a href='#' class='submit-form " + color + "ovalbutton'><span>" + label + "</span></a></span>");	
	$(this).hide();
}

$(document).ready(function() {	
	$('a.submit-form').live('click', function() { $(this).parents('form')[0].submit(); });		
	$('input.form-button').each(function() { $(this).make_form_button(); });
});


Enable or disable a field
--------------------------
jQuery.fn.enable_form_field = function() {
  $(this).attr('disabled', true);   
  $(this).parents('.underline').addClass('disabled');
}

jQuery.fn.disable_form_field = function() {
  $(this).removeAttr("disabled"); 
  $(this).parents('.underline').removeClass('disabled');
}


Select box changes
-------------------
update_campaign_type = function() {
  if ($('#campaign_campaign_type :selected').val() == '<%= Campaign::TYPE_POST %>') {
    $('#campaign_twitter_name').disable_form_field();
    $('#campaign_twitter_password').disable_form_field();
  }
  else {
    $('#campaign_twitter_name').enable_form_field();
    $('#campaign_twitter_password').enable_form_field();
  }
}

$(document).ready(function() {
  $('#campaign_campaign_type').change(function() {
    update_campaign_type();
  });
  
  update_campaign_type();
});


Animated delete
----------------
$(document).ready(function() {
	$('a.delete').click(function(e) {
		e.preventDefault();
		var parent = $(this).parent();
		$.ajax({
			type: 'get',
			url: 'jquery-record-delete.php',
			data: 'ajax=1&delete=' + parent.attr('id').replace('record-',''),
			beforeSend: function() {
				parent.animate({'backgroundColor':'#fb6c6c'},300);
			},
			success: function() {
				parent.slideUp(300,function() {
					parent.remove();
				});
			}
		});
	});
});


make all remote links callable by ajax
---------------------------------------
jQuery.ajaxSetup({ 
  'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}
});

jQuery.fn.submitWithAjax = function() {
  this.submit(function() {
    $.post(this.action, $(this).serialize(), null, "script");
    return false;
  })
  return this;
}