Jquery ui checkbox

Hello experts
I need your help customizing my checkboxes using jquery ui .
I found a nice tutorial here http://jsfiddle.net/adamboduch/b2GPv/
Because i'm using in the current project jquery 1.7 and Jquery ui 1.8 this is not working.
I decided to create the created "buttons" dynamically.
The problem i have now is to add the functions to the created "buttons"
The two interesting functions in the script are the onclick and the refresh functions i want to implement.
(I think so)
I tried something like:
function refresh(elem) {
            // Set the button icon based on the state of the checkbox.
            elem.button( "option", "icons", {
                primary: elem.prev().is( ":checked" ) ?
                "ui-icon-check" : "ui-icon-blank"
            });
        }
$("body").on("click", "button.ui-checkbox", function (e)  {
                      e.preventDefault();
                              var elem = $(this).prev();
                    elem.prop( "checked", !elem.is( ":checked" ) );
                    refresh($(this));
            });

But it is not working.

Any help to get it work?
LVL 2
PanosAsked:
Who is Participating?
 
Alexandre SimõesManager / Technology SpecialistCommented:
Hi mate,

here's the modified version of the link you gave us so that it works on your jQuery version
http://jsfiddle.net/AlexCode/b2GPv/129/

Give it a try but I think everything is operational.

Cheers!
0
 
PanosAuthor Commented:
Hi Alexandre Simões
Your code is working but i prefer to create the styling dynamically (i mean direct with html code) rather than letting the script to do it because i have my js on the bottom of the page so that i have first the checkboxes like they are and after page load customized.
The second problem is that clicking on the button submits the form.
I will be very happy if you could take a look at my code and try to make it able to work correctly.
0
 
PanosAuthor Commented:
Hi again.
I think i have a  solution that is working fine for me.
Take a look please tellme your opinion.
html:
<ul>
<li>
<input id="md" class="ui-helper-hidden-accessible" type="checkbox">
<button class="ui-checkbox ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" title="checkbox" aria-disabled="false" role="button">
<span class="ui-button-icon-primary ui-icon ui-icon-check"></span>
<span class="ui-button-text">checkbox</span>
</button>
<label for="check" class="ui-widget">Test</label>
</li>
<li>
<input id="sd" class="ui-helper-hidden-accessible" type="checkbox">
<button class="ui-checkbox ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" title="checkbox" aria-disabled="false" role="button">
<span class="ui-button-icon-primary ui-icon ui-icon-check"></span>
<span class="ui-button-text">checkbox</span>
</button>
<label for="check" class="ui-widget">Test</label>
</li>
</ul>

Open in new window

js:
$(function() {
  $("input[type='checkbox']").each(function() {
    var w = $(this);
    var c = $(this).next('.ui-checkbox').children('span.ui-button-icon-primary');
    refresh(w, c);
  });

  function refresh(w, c) {
    if (w.is(":checked")) {
      if (c.hasClass('ui-icon-blank')) {
        c.removeClass('ui-icon-blank').addClass('ui-icon-check');
      }
    } else {
      if (c.hasClass('ui-icon-check')) {
        c.removeClass('ui-icon-check').addClass('ui-icon-blank');
      }
    }
  }
  $("body").on("click", "button.ui-checkbox", function(e) {
    e.preventDefault();
    var w = $(this).prev();
    var c = $(this).children('span.ui-button-icon-primary');
    w.prop("checked", !w.is(":checked"));
    refresh(w, c);

  });
});

Open in new window

0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
Alexandre SimõesManager / Technology SpecialistCommented:
Hi mate,
the problem with explicitly adding the HTML for the custom checkboxes is that it will be "messy" to add just a checkbox to the page.
Have a look here for instance: http://arthurgouveia.com/prettyCheckable/
This is a pretty nice plugin but has the same issue (try to hit F5 multiple times)

So in order to keep your HTML clean and solve this issue you have to hide the page until it's rendered AND transformed.
This means that you'll show the contents of the page only after this (and possibly other) plugins did their "transformation" job.
This sounds like delaying the page rendering but in fact, in your solution, the user won't be able to interact properly with the checkboxes until the javascript is executed anyway. And still you'll see the value being set...

I've faced this question before and I either dropped the idea and stayed with the native control or I did as I said above, hiding the full page (or the relevant section) until the transformation is completed.

Btw, to prevent the button to submit, just specify its type: <button type="button">
0
 
PanosAuthor Commented:
Hi again.
Well you are right. I have the selectboxes ui too on the page and there is the same problem.
I will follow your suggestion and show a loader until the scripts have finish their jobs.
Thank you very much
0
 
PanosAuthor Commented:
Last question
Where do i have to specify the <button type="button"> in the script?
0
 
PanosAuthor Commented:
w.button = $( "<button type='button'>" ).insertAfter( this.element );
??
0
 
Alexandre SimõesManager / Technology SpecialistCommented:
Sorry for the delay but I think you got it already.
That's where the template of the button is created.

Cheers!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.