If you are new on JQuery.Deferred and Promise, like me, you probably would like the next article: Understanding JQuery.Deferred and Promise, witted by
I really hope you find this information useful.
If you are new on JQuery.Deferred and Promise, like me, you probably would like the next article: Understanding JQuery.Deferred and Promise, witted by
I really hope you find this information useful.
If you need to find a way to get the list off all the events bound on an element here is a code that you can use.
My example cover event delegation just to show how these events are displayed in the console.
.
jQuery("myelemnt").on({ click: function(){ console.log("click") }, mouseout: function(){ console.log("mouseout") } }); //test event delegation jQuery("myelemnt").on("click","a", function(){ console.log("a click"); }); jQuery("myelemnt").on("mouseout","a", function(){ console.log("a mouseout"); }); //for jQuery 1.8 + var $events = jQuery._data(jQuery("myelemnt")[0], "events" ); //for jQuery 1.7 and below //var $events = jQuery('myelemnt').data('events'); //validate if the element has an event attached if(typeof $events != "undefined"){ //iteration to get each one of the handlers jQuery.each($events, function(i, event){ jQuery.each(event, function(i, handler){ console.log(handler); // write on console the handler }); }); }
Output example:
Useful links:
I really hope you find this information useful.
“IBM Connections is a social software platform that enables organizations to engage the right people, drive innovation, and deliver results”.
I have created a post on the Base22.com public knowledge wiki of How to like a File Using jQuery Ajax since there is no a link to IBM Connections 4 documentation.
This post is part of a current “How to” series that I have created, to check the complete list of posts, please check: IBM Connections 4 API How to
I really hope you find this information useful.
“IBM Connections is a social software platform that enables organizations to engage the right people, drive innovation, and deliver results”.
I have created a post on the Base22.com public knowledge wiki of How to Unlike a File Using jQuery Ajax since there is no a link to IBM Connections 4 documentation.
This post is part of a current “How to” series that I have created, to check the complete list of posts, please check: IBM Connections 4 API How to
I really hope you find this information useful.
“IBM Connections is a social software platform that enables organizations to engage the right people, drive innovation, and deliver results”.
I have created a post on the Base22.com public knowledge wiki of How to remove a tag from a Wiki Page Using jQuery Ajax since I couldn’t find an example on the official IBM Connections 4 documentation.
This post is part of a current “How to” series that I have created, to check the complete list of posts, please check: IBM Connections 4 API How to
I really hope you find this information useful.
Yup, for those that are always looking to improve their jQuery skills: jQuery Coding Standards & Best Practices. Thanks to my friend Alex Arriaga for sharing me this link.
Hope you find this information useful!!
Dust is a JavaScript templating engine designed to provide a clean separation between presentation and logic without sacrificing ease of use. It is particularly well-suited for asynchronous and streaming applications.
Inside its core, Dust offer a set of filters that can be used in specific scenarios like to force HTML escaping, but does not offer filters for all the possible scenarios.
So If you want to see how how you can easily extend Dust filters using jQuery, read How to extend Dust filters using jQuery in the Base22 Knowledge Wiki.
Note: Dust documentation makes the following assertion when you use filters: “all output values are escaped to avoid Cross Site Scripting (XSS) unless you use filters.”, but only applies to the default filters that brings Dust. If you create your own filters, they are still protected against XSS unless used in conjunction with the default Dust filters.
Hope you find this information useful!!
In a previous post I shared How to combine Isotope Sort and Filter in a real example. At the end of my post I mentioned that should be nice if Isotopo could create dynamically all the sorts/filters within getSorData.
In this post I will share how I achieve that, if you don’t know about Isotope and what is its purpose I invite you to first read my previous post about Isotope.
“This option accepts an object, whose values are the functions to extract the data. Each function receives one argument, which represents a jQuery object for each item element. With that argument, the function needs to return the data point.”
So, the data extracted can be anything accessible in the item element via jQuery. You can use a text element, numerical data ( using parseInt( ) or parseFloat( ) ), a data attribute or a property like the width of each item element.
Your getSortData functions could looks like the follow:
getSortData: { sort1: function($elem) { return parseInt($elem.attr('data-category-sort1'), 10); }, bywidth: function($elem) { return $elem.width(); }, byname: function($elem) { return $elem.find('.name').text(); } // more... }
The problem with this approach is that if you needs a new sorting, well, you will need to add manually that new function inside getSortdata. I have created a function that create these sorting functions dynamically, the function doesn’t cover all the scenarios but is possible to add more easily:
function createSort(){ var sorts = {}; var $source = jQuery('source'); //from where I will read data $source.each(function() { var $element = jQuery(this), findBy = $element.children('a').data('sort-type'), //element, numerical data, data attribute or a property key = $element.children('a').data('option-value'); //the name of the element, numerical data, data attribute or a property //if the sort is based on a css class (an element) if(findBy === "class"){ sortData[key] = function($elem){return $elem.find('.'+ key).text();}; } //if the sort is based on a data attribute (in my scenario is a numerical attribute) if(findBy === "attr"){ sortData[key] = function($elem){return parseInt($elem.attr('data-category-' + key), 10);}; } }); return sortData; } //then I call the function and pass the result to getSortData var sort_data = createSort(), $container.isotope({ //more code. getSortData:sort_data });
And where is the jQuery(‘source’) that is used inside createSort()?. In my case all the functions are created based on a list of options created with a “ul” and each “li” element correspond to a type of sorting that will be read by my function createSort():
<ul class="sort-by option-set" id="sort-by" data-option-key="sortBy"> <li><a href="#sortBy=title" data-option-value="title" data-sort-type="class">By Title</a></li> <li><a href="#sortBy=sports" data-option-value="sports" data-sort-type="attr">sports</a></li> <li><a href="#sortBy=technics" data-option-value="technics" data-sort-type="attr">technics</a></li> </ul>
And is done!!.. hope you find this information useful.
Recently I have been helping one of our clients to improve the performance of a particular section of their portal that shows in a set of tabs a huge list of items grouped by a set of categories, each item shows in a tool-tip a summary of it’s meaning/purpose… yes, jQuery is involved, and yes!, mouseenter/mouseleave or mouseover/mouseout is Involved too.. and yes… hold on.. JavaScript Event Delegation was involved??… event what??, ok, here we go.
The page looks like the next image:
One of the aspects I wanted to improve was the JavaScript code used to show the tool-tip on each of the items, why?, let’s take a look at the code:
$("my-path a[title]").live("mouseover",function(){ // calling the plugin to show the tool-tip });
Apparently, nothing wrong right?, a normal but old way to bind a mouseover event to an element, in this case to all links that match the jQuery selector –> $(“my-path a[title]”), wait a minute, to all links??… ooh no, you mean to all the 500+ links multiplied by 6 tabs, that is 3000+ items!! that is insane!!.
After a moment of shock I was determined to find a better way to handle that JavaScript code. I knew I needed a way to avoid listening to all the items (links) and instead listening only the parent and when the parent detected a mouseenter/mouseleave event, then be able to determine if the user was in a link and then show up the tooltip; my teammates Iván Santiesteban and José (Pepe) Martínez point me in the right direction, they told me: use JavaScript Event Delegation.
I really recommend to read How JavaScript Event Delegation Works Written by David Walsh, in resume:
“Event delegation allows you to avoid adding event listeners to specific nodes; instead, the event listener is added to one parent.”
In jQuery you can use .on() or .delegate(), all depends of your jQuery version, I had to use .delegate() since we use jQuery 1.6.x with that client, so, my new code looks like:
$j("#parent").delegate("a", "mouseenter", function(event) { // more code here... }); $j("#parent").delegate("a", "mouseleave", function() { // more code here... });
Now, I just have two listeners instead of 3000+!!. In my code I’m using mouseenter/mouseleave, you can use mouseover/mouseleave also, but be careful! all depends of your HTML and/or of the behavior you expected.
From jQuery .mouseenter() documentation:
“mouseover fires when the pointer moves into the child element as well, while mouseenter fires only when the pointer moves into the bound element.”
The performance of the page was increased dramatically in FF and response much better in IE7/8, still IE 7/8 sucks!.
I really hope you find this information useful.
This post is an introduction to learn about client-side templates and It’s not always good to reinvent the wheel, and that applies to this article too.
I have found a very good article that explain what I wanted to write here, is called From The Server To The ClientClient-Side Templating. I truly recommend to read this article in detail if you want learn how to deliver dynamic content via client-side and maximize code reusability and maintainability using JavaScript/jQuery, HTML, CSS, Ajax, JSON and of course, client-side templates.
Also, my teammate, Osvaldo Flores, has wrote about the same topic, he focused on Trimpath that is still our current JavaScript Templating engine here on Base22, but as all has to evolve, we are currently working on a new version of our assets using dust as our new engine, but that is another topic.
If you want to see a live demo of this client-side development technique, please visit our website Base22.com, there we use our xWidgets assets to show dynamic content that live in IBM WCM v8.
Future readings:
Hope you find this information useful!!