jQuery Dialog Setting Radio Checked Issue

Question

I have a problem where by I want to remember the checked radio button in a jQuery UI dialog popup.

I encountered some strange behaviour so I mocked it up in JSFiddle. The fiddle basically randomly selects one of 3 radio choices when its created. However it soon beings to stop working.

I've tried with and without the line that does removeAttr('checked') as well.

You will need to click open dialog and close it several times to see it stop working. I have been testing this in the latest version of Chrome.

http://jsfiddle.net/t8kN7/5/

HTML

<div id="dialog" style="display:none;">

<input type="radio" class="left" name="rentFrequency" value="1" />
<span class="left">&#160;Monthly&#160;&#160;&#160;</span>

<input type="radio" class="left" name="rentFrequency" value="2" />
<span class="left">&#160;Quarterly&#160;&#160;&#160;</span>

<input type="radio" class="left" name="rentFrequency" value="3" />
<span class="left">&#160;Annualy&#160;&#160;&#160;</span>                                

</div>

<input type="button" name="dialogOpen" value="Open Dialog" />
<input type="text" name="randVal" value="" readonly="readonly" />

Javascript

$(document).ready(function() {

$('input[name="dialogOpen"]').click(function(){
    $("#dialog").dialog({
        title: 'Additional Tenancy Information',
        resizable: false,
        width: 530,
        show: { effect:'fade', duration:500 },
        hide: { effect:'fade', duration:400},           
        modal: true,
        close: function (event, ui) {
        },
        open: function (event, ui) {
            var randval=Math.floor(Math.random()*3)+1
            console.log(randval); 
            $('input[name="randVal"]').val(randval);
            $('input[name="rentFrequency"]').removeAttr('checked');
            $('input[name="rentFrequency"][value="'+randval+'"]').attr('checked', 'checked');
        }
    });
});
});

This is effectively the same code just without the dialog popup and it behaves as expected:

http://jsfiddle.net/W6rFh/1/

Just keeping clicking on RUN

Rather than .attr("checked", "checked"); use the prop function. .prop("checked", true); -- Same with removeAttr — tymeJV
– tymeJV, Commented Mar 11, 2013 at 15:23
jsfiddle.net/t8kN7/9 - using prop seems to solve the problem — Andy Davies
– Andy Davies, Commented Mar 11, 2013 at 15:35

tymeJV · Accepted Answer · 2013-03-11 15:37:08Z

4

Following up on my comment. Change attr instances to prop

$('input[name="randVal"]').val(randval);
$('input[name="rentFrequency"]').prop("checked", false);
$('input[name="rentFrequency"][value="'+randval+'"]').prop("checked", true);

answered Mar 11, 2013 at 15:37

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

1 Comment

Andy Davies Over a year ago

I've never need to use prop until today, attr has always served me well. But in this instance it simply has to be prop! :) So many hours wasted but thanks for the help!

Alnitak · Accepted Answer · 2013-03-11 15:22:03Z

1

You should only create the dialog once.

In this case I suggest you create the dialog immediately but with the autoOpen property set to false.

In the click handler you can then just call:

$('#dialog').dialog('open');

at which point it'll have the same state as when you closed it.

Obviously you should also remove the code to set the random state in the open: handler.

answered Mar 11, 2013 at 15:22

Alnitak

341k72 gold badges420 silver badges503 bronze badges

3 Comments

Andy Davies Over a year ago

I've just tried this approach here: jsfiddle.net/t8kN7/7 And I still get unexpected behaviour

Alnitak Over a year ago

get rid of the random stuff in the open handler - it gets called every time the dialog is re-opened.

Andy Davies Over a year ago

jsfiddle.net/t8kN7/10 - just using prop instead of attr has solved it. Thanks for you input anyway

Collectives™ on Stack Overflow

jQuery Dialog Setting Radio Checked Issue

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related