Categorie ‘ajax’ » Archiv


6

How to fix radio inputs losing focus when dragging a jquery ui sortable div

July
24

hows that for a descriptive title eh? haha, that’s the exact term I used when I ran into trouble with some wordpress meta boxes on a custom admin page I was making for the new CommentLuv. I am using the WordPress functions for add_meta_box to add, you guessed it, meta boxes to a settings page.

Draggable killed the radio bar

ok, lame Queen song title parody I know but it’s true. I had a bar of radio buttons in one of those meta boxes and if I dragged and dropped the box to a new place, it lost it’s radio button dots!

When I dropped the sortable meta box, the happy little dot in the radio input would disappear which messed things up when I saved the settings because the form would not have a radio input with a status of checked any more. :-(

jQuery rescues jQuery!

jQuery is frickin awesome and I love it. It’s the sole reason CommentLuv was able to become the plugin it is today. It’s also sometimes a little finicky and it does things in a particular way which causes some mild issues. This is one of them, it’s all due to jQuery cloning the contents of the sortable box when you drag it and then when you drop it, the radio button loses it’s happy little dot.

I did a mammoth amount of searching and could only find 2 instances of it happening elsewhere (here and here) and both instances said it was a bug/feature and didn’t provide a solution.

Geek me up, I’m goin in!

[youtube clip_id="Z9_jIa2WADc"/]

As a means to procrastinate, an unhealthily strong stubbornness bone and a burning sensation in my pants whenever I can’t do something that I want to do, I set about trying some code to re click the radio buttons after the meta box had been dropped after dragging.

Here it is, I hope you find it useful! (change the two instances of .wrap to whatever container your sortables are in)

// global script for commentluv premium settings pages
// workaround for bug that causes radio inputs to lose settings when meta box is dragged.
// http://core.trac.wordpress.org/ticket/16972
jQuery(document).ready(function(){
    // listen for drag drop of metaboxes , bind mousedown to .hndle so it only fires when starting to drag
    jQuery('.hndle').mousedown(function(){
        // set event listener for mouse up on the content .wrap and wait a tick to give the dragged div time to settle before firing the reclick function
        jQuery('.wrap').mouseup(function(){store_radio(); setTimeout('reclick_radio();',50);});
    })
});
/**
* stores object of all radio buttons that are checked for entire form
*/
function store_radio(){
    var radioshack = {};
    jQuery('input[type="radio"]').each(function(){
        if(jQuery(this).is(':checked')){
            radioshack[jQuery(this).attr('name')] = jQuery(this).val();
        }
        jQuery(document).data('radioshack',radioshack);
    });
}
/**
* detect mouseup and restore all radio buttons that were checked
*/
function reclick_radio(){
    // get object of checked radio button names and values
    var radios = jQuery(document).data('radioshack');
    //step thru each object element and trigger a click on it's corresponding radio button
    for(key in radios){
        jQuery('input[name="'+key+'"]').filter('[value="'+radios[key]+'"]').trigger('click');
    }
    // unbind the event listener on .wrap  (prevents clicks on inputs from triggering function)
    jQuery('.wrap').unbind('mouseup');
}

ajax, Code, jquery, PHP


5

this.parentNode has no properties jQuery

November
13

Ever had this error when you’re running a jQuery script?

this.parentNode has no properties jQuery

This innocuous error, in my experience comes down to two things:

  1. You are trying to get the ID of a parent object. Like if you want the form ID from knowing the name field. jQuery(“#name”).parents(“form”).attr(“id”); and the form doesn’t have the attribute of ID set.
  2. Scriptaculous , more specifically effects.js . If the effects.js is being used on the same page then this error happens. The solution is to download the latest version (1.8.1) and use that instead. You can overwrite just the effects.js from the package and you wont get the error any more!

Exciting? yes because no matter how many searches I made I couldn’t find the answer. Google groups and forums all talked about something else causing it like noConflict() or loading scriptaculous first.

Now you know. Use the latest version of Scriptaculous (if you must use it at all) with jQuery.

ajax, Blog News, Code


5

Autumn Sun and Coding Fun

October
2

After a bright and early start to the day after my scrumptious chicken last night I felt good as the sun shone through my window and now, in the late afternoon, I’m done.

CommentLuv is now updated to 2.5, it incorporates the heart tip plugin as an optional extra and makes it compatible with wp2.5 too.

I spent most of the time separating the jquery and other scripts into include folders which makes the header source much tidier and the scripts themselves much easier to edit and update. The last 2 hours have been spent getting the tip box to work as part of commentluv and the result is activated here for testing.

I’ll let it settle in for a day or so and then do a codex update along with an update to the CommentLuv registered members to let them know about the site allowing them to edit their profile and have their description parsed and placed in the info boxes.

I made some minor changes to the code so that those who prefer the old style commentluv can have a checkbox to untick if the user doesn’t want the last post shown. Hopefully that will make it easier for the previous versions users to switch to the new one.

To celebrate, I’m off for a walk next to the canal with the missus
canal boats

edit… I had such a nice walk that I came up with some good ideas and my missus’ secret stealth plan to get us to end up in Oxford street gave me time to run them through my head until I could get back to the keyboard and add them in!

I have put in a bit of code that should make it work out of the box for most blogs, most of the questions I get on the forum are solved either by getting the person to change their comment form ID value or telling them that it is working but they can’t see the button and checkbox while they’re logged in as admin.

Now, the form id is found out automatically as long as the comment text area ID is correct and that should be because all wordpress blogs send their comment as POST variables which use the name attribute of the form and for that to work on all themes, all themes must use the same values for the name attribute.

If I know what they are then I can find out the parent form ID easily.

I’ve also added the checkbox and badge to show for admin so I no longer have to spend ages visiting peoples sites and viewing the source to let someone know how to get the plugin working.

this is really the best version out yet! I’ll update it on the codex tomorrow

ajax, Blog News, Blog Tools, Code, PHP


23

New plugin to add snazziness to commentluv links

September
29

I had a eureka! moment this morning as I was fighting to stay asleep even though I was busting for a pee, those moments in semi-dream state where if you’re careful you can ‘watch’ the dream happen before you piss your pants.

I get this quite a lot but people I tell don’t seem to (I’m sure witchypoo would know someone) so maybe I’m as nutty as the floor on a pistachio eating contest.

but back to eureka!… I saw a tooltip thing on someones name at a German blog last night, I couldn’t understand it but it must have stuck in my head because this morning I was dreaming of a big floaty tooltip with a spinning Gravatar in it and I couldn’t get it back in the net which, in the way that dreams like to play things, was representative of a folder of old code.

Now, a whole load more boring stuff happened too but, that was the bit that (with hindsight) got me tinkering with a jquery plugin called Jtip as soon as the coco-pops had been finished. I failed miserably and in desperation opened up Dreamweaver to try some javascript things only to find that the last file I had opened in the big D was a page I made that used Jtip! haha, I normally do all my coding in ZendStudio. I don’t know why I used Dreamweaver this time.. woooOHHHHoooo :shock:

Anyhooo, You can see the result of staying up too late doing code for too long and then getting psychotic with weird dreams where you’re a purple triangle and trying to turn it into a plugin….

When you hover over the little heart on the CommentLuv last blog posts, you get to see the members Gravatar and profile at commentluv.com if they’re a member and see how many times that link has been clicked before.

If the link owner isn’t a member of commentluv.com, they get how many times that link has been clicked and a message about commentluv.com

leave a comment and try it below!

Please note
If you use feedburner and your links point to your feedburner link then it wont be able to know who you are. See this post to switch off feedburner redirects.

Will be integrated to CommentLuv as an option
This should take about a day but I think it’s better to combine the two and have the little hearts as an option to be switched on by the user (not everyone likes tooltips!)

ajax, Blog News, Blog Tools, Code, PHP, Wordpress


43

CommentLuv beta release 12 13 now out. Please update

September
21

Thanks to all the beta testers of CommentLuv, release 13 is the most stable and compatible version yet. I don’t wanna tempt fate but if everything works as well ‘out there’ as it does on my test machines and servers then it will be updated on the codex so everyone will get notified of the new version and we can all start seeing it spread to the existing v1.99 blogs.

I’ve been deep in code and frantically checking each and every site that has activated the beta version and in nearly all cases have managed to see the plugin working on those who’ve tried it.

I have a small tradition I like to do when I’m deep in a project and that’s to not shave from when I start it to when I feel comfortable that there’s only cosmetic changes to come.

here’s me before I started coding this new version and site

and this is me after using my awesome Wilkinson Sword quatro with beard trimmer (6th week without changing a blade and beard trimming twice a week) that cost a measly 3.50GBP best.razor.ever!

and another looking more serious…

hurray, smooth skin means success in something. I must admit that I like the bristles, they give me something other than a cigarette to fiddle with while I’m thinking. My missus likes them too ;-)

There have been a couple of sites that required me to change the plugin code but mostly this was to make it compatible with other not-so-well-behaving ajax scripts and wotnot. This new version takes out the onsubmit event altogether which makes things much less prone to being tripped up by other scripts that listen to the comment form (ajax preview, threaded comments). You can download it in the usual place or click here

Happy commenting, please give it a test here. I tried every combination of error, not found, blank result, resubmitted comment and mess up I could and it seemed ok.

ajax, Blog News, Blog Tools, Code, PHP, Wordpress


11

Some improvements for commentluv.com and plugin

September
20

I’m really happy with how commentluv.com is going and the plugin seems to be working ok, there are a few blogs that need to change some settings in the settings page but mainly it’s ok.

I’ve added click tracking to logged on admin users now and fixed the problem of an apostrophe causing the script to break.

The site has a new guest writer who will be in charge of writing the CommentLuv featured site posts, the first one is up and there are many more to come! Thanks Sire for writing the review!

Stats are a little improved.

I think there is one change I would like to make in the way the code works, I think it will be better to leave the adding of the comment by listening for the submit event out, instead I think it is better to populate another field on the form with the relevant text and add it when the comment is processed using the appropriate filter built into wordpress.

I guess this was supposed to be the way it should have been done but I was concentrating on getting it to work without needing wordpress other than for the settings page but I think it will be more compatible with other javascripts that listen or affect the comment fields if I do it this new way instead.

I’ve only seen a couple of blogs that would need this to be compatible but where there’s 2 yaddy yaddy yaddah :-)

