Author Archives: Robert

Submit ajax form in jQuery-UI Dialog with Enter Key

11 Replies

This question is posted quite a bit and nobody seems to be able to provide a good solution that won’t behave questionably. So here’s my take on it…

$('<div id="myDialog"></div>').appendTo('body').dialog({
    autoOpen: false,
    modal: true,
    closeOnEscape: true,
    buttons: {
        OK: function() {
            $.ajax({
                type: 'POST',
                url: 'save.php',
                data: $('#myDialog :input').serialize(),
                error: function(xml, status, error) {
                    $('#myDialog').html('<p><strong>Error Code:</strong> '+status+'</p><p><strong>Explanation:</strong> '+error+'</p>');
                }
            });
        },
        Cancel: function() {
            $(this).dialog('close');
        }
    },
    open: function() {
        $(this).html('').load('form.php');
    },
    focus: function() {
        $(':input', this).keyup(function(event) {
            if (event.keyCode == 13) {
                $('.ui-dialog-buttonpane button:first').click();
            }
        });
    }
});

Note: You can also trigger the event on any element (not just form fields) by using $(this) as the selector.

That’s it, enjoy 🙂

Change CodeIgniter’s Form_validation error delimiters globally!

Leave a reply

I have seen this question all over the web and am surprised that nobody has actually offered such a simple solution.

Anyway, here is a quick, simple and painless way to set CodeIgniter’s error delimiters (used by the Form_validation library) one time for your entire application. Create “application/libraries/MY_Form_validation.php” with the following contents… Continue reading →

Easily load multiple views with CodeIgniter

2 Replies

It is not uncommon to load a common header, footer and other views in each controller. While this can be achieved like so…

$this->load->view('header', $header_data);
$this->load->view('content', $content_data);
$this->load->view('footer', $footer_data);

I wanted the ability to do the same thing with a single line of code. So I decided to extend the core Loader library by creating “application/core/MY_Loader.php” with the following code… Continue reading →

Disable browser cache easily with CodeIgniter

29 Replies

I have a project where users are validated by session data. When the user logs out I destroy the session and redirect them to the log-in page, but this does not prevent them from clicking the browser’s “back” button, in which case they still see the data.

My first solution was to set headers with PHP’s header() function. Then I decided to use CodeIgniter’s setheader() function from the Output library (no real difference, just using CI methods when possible). Finally, I decided the best way to do this would be to extend the Output library itself. This way I am not repeating multiple function calls in each controller. Here is end-result… Continue reading →

Reset fields to default values using jQuery

Leave a reply

Have you ever wanted to reset only fields in a particular section of the form without resetting all of the fields?

Here is how you can achieve this with jQuery 🙂

$('#reset_address').click(function (event) {
 event.preventDefault();
 $('#address_details :input').each(function() {
  if ($(this).is('select')) {
   $(this).val($(this).find('option[selected]').val());
  } else {
   $(this).val(this.defaultValue);
  }
 });
});

#address_details represents a <fieldset> within my <form>. When the user clicks the #reset_address link I revert the fields within the <fieldset> (not the entire form) back to their original values.

Note: defaultValue is a core JavaScript property. A conditional check for <select> was necessary since defaultValue only applies to <input> and <textarea> fields.

My ultimate .htaccess file for CodeIgniter 2.0

2 Replies 
#Initialize mod_rewrite
RewriteEngine On
RewriteBase /

#Force "www" subdomain
RewriteCond %{HTTP_HOST} !^www\.
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]

#Re-route forbidden urls
RewriteCond %{REQUEST_URI} ^(system|application).* [OR]
RewriteRule ^(.*)$ index.php?/$1 [L]

#Re-route urls if file/directory does not exist
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?/$1 [L]

Download a Stopwatch and Vana’diel Clock for Final Fantasy XI

Leave a reply

Hey everyone, here are some helpful downloads for those of you that play FFXI (Final Fantasy 11).

Stopwatch – I use this for camping NMs that are either timed or time-lottery spawns.
Note: PC only, use online-stopwatch.com for a Mac

Vana’navi – Clock that provides airship schedules, elemental day, moon phase and more.
Note: PC only, use mithrapride.org for a Mac

Crafting Compass – My fellow crafters know what this is for 😉

Player: Aldyn
Server: Ifrit
Linkshell: TwigsAndBerries

PS: All credits to their authors are found within the executable downloads 😀

PowWeb a little short on hosting power…

Leave a reply

