Tag Archives: jquery ui

How-To: Reload verification image using Codeigniter 2 CAPTCHA helper

9 Replies

Out of the box, CodeIgniter has a good CAPTCHA helper to use in your web applications. Here is a simple example of how to get a new CAPTCHA image without having to reload the page 😉

Basic Controller

class Welcome extends CI_Controller {

    private $captcha_path = 'assets/img/captcha/';

    public function __construct()
    {
        parent::__construct();
    }

    public function index()
    {
        $this->load->helper(array('captcha'));
        $captcha = create_captcha(array(
            'word'        => strtoupper(substr(md5(time()), 0, 6)),
            'img_path'    => $this->captcha_path,
            'img_url'    => $this->captcha_path
        ));
        $data = array(
            'captcha'        => $captcha
        );
        $this->session->set_userdata('captcha', $captcha['word']);
        $this->load->view('welcome', $data);
    }

}

The View (jQuery used for UI buttons and altering CAPTCHA image ‘src’ attribute)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/blitzer/jquery-ui.css">
<script>
$(function(){
    $('#new_captcha').button({
        text: false,
        icons: {
            primary: 'ui-icon-refresh'
        }
    }).click(function(event){
        event.preventDefault();
        $(this).prev().attr('src', 'welcome/new_captcha?'+Math.random());
    });
});
</script>
<?php echo $captcha['image']; ?>
<a href="#" id="new_captcha">Reload CAPTCHA</a>

Modified Controller Continue reading →

jQuery UI replacement for javascript:confirm() links

Leave a reply

Here is a nice confirmation handler to replace javascript:confim() links using jQuery UI…

$(function() {
    $('.ui-icon-trash').click(function(event){
        event.preventDefault();
        var targetUrl = $(this).attr('href');
        $('<div title="Confirmation Required"><p>Delete this record?</p></div>').dialog({
            autoOpen: true,
            modal: true,
            resizable: false,
            buttons: {
                Yes: function() {
                    window.location.href = targetUrl;
                },
                No: function() {
                    $(this).remove();
                }
            }
        });
    });
});

I use it for “delete” links (should be obvious) but it can be easily adjusted for any other type of confirmation.

Cheers!

My HTML5 base template (skeleton file) with jQuery from Google CDN

Leave a reply

Below is the standard HTML5 template I start most of my projects with. It includes the latest 1.x version of jQuery, jQuery UI, and the desired jQuery UI theme. It also has a conditional comment that checks to see if the current browser older than IE9 and includes HTML5Shiv to make sure new elements are rendered properly in older IE browsers.

While I don’t claim this is the best skeleton HTML5 template, I think it is a very solid foundation to start from 😉

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Untitled</title>
<meta name="keywords" content="">
<meta name="description" content="">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script>
$(function() {
    //DOM is Ready
});
</script>
</head>
<body>

</body>
</html>

jQuery Add Bookmark to Favorites Script

2 Replies

Here is a quick example of how to use jQuery along with traditional browser sniffing techniques to create a dynamic “Bookmark Us” link.

Google CDN (latest 1.x version, theme)…

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/blitzer/jquery-ui.css" />

The javascript… Continue reading →

Make the jQuery UI Datepicker use a jQuery Button

4 Replies

It has been bugging me for some time that the datepicker widget uses a normal button unless you tell it to use an image. Seeing that we are using the jQuery-UI framework, it makes sense to me that the button should be styled as such. After playing with the selectors and trying it a few different ways, here is how I made that boring datepicker button become a jQuery-UI button (with calendar icon). Continue reading →

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 🙂

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 →