Checkboxes with JQuery-UI alert

Question

When the link is clicked it should pop up the dialog box when the download later button is clicked it toggles the checked variable of the button. Then closes the dialog button

I am new to Javascript and Jquery and have no idea what I am doing

    $(function download_box(checkbox) {
        // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
        $( "#opener" ).click(function() {
            $( "#dialog-download" ).dialog( "open" );
            return false;
        });

        $( "#dialog-download" ).dialog({
            autoOpen: false,
            resizable: false,
            height:140,
            width:325,
            modal: true,
            buttons: {
                "Download Now": function() {
                    var mycheckbox1 = document.getElementById(checkbox);
                    if(mycheckbox1.checked){
                        box.checked=false;
                    }
                    else{
                        box.checked=true;
                    }
                    $( this ).dialog( "close" );
                },              
                "Download Later": function() {
                    $('#c2').prop("checked", true);
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    });

<form method="post" action="<?php echo $PHP_SELF;?>">
   <a id="opener" href="#" OnClick="download_box('#c1')">db1.csv:</a>
   <input id="c1" type="checkbox" name="download[]" value="db1.csv" />
   <!-- ... -->
   <input type="submit" value="submit" name="submit">
</form>

I liked the part: "I have no idea what I am doing." :D That's a start... — Leniel Maccaferri
– Leniel Maccaferri, Commented Apr 27, 2012 at 16:24
lets start small, first an id should be unique so having id="opener" 7 or 8 times is a big problem. Switch id="opener" to class="opener" — Kevin Bowersox
– Kevin Bowersox, Commented Apr 27, 2012 at 16:24
please see my answer and if appropriate accept, I believe I have captured the functionality you desire. — Kevin Bowersox
– Kevin Bowersox, Commented Apr 27, 2012 at 17:15
@LenielMacaferi the first part of growth is knowing that you do not know — Kevin Bowersox
– Kevin Bowersox, Commented Apr 27, 2012 at 17:16

Kevin Bowersox · Accepted Answer · 2012-04-27 17:20:22Z

1

I gave all of your anchor tags a class of opener, then I bound a click function to that anchor that sets the options on the dialog. The options set are mainly the buttons you would like to have on the form and their corresponding functions. I used this method because the functions needed to be slightly dynamic therefore I couldn't declare them when initially creating the dialog. The button toggles the checkbox, the download later button clicks the checkbox and closes the dialog and finally the close button simply closes the dialog.

Some things to note, there should only be 1 element with a given id per page, so having 9 anchor tags with an id of opener is asking for trouble. Also using jquery it is very easy to bind functions to events on html elements, this is a preferred method over attaching the functions inline in the html ie (onclick=download_box).

HTML

<div id="dialog-download" title="Download Now?">
    <p><span style="float:left; margin:0 7px 20px 0;"></span>Download the file now or later?</p>
</div>    
<form method="post" action="<?php echo $PHP_SELF;?>">
<a class="opener" href="#">db1.csv:</a>
<input id="c1" type="checkbox" name="download[]" value="db1.csv" /><br />
<a class="opener" href="#" >db2.csv:</a>
<input id="c2" type="checkbox" name="download[]" value="db2.csv" /><br />
<a class="opener" href="#" >db3.csv:</a>
<input id="c3" type="checkbox" name="download[]" value="db3.csv" /><br />
<a class="opener" href="#" >db4.csv:</a>
<input id="c4" type="checkbox" name="download[]" value="db4.csv" /><br />
<a class="opener" href="#" >db5.csv:</a>
<input id="c5" type="checkbox" name="download[]" value="db5.csv" /><br />
<a class="opener" href="#" >db6.csv:</a>
<input id="c6" type="checkbox" name="download[]" value="db6.csv" /><br />
<a id="opener" href="#">db7.csv:</a>
<input id="c7" type="checkbox" name="download[]" value="db7.csv" /><br />
<a class="opener" href="#">db8.csv:</a>
<input id="c8" type="checkbox" name="download[]" value="db8.csv" /><br />
<a class="opener" href="#" >db9.csv:</a>
<input id="c9" type="checkbox" name="download[]" value="db9.csv" /><br />
<input type="submit" value="submit" name="submit">
</form>

Javascript

$(document).ready(function(){
    $("#dialog-download ").dialog({
        autoOpen: false,
        resizable: false,
        height: 140,
        width: 325,
        modal: true
    });
    $(".opener").click(function(){
        var that = this;
        var checkbox = $(that).next(":checkbox");

        $("#dialog-download").dialog("option", {
            buttons: {
                "Download Now": function(){
                    $(checkbox).prop("checked", !$(checkbox).attr("checked"));
                    $("#dialog-download").dialog("close");
                },
                "Download Later ": function(){
                    $(checkbox).prop("checked", true);
                    $("#dialog-download").dialog("close");
                },
                "Cancel": function(){
                    $("#dialog-download").dialog("close");
                }
            }
        });
        $("#dialog-download").dialog("open");
    });
});

Working Example: http://jsfiddle.net/ccrAF/

edited Apr 27, 2012 at 17:20

answered Apr 27, 2012 at 17:09

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kevin Bowersox Over a year ago

Thanks for accepting glad I could help. Let me know if you need any of the code explained.

GeneralZero Over a year ago

If I would also like to make the Download Now button submit the form what would be the best way to do that using jquery

GeneralZero Over a year ago

Dosent seem to submit the form "Download Now": function(){ $(checkbox).prop("checked", !$(checkbox).attr("checked")); $("#dialog-download").dialog("close"); $("#forms").submit(); },

Kevin Bowersox Over a year ago

@GeneralZero I can help you with this but not until the end of the week, things are nuts at work. Try posting your question on stack

Collectives™ on Stack Overflow

Checkboxes with JQuery-UI alert

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related