jQuery: jquery-tmpl nje, get string from template
Friday, September 3rd, 2010var tmplFn = $( "#myXmlTmpl" ).template();
var xml = tmplFn($,{data:myData}).join("");
var tmplFn = $( "#myXmlTmpl" ).template();
var xml = tmplFn($,{data:myData}).join("");
var fullElementHtml = $('#myElement')[0].outerHTML;
//or, the same
fullElementHtml = $('#myElement').attr("outerHTML");
There 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.
By 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
<div id="rtest"> </div>
<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
This 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();
UPDATE 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.
<div id="parentDiv"> <span>one</span> <span>two</span> </div>
$("#parentDiv").bubbleBind("span","click",function(){
alert("you clicked on an span tag: " + $(this).html());
});
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);
Should 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);
$("#screenerDatePickers input").datepicker({ duration: '' });