Question

ref: http://boedesign.com/blog/2008/06/08/imagetick-for-jquery/

I’m trying to get the aformentioned example working in a setup with Django on a generated form. In the custom_button function (see below) the $label.text()
comes up empty. As it seems, imagetick uses the ‘id’ from the input tags. And it breaks somehow because the generated id’s have a suffix that ends in _0 _1 _2 etc.

<input type="radio" id="id_template_logo_align_2" value="right"
       name="template_logo_align" />
<label for="right">right</label>

The img tags with image names have a, ‘left’, ‘middle’, ‘right’, suffix like nice_image_left.jpg, nice_image_middle.jpg etc, like so:

$("input[name='template_logo_align']").imageTick({
    custom_button: function($label){
        $label.hide();
        return '<div class="custom-radio"><img style="cursor: pointer;" class="spaced" src="/sitemedia/images/thumb_invoicelogo_' +
            $label.text() + '.jpg"></div>';
    }
});

I use a custom renderer for the radio button field, and the whole (radio) type selection and form submission work perfectly. except for displaying the 3 different images correctly.

Any pointers are very welcome.

Answer 1

I guess the plugin expects the <label> to have the <input>’s ID set as the value for it’s own ‘for’ attribute. You need to modify the plugin and build your own selector for $label (horrible varname btw) if you want to use your current markup:

$label = $(“label[for=” + $(‘#’+id).attr(‘value’)+” ]”);

And Robert’s your mother’s brother.