Skip to content

Radio buttons with checked="checked" are not rendered checked #23

Closed
bzuidgeest opened this Issue Dec 29, 2011 · 6 comments

2 participants

@bzuidgeest

I'm trying to build a page that has a template that contains multiple radio button groups. The problem is that when the template renders the radio buttons that have the checked property in the source HTML are not visually checked in the browser. Unfortunately I cannot include a screenshot here to show it, but my test page is below. Groups with names ending in 1 to 3 are rendered by the template engine. 4 to 6 are plain HTML. 4 to 6 show fine 1-3 do not. This behavior is the same across Firefox, chrome and IE9. During my test I noticed that some browsers (FF) were showing the same problem in rendering checked on the no-template HTML groups if I omitted the form tags. Maybe I'm missing something obvious, If so don't hesitate to point it out to me.

btw. the missing docs on jsrender and view plugin forces me to look thru the source code of the plugins to identify the features and figure out their use. I have learned a few thing things from that! It's a great plugin.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>test</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>

    <script src="/Scripts/jsrender.js" type="text/javascript"></script> 
    <script src="/Scripts/jquery.observable.js" type="text/javascript"></script>    
    <script src="/Scripts/jquery.views.js" type="text/javascript"></script>

    <script src="Scripts/date-en-US.js" type="text/javascript"></script>

</head>
<body>
    <script id="TemplateTest" type="text/x-jquery-tmpl">    

        <div data-getfrom="css-background-color:bgColor($view[index])">

            <input type="radio" name="Price{{=Id}}" data-getfrom="checked:[PriceType] == 2" /><span>Not Specified</span>
            <br />

            <input type="radio" name="Price{{=Id}}" data-getfrom="checked:[PriceType] == 0" />10
            <br />

            <input type="radio" name="Price{{=Id}}" data-getfrom="checked:[PriceType] == 1" />20
            <br/>       
            <br/>       


            <input type="radio" name="SearchArea{{=Id}}" data-getfrom="checked:[SearchAreaType] == 2" /><span>Not Specified</span>
            <br />

            <input type="radio" name="SearchArea{{=Id}}" data-getfrom="checked:[SearchAreaType] == 0" />30
            <br />

            <input type="radio" name="SearchArea{{=Id}}" data-getfrom="checked:[SearchAreaType] == 1" />40
            <br/><br/>

            <input type="radio" name="AdvertisementKind{{=Id}}" data-getfrom="checked:[AdvertisementKind] == 0" />All<br />
            <input type="radio" name="AdvertisementKind{{=Id}}" data-getfrom="checked:[AdvertisementKind] == 1" />Offered<br />
            <input type="radio" name="AdvertisementKind{{=Id}}" data-getfrom="checked:[AdvertisementKind] == 2" />Wanted<br />
            <br/>
        </div>

    </script>

    <script type="text/javascript">

        $().ready(function () {

            $("#TemplateTest").template("TemplateTest");

            var ads = [
                { Id: 1, AdvertisementKind: 0, SearchAreaType: 2, PriceType: 1},
                { Id: 2, AdvertisementKind: 1, SearchAreaType: 0, PriceType: 2 },
                { Id: 3, AdvertisementKind: 2, SearchAreaType: 1, PriceType: 0 }
            ];


            $("#testContainer").link(ads, "TemplateTest");
        });


        function bgColor(index) {
            return (index % 2 ? "yellow" : "red");
        }
    </script>
    <form action="About.aspx">
    <div id="testContainer"></div>

    <div id="Div4">

        <div style="background-color: blue;">

            <input type="radio"  name="Price4"/><span>Not Specified</span>
            <br/>

            <input type="radio" name="Price4"/>40
            <br/>

            <input type="radio" name="Price4" checked="checked"/>50
            <br/>       
            <br/>       


            <input type="radio" name="SearchArea4" checked="checked"/><span>Not Specified</span>
            <br/>

            <input type="radio" name="SearchArea4"/>60
            <br/>

            <input type="radio" name="SearchArea4"/>40
            <br/><br/>

            <input type="radio" name="AdvertisementKind4" checked="checked"/>All<br/>
            <input type="radio" name="AdvertisementKind4"/>Offered<br/>
            <input type="radio" name="AdvertisementKind4"/>Wanted<br/>
            <br/>
        </div>



        <div  style="background-color: yellow;">

            <input type="radio" name="Price5" checked="checked"/><span>Not Specified</span>
            <br/>

            <input type="radio" name="Price5"/>40
            <br/>

            <input type="radio" name="Price5"/>50
            <br/>       
            <br/>       


            <input type="radio" name="SearchArea5"/><span>Not Specified</span>
            <br/>

            <input type="radio" name="SearchArea5" checked="checked"/>60
            <br/>

            <input type="radio" name="SearchArea5"/>40
            <br/><br/>

            <input type="radio" name="AdvertisementKind5"/>All<br/>
            <input type="radio" name="AdvertisementKind5" checked="checked"/>Offered<br/>
            <input type="radio" name="AdvertisementKind5"/>Wanted<br/>
            <br/>
        </div>


        <div  style="background-color: blue;">

            <input type="radio"  name="Price6"/><span>Not Specified</span>
            <br/>

            <input type="radio"  name="Price6" checked="checked"/>40
            <br/>

            <input type="radio"  name="Price6"/>50
            <br/>       
            <br/>       


            <input type="radio"  name="SearchArea6"/><span>Not Specified</span>
            <br/>

            <input type="radio"  name="SearchArea6"/>60
            <br/>

            <input type="radio" name="SearchArea6" checked="checked"/>40
            <br/><br/>

            <input type="radio" name="AdvertisementKind6"/>All<br/>
            <input type="radio" name="AdvertisementKind6"/>Offered<br/>
            <input type="radio" name="AdvertisementKind6" checked="checked"/>Wanted<br/>
            <br/>
        </div>

  </div>
  </form>