ajax, Blog News, Code


53

I need your luv help (I pay money, senor!)

September
16
What I need

I need some help to get CommentLuv through it’s last hoop before I can release it to the world at large and my deadline for that is 25th September 2008 – the last day to enter a plugin for the WordPress MU Plugin Contest

That’s where (I hope) you come in. I have the plugin working nicely on a few blogs and the click tracking and stats are showing results for my wee group of test beds but I need a larger scale test… I’ve removed all the bugs that I can see and I’m confident that it wont do any damage because it doesn’t touch the database and most of the work is done on the client side through javascript.

The only interaction it has with the wordpress code is to listen for a single post action, if it’s a single post it puts the correct javascript in the header and that’s it. The majority of the code is the settings page and action hook code.

What you could get

Money! I’ll tell you about the money now before you get bored and miss the rest ;-)
$100 dollars by Paypal (or equivalent prize in Amazon or other voucher of your choice) for some lucky person who helps me over the next few days to a week by doing the things detailed below. The winner will be decided by the randomness of the UK lottery on Saturday 26th (1 day after the guaranteed 100 Million Euromillions jackpot which must be won!). I’ll split up the 49 numbers available equally (yes I know 49 doesn’t divide well unless it’s a 7 but we’ll work something out) between everyone and publish them at 6pm, whoever gets a match with the bonus number drawn wins the moolah.

