Web Development & Stuff » Javascript

CKEditor in iFrame / jQuery UI dialog top offset bug

admin — Fri, 15 Oct 2010 16:37:22 +0000

I had a couple of CKEditors in a jQuery UI dialog box today. The dialog box contained an iFrame with the actual CKEditors inside that.

On the odd occasion when the modal box opened (tested in FireFox 3.6 on the Mac and PC) the vertical scroll position of the iFrame would not be at the top. Instead it was focused on one of the lower CKEditors.

After some Googling and hacking and still no solution I placed this in each CKeditor onReady/instanceReady callback, which did the trick:

1
2
3

CKEditor.on("instanceReady", function(event){

  $(window).scrollTop(0);

});

Stop Javascript event bubbling / propagation with nested html elements using jQuery

admin — Wed, 28 Jul 2010 13:51:29 +0000

You can stop nested elements triggering their parent element event handlers (DOM bubbling) using this handy jQuery method:

http://api.jquery.com/event.stopImmediatePropagation/

I ran into this issue whilst working on a calendar/scheduling app. Where day containing elements needed click events and their child elements needed click events too.

Love the jQuery ;]

Don’t trust the output of innerHTML() or jQuery.html() in Internet Explorer

admin — Sun, 16 May 2010 13:52:30 +0000

Especially if you’re trying to match attributes and their values!

Thankfully Kooilnc, the godsend has a solution:

http://stackoverflow.com/questions/1231770/innerhtml-removes-attribute-quotes-in-internet-explorer

I’ve wrapped that up into a jQuery function here:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

$.fn.ieInnerHTML = function() { 

  var zz = this.html(),

       z = 

     zz.match(/<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>/g);

    if (z){

      for (var i=0;i<z.length;i++){

        var y, zSaved = z[i];

        z[i] = z[i].replace(/(,

                            function(a){return a.toLowerCase();});

        y = z[i].match(/\=\w+[?\s+|?>]/g);

         if (y){

          for (var j=0;j<y.length;j++){

            z[i] = z[i].replace(y[j],y[j]

                       .replace(/\=(\w+)([?\s+|?>])/g,'="$1"$2'));

          }

         }

         zz = zz.replace(zSaved,z[i]);

       }

     }

    return zz;

}

// Usage:

$('#getInnerHtmlOfThis').ieInnerHTML();

Ajax requests cached by Internet Explorer

admin — Sun, 16 May 2010 13:30:35 +0000

God I hate IE…. and I really don’t often hate anything….

IE tends to cache its responses to some AJAX requests, which if you ask me is very stupid for its default behaviour.

FireFox caching is disabled by default. As always much love to the Fox.

Anyway, if you’re using jQuery.ajax() remember to pass the cache: false argument otherwise you may get unexpected results.

1
2
3
4
5
6
7
8
9
10

$.ajax({

    async:true,

    cache:false,   // <-- Set this or you will feel pain!!

    type:'post', 

    data: 'data[TreeRows]=' + data,

    success:function(request, xhr){

      return true;

    }, 

    url:'/admin/pages/save_tree_state'

  });

Access dynamic jQuery elements that have been added to the DOM after page has loaded

admin — Sun, 08 Nov 2009 10:43:06 +0000

If you wanted to manipulate elements you’d added to a page with jQuery after the DOM had loaded, you used to have to specify event handlers when adding them.

jQuery v1.3 has a handy new ‘live’ method. Which basically allows you to access all elements, whether present at page load or added dynamically afterward with jQuery.

jQuery documentation

Quick click event example:

1
2
3

$("a.deleteRow").live("click", function(){

    # Code to manipulate all matching elements added before or after the DOM has loaded.

}

Submit form with jQuery gotcha

admin — Thu, 29 Oct 2009 15:40:29 +0000

It seems that you can’t submit a form with jQuery using:

1	$('form#myform').submit();

If you have an input in the form with the name attribute set to submit. So this doesn’t work:

1	="submit" name="submit" value="Press to continue" />

Change the name attribute to something else other than submit and it works fine ;]

CakePHP plugin view overriding

admin — Thu, 27 Aug 2009 16:47:24 +0000

Woo hoo! It’s possible to override CakePHP plugin views just like in Rails using the Engines plugin. Documentation on how to do it is a bit thin on the ground though.

Say you created a CakePHP plugin called ‘cms’ and you had a plugin controller called ‘pages’ inside the cms plugin. Just place the views you want to override in:

1	/app/views/plugins/cms/pages/

I’ll post again when I’ve had a play at extending plugin controllers and models from the main app folder.

Reset PHP array key values

admin — Sat, 16 May 2009 11:17:19 +0000

To reset the key values in a PHP array you can do this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$things = array('a','b','c','d');

unset($things[0]);

print_r($things); 

#outputs

#Array

#(

#    [1] => b

#    [2] => c

#    [3] => d

#)

# Actually do the reset.

$things = array_values($things);

print_r($things);

#outputs 

#Array

#(

#    [0] => b

#    [1] => c

#    [2] => d

#)

SWFUpload returns HTTP 401 error after Apache authentication / password protected directory

admin — Thu, 30 Apr 2009 16:38:38 +0000

Uploaded my first site today that uses SWF Upload to handle large file uploads. The admin area of that site had basic Apache HTTP authentication via a .htaccess file.

SWF Upload failed with a 401 error after testing. It seems you can’t use this style of authentication with the current version of SWF Upload. Something to do with a bug/short-fall in Flash.

Anyways, good news as SWF Upload will handle PHP sessions (not looked into RoR sessions yet) therefore you can build your own PHP user system. You need to pass the PHP session variables through, you can use code along the lines of this to pass them:

1
2
3
4
5
6
7

# The post_params variables being the ones of interest.

upload_url : "/media-uploads/upload/",      

post_params: {

  "PHPSESSID" : "",

  "PHPSESSNAME": php echo session_name(); ?>"

},

flash_url : "/flash/swfupload.swf",