WordPress jQuery UI tabs is not a function

When working with jQuery UI you get an error message:

Uncaught TypeError: jQuery(...).tabs is not a function(…)

This is because WordPress' function
wp_enqueue_script( 'jquery-ui' );
doesn't actually enqueue the tabs widget, only the core of jQuery UI.

So after that you need to add:
wp_enqueue_script( 'jquery-ui-tabs' );

See this link below for more info:

Default Scripts Included and Registered by WordPress
https://developer.wordpress.org/reference/functions/wp_enqueue_script/

Using Wordpress AJAX on Frontend

wp_ajax_* callback functions will return 0 if they are called on the frontend by anonymous users.

This is because of security reasons, but Wordpress has prefixes for "unsecure" calls: wp_ajax_nopriv_*.

Both of the hooks need to be defined to work with logged in and anonymous users.

In functions.php define:

add_action( 'wp_ajax_call_stuff', 'my_callback' );
add_action( 'wp_ajax_nopriv_call_stuff', 'my_callback' );
function my_callback() {
    print_r($_POST);
    exit;
}

Another thing to add is the ajaxurl variable, which is not included on the frontend by default. You can do this in many ways, but I figured the best thing to do is to use wp_localize_script().

wp_localize_script('my_main_script', 'myPrefix', array( 'ajaxurl' => admin_url( 'admin-ajax.php')));

Then, you can call the AJAX request like this:

jQuery.post(myPrefix.ajaxurl, {
  'action': 'call_stuff',
  'whatever': '1'
 }, 
 function(response){
  alert('The server responded: ' + response);
 }
);

Wordpress update - old jQuery warnings

With the recent Wordpress update, jQuery was also updated to version 1.10.

Blogs were now full of warning messages, somewhere along the lines of:

ATTENTION! (by Comprehensive Google Map Plugin)
Your blog/site theme or one of your plugins uses jQuery javascript library which is older than the version 1.3.0.
The Comprehensive Google Map plugin will not work with such outdated jQuery version.
The minimum jQuery requirement for Comprehensive Google Map plugin is version 1.3.0. Apologies for the inconvenience..

However, this is not true. Version 1.10.2 is greater than 1.3, but somehow it get's detected as 1.1, because silly programmers cast the version code into float. Ugh.

if (version < 1.3) { // WTF ?!?!?!?!?!
    alert(CGMPGlobal.errors.oldJquery);
    return false;
}

Unfortunately, there's not much we can do about it, other than a quick hack of removing the version check or modifying it to 1.1.

Or wait for the plugin developers to FIX THE DAMN CODE.

Like that will happen anytime soon.

PHP:: Facebook getLoginUrl iframe next parameter redirect issue

DUE TO FREQUENT FACEBOOK API CHANGES THIS ARTICLE IS OUTDATED.

The php-sdk from Facebook has some bugs in it.

http://stackoverflow.com/questions/3380876/how-to-authorize-facebook-app-using-redirect-in-canvas http://forum.developers.facebook.net/viewtopic.php?id=70575

These solutions didn't work for me, so I had to change the function getLoginUrl in class Facebook

  public function getLoginUrl($params=array()) {
 $currentUrl = $this->getCurrentUrl();
 $args = array(
        'api_key'         => $this->getAppId(),
        'cancel_url'      => 'http://www.facebook.com/',
        'display'         => 'page',
        'fbconnect'       => 0,
        'next'            => $currentUrl,
        'return_session'  => 1,
        'session_version' => 3,
  'canvas'          => 1,
        'v'               => '1.0',
      );
 foreach($params as $key=>$val) {
  $args[$key] = $val;
 }
 return $this->getUrl(
  'www',
  'login.php',
  $args
 );
  }

Example:

if($me) {
 $logoutUrl = $facebook->getLogoutUrl();
} else {
 $loginUrl = $facebook->getLoginUrl(array('next'=>'http://apps.facebook.com/xxxxxxx/'));
 ?>
 <script type="text/javascript">
 top.location.href = '<?=$loginUrl?>';
 </script>
 <?php 
 exit;
}

JavaScript: escape()

When you're sending a string through a GET request with javascript, you should obviously URL encode the string to ensure all characters get transmitted. The escape() function in javascript works fairly well, even when you're sending UTF-8 characters. But the + character is interpreted as a space in the GET request, so you need to handle it manually. Here's how I do it:

 msg = msg.replace(/\+/g,'%2B'); 
 geturl('ajax.get.php?msg='+escape(msg));