Not just that, part of this is making and receiving comments to see if it behaves on a large scale and for that there will be a list of all those participating viewable only to those participating where you can find blogs that give 10x the luv (see how below) which will increase your traffic/readership/luv rating and more! (obviously, this needs a few people to help, I can’t do it with just 5!)

The technical bits ( 8-O )

Don’t worry! it’s not hard, just as easy as installing a plugin and registering your url with the hub site (and dancing naked in the rain).

it goes like this…

For people with WordPress own hosted blogs only

1

Download the beta of CommentLuv (version 10 pre final) and Install.

Download CommentLuv (right click and copy url to use the one click plugin updater if you use it)

If you already have CommentLuv please deactivate it first and then upload the commentluv folder overwriting the existing one and activate it in the dashboard plugins page. Go straight to the commentluv settings page under settings/commentluv and see the bit at the bottom about entering your field ID’s (it sounds nastier than it is).

You can see in your theme’s comments.php what your comment form uses for identifying the form, the name field, the url field and the comment input area. If it uses ID= then use that in the settings or if it uses name= ,enter the value in the settings page and choose “name” as the type.

There are some screenshots here at the Ajax CommentLuv Plugin page over at CommentLuv.com

It sometimes works right out the box because the default ID’s I put in there have worked on a few blogs without any need for changing. It depends on who designed your theme. Other ways to find out are to click and drag over your comment form while you are logged out of your blog and view the selection source (in firefox) or use the developer toolbar to show form information.

