My Monkey Do

A Log of Coding Solutions

javascript

WordPress Heartbeat API

by

I could not find any extensive documentation on the WordPress Heartbeat API, so I am writing here to remember what I have learned through various tutorials throughout the web.

The Heartbeat API is written in Javascript.  Think of it like a javascript function that gets run every 60 seconds (depending on the interval) which sends data via POST to the server and then the server returns a response.  All of which you can easily hook into.  It was introduced in WordPress 3.6.

Quick Examples

PHP

// server received whatever parameters from when javascript triggered the "heartbeat-send" event.
function myplugin_heartbeat_received( $response, $data ) {
if ( !empty( $data['myplugin_id'] ) ) {
$response['myplugin_got_it'] = true;
}
return $response;
}
add_filter( 'heartbeat_received', 'myplugin_heartbeat_received', 10, 2 );

Javascript

jQuery(document).ready(function($) {
wp.heartbeat.interval= 15;
// set some parameters when it's time to send data to the server
$(document).on('heartbeat-send.myplugin', function(e, data){
data['myplugin_id'] = my_id;
});

// do something when your page gets a response.
$(document).on('heartbeat-tick.myplugin', function(e, data){

if ( data.hasOwnProperty( 'myplugin_got_it' ) ) {
refreshPage();
}
});

});

Heartbeat Pulse Interval

The ‘heartbeat_settings’ filter gets applied in the ‘init’ hook, priority 0 in wp_default_scripts in wp-includes/script-loader.php.  So if you do use the hook on the server-side and want to only run it on certain pages, be prepared to parse the URL because a lot of WP functions aren’t available at that time.  Alternatively you can set the interval in javascript with wp.heartbeat.interval(15) where 15 is seconds.  Note some other tutorials say to use ‘fast’, ‘standard’, ‘slow’, but that didn’t work for me for some reason.

 

Tutorials

I found these tutorials to be the most helpful.

http://code.tutsplus.com/tutorials/the-heartbeat-api-getting-started–wp-32446

http://code.tutsplus.com/tutorials/the-heartbeat-api-changing-the-pulse–wp-32462

http://code.tutsplus.com/tutorials/heartbeat-api-using-heartbeat-in-a-plugin–wp-32496

 

Bootstrap Tab linking

by

If you use Bootstrap (v3.x) you would see that clicking on a tab does add anything to the url so if you were to refresh, you wouldn’t go back to the tab you are on.  The post below says to get rid of the e.preventDefault() in the tab api and add some code to detect the window href so you can go directly to your tab.

http://www.gsdesign.ro/blog/jquery-ui-bootstrap-tabs-remember-last-selected-tab/

Javascript defaultValue

by

For some reason I have never needed to use the defautlValue property up until today.  I was pleased to find javascript can access the original input value so tracking changes in a form is a bit easier.  However, the defaultValue only works as expected for “text”, “file”, and “password” fields.

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6043025

A workaround is to use type=”text” and just have a style=”display:none;” to act like a hidden field.

Fancybox not working after second click

by

Problem

Setting up fancybox 1.3.4 with inline content doesn’t work when clicking on the link twice.

Solution

The problem I think is with the upgraded version of jQuery.  If using jQuery 1.4 like the example, it should work fine.  But if you are using jQuery 1.10+ or even 1.9 you may run into this problem.  The work-around would be to explicitly set the content like so:  The proper workaround is to save the parent of the element you want to lightbox and then on fancybox-cleanup replace the fancybox-inline-tmp element with the element you lightboxed like so:

  var popupParent = jQuery("#popup").parent();
  jQuery(document).on('fancybox-cleanup', function() {
    popupParent.find('.fancybox-inlinetmp').replaceWith(jQuery("#popup"));
  });

Update: There are other errors that occur with Fancybox and jQuery 1.9+. Stack overflow has the patch… but you still need to do this fix for the second click.
http://stackoverflow.com/questions/14344289/fancybox-doesnt-work-with-jquery-v1-9-0-f-browser-is-undefined-cannot-read

Update 2:  Below is a patch to fix the inline issue too.  I only tested for one instance, so use with caution.  I added a objParent… look for that and that’s all the changes made.

jquery.fancybox-1.3.4_patch_2.js

 

 

IE Doesn’t see padding on hover

by

Problem

Internet Explorer 8 (I no longer even look at IE 7) seems to not be able to see the padding on an anchor tag within a ul > li > a structure.   Using jQuery I have a hover event on the li, however it only works on the bottom 1px of the li.

 

Solution

I tried adding position:relative and zoom:1, as some have suggested but that doesn’t work.  I then just tried to put a background in the anchor tag to see if IE even recognizes that the anchor tag has padding.  It did recognize the padding and once the background was in the hover also worked.  Turns out IE needs a background set?  I found another person who had this problem and the solution was to set the background to a transparent image of 1×1 px.

 

http://stackoverflow.com/questions/12197999/ie-not-including-margin-and-padding-in-hover-without-background-set

jQuery – When to use return false or preventDefault

by

Ran into a great article that explains the differences between return false, preventDefault and stopPropagation.  Here’s a summary:

  • return false does both preventDefault and stopProgagation
  • preventDefault just stops the browser default event.
  • stopPropagation stops bubbling.

In most cases you would only want to do preventDefault.  If you stopPropagation you prevent your code from being extensible.

 

source:  http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/