Solved

Jquery ui checkbox

Posted on 2015-02-24
8
205 Views
Last Modified: 2015-02-24
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?
0
Comment
Question by:Panos
  • 5
  • 3
8 Comments
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 500 total points
ID: 40628147
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
 
LVL 2

Author Comment

by:Panos
ID: 40628617
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
 
LVL 2

Author Comment

by:Panos
ID: 40628893
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
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40629054
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 2

Author Comment

by:Panos
ID: 40629082
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
 
LVL 2

Author Comment

by:Panos
ID: 40629112
Last question
Where do i have to specify the <button type="button"> in the script?
0
 
LVL 2

Author Comment

by:Panos
ID: 40629129
w.button = $( "<button type='button'>" ).insertAfter( this.element );
??
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40629191
Sorry for the delay but I think you got it already.
That's where the template of the button is created.

Cheers!
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Safari SVG Image Problem 1 39
Understanding Trigger in Jquery 10 49
Jquery autocomplete 10 68
JQuery serialize and unserialize 8 49
I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

914 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now