2

Register your url at CommentLuv.com

Pop over to my sister site CommentLuv.com and register like you would with any normal WordPress blog. Activate your registration and visit the settings page (http://www.commentluv.com/settings) whilst logged on.

There you can register your blog URL (preferably where you’ll be installing the plugin) and you will be given some code to display a verification image on your blog home page (the page pointed to by the URL you register). Once you place the code on your site you can come back to the settings page at commentluv.com and click “verify”. The site will then visit your url and look for the code.

If all goes well and it can see your site and verification it will be ready to rok (so it says)

Set your feed cache age and if you want see if it can find your feed automatically. If it can’t then you can enter it in manually if you like (although it all works better if your site has an autofindable feed which is standard in wordpress blogs)

Check for your Commentluv member ID and enter it in the box located on the plugin settings page on your blog dashboard, check that click tracking is enabled (ticked) and update your settings.

3

Register at the support forum

:-x yes I know there’s a whole lorra registering going on but they’re all under one roof and not with any shady company and it’s all to do with CommentLuv. There you’ll be able to report any errors or suggestions and I wont need to use some sort of mass email script and email people all the time. gosh I love forums and blogs! emailing is a right pain in the arsebone. I just cannae be bothered with it!, I hate saying the same things and giving the same answers over and over again (except giving links to pages that say the things I’ve said over and over again) but… anyhoooooo

Done!

All that’s left to do is use commentluv by visiting the the blogs who use the new version and see how it plays with others. Return to the CommentLuv site often and see if the stats make sense for what you’re seeing yourself and report any anomalies or strange behaviour at the forum.

Because I will be releasing this to the plugin contest I would love for you to love it and vote for it when the time comes, it might get some more exposure and I’ll be sure to have a permanent part of the about page showing links to the people who help. New users will want to start using the plugin when it’s final as soon as possible and the links page would be a perfect place for them to start clicking through to ajax commentluv enabled blogs. (that could be you!)

Please leave a comment here or at the forum to say you’re participating

The Links:
CommentLuv Beta plugin file
CommentLuv.com hub site
FiddyP Support Forum

ajax, Blog News, Blog Tools, Code, contests, PHP


14

A CommentLuv option for Blogspot owners?

September
12

Well, I never expected to wake up this morning with jQuery going through my dream…. seems to have had some sort of effect though.. 3 hours after my Weetos…

I have CommentLuv working on a Blogger blog!!!.

see it here http://cl-jskit.blogspot.com/2008/10/first-post-before-jskit-install.html

Only problem is, now the release will be put back a week because I have thought of more options to put in and I need to tidy the MU version a little bit as well as add some pages to the support site. Registrations are going well but some people aren’t registering their url too which needs to be done for them to choose from the last 10 posts in their comment.

slowly slowly catchy monkey!

ajax, Blog News, Blog Tools, Code


35

Trying out the AJAX version of CommentLuv here

August
31

I’ve been working on the AJAX version of commentluv for quite a while, I think I have it working ok enough for it to do it’s dry run on a blog. The functionality is fine, I just have to work on the details so it can be installed easily as a plugin.

Now, when you start to type your comment it will go off and fetch your last posts from the feed found at the URL given. It even allows you to choose which of your posts you want included.

It’s still pretty new and a bit clunky but it seems to do the job, if you’re having any issues with it please let me know!

ajax, Blog Tools, Code, PHP


31

CommentLuv Ajax Preview, now platform independent !

April
7

I spent a large part of last weekend coding some changes to CommentLuv, well, changing the way it can be called and how it displays posts and such. Here’s a little preview of what sort of thing it can do on a dummy form, let me know if it can’t pick up your last post or if you experience any issues with it…

This is running as just javascript and jquery without using any of the wordpress core functions and it should work on standard forms on sites that don’t have PHP enabled. I just need to tidy up the code and package it in an easy to install way and it’ll open up CommentLuv to many more platforms…yey!

I’m not 100% sure yet but this could mean a blogspot commentluv plugin, I’m trying some experiments now and so far the results are promising…

ajax, Blog News, Blog Tools, Code, PHP, Social Networking