First, you do a global regex match for the plus character, replace it with it's url encoded equivalent, and then you url encode the string with escape().

Example usage of Facebook.streamPublish()

DUE TO FREQUENT FACEBOOK API CHANGES THIS ARTICLE IS OUTDATED.

You can force streamPublish dialog from within the href bar in the browser. Also note the application ID prefix in the functions. More detailed code description is superfluous. javascript:c=9999999;h='Click Challenge';l='http://apps.facebook.com/click-challenge-en/?ref_6w=f_clicks';a126752370697733_Facebook.streamPublish('',{'name':h,'href':l,'caption':'{*actor*} made '+(c/1)+' clicks in 10 seconds.','properties':{'Speed':{'text':(c/10)+' clicks/sec','href':l}},'media':[{'type':'image','src':'http://w6.6waves.com/my-app/data/126752370697733/logo.gif','href':l}]},[{'text':h,'href':l}]);

Facebook Connect: FB.Connect.streamPublish() does not show up

DUE TO FREQUENT FACEBOOK API CHANGES THIS ARTICLE IS OUTDATED.

Here are the reasons why FBJS functions sometimes fail:

• xd_reciever.html is not installed correctly
• application key is not set in FB.init()
• Facebook Connect callback URL is not set in the application settings
• Facebook JavaScript API is not set correctly in your HTML. This should be set immediately after the body tag <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script> This should be set before the closing body tag <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US" type="text/javascript"></script>
• Facebook functions are called before JavaScript objects are initialized. FB.init(api_key, channel_path); FB.ensureInit(function() { // put your functions here });
• All Facebook JavaScript functions are called BEFORE the FeatureLoader.js.php You should put your functions after this call and into FB.ensureInit() function
• There are JavaScript errors in your code

If any of the errors mentioned above are met, the function will fail. If FBML tags are not rendered, you might also want to check, if you set the HTML header correctly. http://wiki.developers.facebook.com/index.php/XFBML Also, XFBML tags are required to render tags correctly.

jQuery - update DIV's HTML dynamically

jQuery is a JavaScript library, downloadable here. It uses AJAX calls to get external data. Retrieving this data is simple - I used two functions:

function geturl(addr) {
var r = $.ajax({
 type: 'GET',
 url: addr,
 async: false
}).responseText;
return r;
}

function changediv() {
$('#div_id').html(geturl('http://www.example.com'));
}

UPDATE: For asynchronous ajax calls see example in the comments below.

MSN Plus : simple countdown script

Simplest countdown script for MSN Plus. Seriously.

//Countdown date
TehDatum = "October 13, 2008 22:40:00";
//Refresh timer in seconds
TehDelay = 1;
//the 'until' text
TehWha = "do 20 let !";
//What do display if the counter ended
TehAfter = "20 let !";
//Smallest unit: dan, ura, minuta, sekunda
TehMode = "sekunda";


//end config -----------------------------

function OnEvent_Initialize(MessengerStart){
 MsgPlus.AddTimer("RFR",1000);
}

function OnEvent_Signin(Email) { 
 MsgPlus.AddTimer("RFR",1000);
}

function OnEvent_Timer(sTimerId){
    if(sTimerId == "RFR"){
    
 var dns = new Date();
     var pb = new Date(TehDatum);
     var d = pb.getTime() - dns.getTime();
     
     d=d/1000;
     dni=Math.floor(d/3600/24);
     ur=Math.floor((d-(dni*3600*24))/3600);
     min=Math.floor((d-(dni*3600*24)-(ur*3600))/60);
     sec=Math.floor(d-(dni*3600*24)-(ur*3600)-(min*60));
     
time = "Še "+dni+" dni, "+ur+" ur, "+min+" minut in "+sec+" sekund "+TehWha;

if(TehMode == "dan") { 
time = "Še "+dni+" dni "+TehWha;
}   

if(TehMode == "ura") { 
time = "Še "+dni+" dni in "+ur+" ur "+TehWha;
}  

if(TehMode == "minuta") { 
time = "Še "+dni+" dni, "+ur+" ur in "+min+" minut "+TehWha;
}

   
    
         if(pb.getTime() < dns.getTime()) {
          time = TehAfter;
         }      

   Messenger.MyPersonalMessage = time;
         MsgPlus.AddTimer("RFR",TehDelay*1000);
    }
}