</body>
</html>
@BorisMoore
Owner

Using data binding to render the checked attribute on radio button inputs (data-getfrom) means that the html is first rendered by JsRender and inserted into the DOM, and then data-bound targets are updated with initial values. So when the input tag is first inserted into the DOM, it does not have a checked="checked" setting. Similar issues will arise with selected options under a select tag. I will be providing specific support for these scenarios to enable data binding to selects, radio buttons etc. but it is not yet available..

On the lack of documentation, yes, it forces you to look at the code, or to wait until beta :). In a sense I don't want it to be too well documented right now, since that may encourage people to adopt it before it is stable, and not realize APIs may change (which they definitely will - but getting closer now to the point when I will provide the stable Beta APIs...)

@bzuidgeest

I'm confused by your answer. I understand that first jsrender inserts the template into the page and that the checked tag will not be there yet at that time. Next the binding is done and the data-from statements are processed. If I looked correctly at the views.js file I see that the the attribute is being set in function propertyChangeHandler and is set by $target.attr(attr, sourceValue); This seems a perfectly valid jquery statement to me and doing this manually works fine. Also when checking the HTML with firebug (firefox addin) all the checked attributes are there. I must be missing something here. The strange thing is that when I replace type="radio" with type="checkbox" there is no problem at all and all the tick boxes are properly set. I never thought of using data-from to set the selected item on a select, I made a custom tag for that.

About your fear of people adopting this before it is stable: I started adopting it because the old jquery template plugin is already deprecated and I did not want to start using something that won't go any further in new product. Also for a pre-beta it is proving to be quite usable. And code + demo makes quite the tutorial. If I need to do some refactoring half way because of a breaking change, then so be it. This new code a least has a future.

@BorisMoore
Owner

Yes, I agree if calling attr manually shows up correctly in the rendering, it needs some investigation as to why in the context of JsViews, it is not. I don't have 'exact knowledge' of what is going on. (Leaving this open of course, to track this issue.)
My take on jquery template being deprecated is that there is no reason to 'rush' to finding an alternative, and it is fine to wait for beta of JsRender. But of course if you prefer to invest now in the forward-looking path, that may make absolute sense too. I am happy if JsRender/JsViews is already working reasonably well with fairly good scenario coverage. Simply I want early users to know that there may be some breaking changes coming!... Thanks for the feedback...

@bzuidgeest

Thanks for the assistance so far, If I figure this out, I'll post it here.

@BorisMoore
Owner

Binding to textarea, select, radio buttons and check boxes now fully supported.
Demo here: http://borismoore.github.com/jsviews/demos/step-by-step/07_form-elements.html

@BorisMoore
Owner

This issue should now be resolved

@BorisMoore BorisMoore closed this May 10, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.