jQuery: jquery-tmpl nje, get string from template
Friday, September 3rd, 2010var tmplFn = $( "#myXmlTmpl" ).template();
var xml = tmplFn($,{data:myData}).join("");
Archive for the ‘jQuery’ Category
jQuery: Get the full string of a html element with outerHTML
Friday, September 3rd, 2010var fullElementHtml = $('#myElement')[0].outerHTML;
//or, the same
fullElementHtml = $('#myElement').attr("outerHTML");
jQuery: Mobile Design (Phone, Tablet, & Desktop)
Monday, August 16th, 2010jQuery: Test if jQuery is installed with typeof
Wednesday, April 14th, 2010There is a corner case where you need to know if jQuery is running on your page. Let’s say, you are using the ajaxForm plugin and that one of the input is of type “file.” ajaxForm will embed the call in a iFrame and the jQuery will not be included in it. So, for the page (or page fragment) that will be the target of such a call, you need to test if jQuery is running before running the script.
if (typeof($) != "undefined"){
$(document).ready(....
}
Unfortunately, ajaxForm does not support AJAX call in “text” only which would solve this problem.
jQuery: Removing the jQueryUI dialog elements on close
Wednesday, March 24th, 2010By default, $(..).dialog(”close”) or even $(..).dialog(”destroy”) leaves some html element in the DOM. Could be an issue when you expect to have it removed.
Here is a little trick
$("<div title='my transient dialog'>Some content</div>").dialog({
close: function(event, ui){
// Remove the dialog elements
// Note: this will put the original div element in the dom
$(this).dialog("destroy");
// Remove the left over element (the original div element)
$(this).remove();
}
});
Now, clicking on the close button or calling ‘close’ will remove the dialog elements completely
jQuery: jQuery event with RaphaelJs
Friday, February 5th, 2010HTML
<div id="rtest"> </div>
Javascript code
<script type="text/javascript">
$(document).ready(function(){
var paper = Raphael("rtest", 320, 200);
var circle = paper.circle(50, 40, 30);
circle.attr({
"stroke": "#336699",
"fill": "#fbfbfb"
});
$(circle.node).click(function(){
var circle = this.raphael;
//Toggle the circle fill color
if (circle.attr("fill") == "#333333") {
circle.attr("fill", "#fbfbfb");
} else {
circle.attr("fill", "#333333");
}
});
});
</script>
See RaphaelJs Event doc
jQuery: Input Focus and Select
Monday, February 1st, 2010This will focus and select the text of a given input. Nice to help the user doing the most likely action.
$("input[name='First Name']").focus().select();
jQuery: bubbleBind jQuery Plugin to bind bubbling events
Monday, January 18th, 2010UPDATE 2010-02-26: JQuery 1.4.2 added the delegate method, which does exactly that. Use the jQuery.delegate rather than bubbleBind (I just kepp the code below for reference)
bubbleBind is a jQuery plugin to conveniently bind bubbling events for given child targets. It is very similar to jQuery.bind and uses it under the cover (as well as jQuery.is()). Nothing magic, just simple, convenient, and familiar.
Example
<div id="parentDiv"> <span>one</span> <span>two</span> </div>
$("#parentDiv").bubbleBind("span","click",function(){
alert("you clicked on an span tag: " + $(this).html());
});
Plugin code
License free: use as you want, modify as you can, attribute as you feel.
(function($) {
/**
* Allow to bind a bubbled-event at the parent level for a given child (matching the childSelector).
* The selected element(s) will be considered the parent(s), and the childSelector will filter the target element.
* If, an only if, the target match the childSelector, then, the handler will be called. The key work "this" will
* point to the target document element (as in jQuery bind)
*
* Example:
* $("#parentDiv").bubbleBind("span","click",function(){
* alert("you clicked on an span tag: " + $(this).html());
* });
*
* @param {String} childSelector the jQuery selector for the targeted child. This will be use in $target.is(childSelector)
* @param {String} a jQuery evenType (same a jQuery bind)
* @param {Function} the handler function
*
* TODO: need to support eventData
*/
$.fn.bubbleBind = function(childSelector,eventType,handler) {
// iterate and reformat each matched element
return this.each(function() {
var $parentElement = $(this);
//bind the even to the parent
$parentElement.bind(eventType,function(event){
//get the target and test the target against the childSelector
var $target = $(event.target);
if ($target.is(childSelector)){
// If matched, call the handler method using the target html element as reference
// Note: Might be a smarter and more conventional way to do this. Feel free to suggest.
$target.get(0).bubbleBindHandler = handler;
$target.get(0).bubbleBindHandler(event);
}
});
});
};
})(jQuery);
jQuery: Plugin Skeleton
Monday, January 18th, 2010Should be in file jquery.samplePlugin.js
(function($) {
/**
* Skeleton for jQuery plugin
* @param {Object} options
*/
$.fn.samplePlugin = function(options) {
// extends options with the default one
var opts = $.extend({}, $.fn.samplePlugin.defaults, options);
// iterate and process each matched element
return this.each(function() {
var $this = $(this); // jQuery object for this element
//do what is needed
});
};
// samplePlugin default options
$.fn.samplePlugin.defaults = {};
})(jQuery);
JQuery: remove animation for jQuery UI date picker
Friday, November 27th, 2009$("#screenerDatePickers input").datepicker({ duration: '' });
