checked radio button from an Enum value

[Mark Spritzler]

I tried doing a search first cause I was sure that this had to have been discussed upteen times.

I have a json value coming back with information. One property is set via an Enum in Java, so in the json it is just a String. Based on that String I want to set my radio buttons to have the one checked for that value. I am using Mustache/ICanHaz templating that is generating the radio buttons, but all I will have in the template is {{visibility}} basically the String value and there isn't any javascript in the template., the template is rendered from JavaScript and the html is stored in a var before I add it to a div via html(contentsFromTemplateRendering).

Thanks

With all your help I have been making some great progress on my app. I might one day call myself a web developer. But very quietly so no one else hears.

Mark

[Mark Spritzler]

Sorry for bumping this, but I still haven't found any solution on Google or in testing things.

Thanks

Mark

[Bear Bibeault]

I'm not sure anyone else here has even heard of the tools that you are using. So not surprising that it's been rather quiet.

[Eric Pascarello]

What does the code look like for generating the radio buttons?

Eric

[Mark Spritzler]

The HTML still looks the same, so the part about ICanHaz only has an affect that I get the String value via its name {{visibility}} which just gets replaced with the value from the JSON.

Here is the HTML

<script id="eventEntry" type="text/html">
    <form id="eventUpdateForm" data-id="{{nodeId}}" class="popupForm">
        <div class="line">
        	<p>Event Information</p>
        </div>
        <div class="line">
            <label for="title">Title</label>
            <input id="title" type="text" name="title" placeholder="Event Title" value="{{title}}">
        </div>
        <!--div class="line">
            <label for="date">Date</label>
            <label>Date:</label> {{eventDate}}
        </div-->
        <div class="line">
            <label for="eventDescription">Description</label>
            <input id="eventDescription" type="text" name="description" placeholder="Description" value="{{description}}">
        </div>
        <div class="line">
            <label for="visibility">Visibility</label>
            <input name="visibility" type="radio" value="PUBLIC" checked="checked" /> Public<br />
            <input name="visibility" type="radio" value="SEMI_PRIVATE" />Semi-Private<br />
            <input name="visibility" type="radio" value="PRIVATE" />Private (Invite Only)
        </div>
        <div class="line">
            <label for="eventHash">Twitter Hash for Event</label>
            <input id="eventHash" type="text" name="eventHash" placeholder="#Twitter Hash" value="{{eventHash}}">
        </div>
        <div class="line radius6">
            <a id="submitEvent" class="button large"  rel="nofollow">Submit Changes</a>
        </div>
        <div class="line"/>
    </form>
</script>

Here is a picture of the radio buttons in the FancyBox I use.

Bear - I was thinking that people didn't answer because it was such and easy solution that it was a dumb question that everyone thought I was just plain lazy. ;)

Thanks

Mark

[Mark Spritzler]

I also need to make that fancybox wider.

Mark

[Eric Pascarello]

Spent 5 minutes looking at the framework, looks like you need to do something like this.

var temp = {
   
    visibility : "PUBLIC",


    _selectedFun : function(x){
        return x === temp.visibility ? 'checked="checked"' : "";
    }, 
    visPublic : function(){
        return temp._selectedFun("PUBLIC");
    },
    visSemi : function(){
        return temp._selectedFun("SEMI_PRIVATE");
    },
    visPrivate : function(){
        return temp._selectedFun("PRIVATE");
    }

};

and the HTML

<label for="visibility">Visibility</label>  
<input name="visibility" type="radio" value="PUBLIC" {{visPublic}} /> Public
 
<input name="visibility" type="radio" value="SEMI_PRIVATE" {{visSemi}}/>Semi-Private
 
<input name="visibility" type="radio" value="PRIVATE" {{visPrivate}}/>Private (Invite Only) 

Sucks having to add that into your object, but hey, nothing is pretty in the JS world.

You might want to ask someone that actually knows this framework better than me with 5 minutes of knowledge.

Eric

[Mark Spritzler]

Actually, that is pretty looking. Yeah the high level variable "temp" isn't pretty, but the rest is slick. It is why you are the expert and me just the learner.

"Sucks having to add that into your object"

Do you mean the js code into the template/html? or that goes in one of my .js files, or included in my json. The JSON doesn't sound right, but I think you mean in my template. Unless you tell me otherwise.

Thanks again

Mark

[Eric Pascarello]

I rather see something like

<input {{visibility == "PUBLIC" ? "checked='checked'" : ""}} />

or

<input {{equals(visibility,"PUBLIC","checked='checked'","")}} />

Eric

[Mark Spritzler]

Eric Pascarello wrote:I rather see something like

<input {{visibility == "PUBLIC" ? "checked='checked'" : ""}} />

or

<input {{equals(visibility,"PUBLIC","checked='checked'","")}} />

Eric

Or more like
<input {{visibilityFunction()}}/>

where the visibilityFunction is part of the JSON object. iCanHaz and mustache allows functions in data objects and calling them from the template. Looks like I will go down that path of adding a function after I get the data from the server.

Thanks

Mark

[Eric Pascarello]

Well functions are not in JSON, adding the function turns it into an object literal. Run it through JSON.parse() and you will be out of luck.

Another reason why I do not like it my solution.

Eric

[Mark Spritzler]

Eric Pascarello wrote:Well functions are not in JSON, adding the function turns it into an object literal. Run it through JSON.parse() and you will be out of luck.

Another reason why I do not like it my solution.

Eric

Actually the template takes an object, so with that var holding that object I can add a function. When I retrieve the JSON from JQuery .post call it is assigned to a var, which I can then add the function

https://github.com/janl/mustache.js/
See functions section, if you are curious.

So it would be possible.

Thanks

Mark