I am working on a new client’s site. He happened to already have hosting/email set up with PowWeb. I had of course heard of them so I did not immediately suggest moving to a larger provider as I usually tend to do when it comes to mom/pop hosting companies.

While PowWeb’s control panel seems relatively intuitive and feature-rich, their network and/or servers are so slow I want to shoot myself. This client is using their “PowWeb OnePlan” which is probably one of the low-end packages, but nevertheless it should not be this slow. I acutally have to wait for a 1k file to upload using Dreamweaver, I mean come on… seriously?

— Insert Shameless Promotion Here —

Get fast, reliable web hosting to keep your developer’s happy. Have a lot of client’s you manage hosting for? Get yourself a domain/hosting reseller account instead and earn commissions on each sale/renewal!

Some people may think GoDaddy/WildWestDomains shouldn’t be in the hosting business, but they are actually quite easy to deal with and impose very few restrictions, most of which you can easily override 🙂

IMPROVED jQuery Image Preloader with Rollover Effect (dynamic extensions supported)

7 Replies

This post expands on my original jQuery Preload and Swap Navigation Images post. The original code required you to enter the file extension (eg: jpg, png, gif). The modifications below make this jQuery hover/rollover/swap code totally dynamic 🙂

$(document).ready(function() {
 //preload images
 var preloadedImages = new Array();
 $('#container img').each(function(i) {
 preloadedImages[i] = new Image();
 var ext = $(this).attr('src').split('.').pop();
 preloadedImages[i].src = $(this).attr('src').split('.' + ext).join('-hover.' + ext);
 });
 //rollover effect
 $('#container a').hover(function() {
 var ext = $(this).find('img').attr('src').split('.').pop();
 $(this).find('img').attr('src', $(this).find('img').attr('src').split('.' + ext).join('-hover.' + ext));
 }, function() {
 var ext = $(this).find('img').attr('src').split('.').pop();
 $(this).find('img').attr('src', $(this).find('img').attr('src').split('-hover.' + ext).join('.' + ext));
 });
});

The only significant change from my original code to grab the file extension (var ext = value) before preloading or swapping the images… Continue reading →

Use location.hash to pre-select a jQuery UI tab

Leave a reply

I have noticed quite a few people asking how to set a default tab during page load using the jQuery UI Tabs Widget. My method is as follows…

<script>
$(function(){
 $('#tabs').tabs({
  selected: (location.hash && parseInt(location.hash.substr(1)) != 'NaN') ? parseInt(location.hash.substr(1)) : 0
 });
});
</script>

I am checking the url for a hash value (eg: mypage.htm#3). If one is found and it can be parsed to an integer, it will use that number for the selected tab, otherwise it defaults to zero.

jQuery UI Tabs Widget documentation

…

If you are not familiar with the short-hand if/else syntax above, here is an example…

variable = (condition) ? true : false;

Written long-hand it would be…

if (condition) {
 variable = true;
} else {
 variable = false;
}

How to Add icons to Input (Submit and Reset) Buttons using jQuery UI

12 Replies

As you may have already noticed, most browsers do not support adding icons to <input type=”submit”> and <input type=”reset”> using jQuery UI. The code below will correct this issue by replacing matched <input> tags with appropriate <button> tags…

$(document).ready(function(){
 $('input:submit, input:reset').each(function(){
  $(this).replaceWith('<button type="' + $(this).attr('type') + '">' + $(this).val() + '</button>');
 });
});

We loop through each submit and reset button and replace it with a button tag using the original input’s value as the new button’s text. Since we are using the original input’s value attribute, it should not be considered optional. Otherwise, you’ll end up with a button that has no text unless you set it explicitly with the .button({label: ‘my button label’}) option unless you intend to show only the icon by calling .button({text: false}) option.

Now we can assign icons to the buttons without updating the html using the following code… Continue reading →

Safe email mailto links using jQuery

Leave a reply

Here is a quick and easy way to use jQuery for hiding email links from spam bots.

$(document).ready(function() {

 //safe mailto's
 $('a[href*="[at]"][href*="[dot]"]').each(function() {
  var email = $(this).attr('href').split('[at]').join('@').split('[dot]').join('.');
  $(this).attr('href', 'mailto:' + email.toLowerCase());
  if ($(this).text().length == 0) $(this).text(email);
 });
});

First things first… loop through all the anchor tags (aka: links) that have [at] and [dot] in the href attribute. Next replace those placeholders with the proper characters. Then we prepend mailto: and lastly update the inner text of the anchor tag with the email address.

To make this work, your email links would be written as follows… Continue reading →