Solved

Jquery ui checkbox

Posted on 2015-02-24
8
194 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 2

Author Comment

by:Panos
Comment Utility
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
Comment Utility
Last question
Where do i have to specify the <button type="button"> in the script?
0
 
LVL 2

Author Comment

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

Expert Comment

by:Alexandre Simões
Comment Utility
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
The viewer will learn how to dynamically set the form action using jQuery.
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)

771 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

10 Experts available now in Live!

Get 1:1 Help Now