I have a select box that runs a small method on each option to determine what 'selected' is:
<label for="soft-due-date-controller">Soft Due Days:</label>
<select class="form-control" id="soft-due-date-controller">
<option value="0" {{determineDefaultSelect '0'}}>0</option>
<option value="1" {{determineDefaultSelect '1'}}>1</option>
<option value="2" {{determineDefaultSelect '2'}}>2</option>
<option value="3" {{determineDefaultSelect '3'}}>3</option>
<option value="4" {{determineDefaultSelect '4'}}>4</option>
<option value="5" {{determineDefaultSelect '5'}}>5</option>
<option value="6" {{determineDefaultSelect '6'}}>6</option>
<option value="7" {{determineDefaultSelect '7'}}>7</option>
<option value="8" {{determineDefaultSelect '8'}}>8</option>
<option value="9" {{determineDefaultSelect '9'}}>9</option>
<option value="10" {{determineDefaultSelect '10'}}>10</option>
</select>
Here is the method:
determineDefaultSelect: function(optionText){
let savedSoftSchedueDays = SoftDueDates.find().fetch()[0].currentSoftMargin;
if(optionText == savedSoftSchedueDays){
return "selected";
}
},
On the client side... it ends up loading appropriately and responsively updates in the dropdown when I update the db directly. My problem is that I am getting the following error on load multiple times on load:
Exception in template helper: TypeError: Cannot read property 'currentSoftMargin' of undefined
While it works, this error does not seem right and this is the only place in the code where currentSoftMargin is used. Almost like the template helper determineDefaultSelect is running faster than the db call can happen and a product async calls... maybe? Can I prevent this?
You're getting this error when the helper runs before the subscription to your data is ready(). You can either wait for the subscription is ready to render the template (rendering a spinner in the meantime instead) or defend against the runtime error:
determineDefaultSelect: function(optionText){
const doc = SoftDueDates.findOne(); // equivalent to .find().fetch()[0];
const savedSoftScheduleDays = doc && doc.currentSoftMargin; // will not error
return (optionText == savedSoftScheduleDays) ? "selected" : ""; // shorthand
},
Use {{#if Template.subscriptionsReady}}{{/if}} in your template to ensure all the data needed are ready.
Related
I have a select box that is showing up as a multi-select box when I want it to be a drop down. I cannot figure out how to change it.
<form:select path="roles" id="role" cssClass="form-control">
<form:options items="${roles}" itemLabel="description" itemValue="id"/></form:select>
The html that is produced as a result of this (see below) has the multiple box attribute added.
<select id="role" name="roles" class="form-control" multiple="multiple">
<option value="1">Administrator</option>
</select>
<input type="hidden" name="_roles" value="1"/>
It also produces that hidden input and I don't understand why.
Any help would be appreciated.
I'm updating website and gradually changing all bits over to jquerymobile to make it more phone friendly.
I had a page where a user can select either a specific month or a date range. I toggled between them using some javascript. However, since changing things the display:block etc doesn't seem to work properly. It displays them out of position. The input fields are now displayed above the selector when you toggle between them. Please see http://jsfiddle.net/pfLme/1/
Obviously I would like to get them into the correct position.
(The next task will be to try and get Datepicker working - if anyone fancies pointing me in the right direction for that)
Thank you.
(code is all on jsfiddle, but stackoverflow tells me i need to include it here too)
function showType(allornone) {
if (allornone == '1month')
{
document.getElementById('btwdateselector').style.display = 'none';
document.getElementById('monthselector').style.display = 'block';
document.getElementById('datestart').value = '';
document.getElementById('dateend').value = '';
}
if (allornone == '2dates')
{
document.getElementById('btwdateselector').style.display = 'block';
document.getElementById('monthselector').style.display = 'none';
}
} //end function
...I realise now of course that I have to get used to thinking about & taking advantage of the jquery side of jquery mobile too.
So far I came up with
$(document).on('click', '#certainmonth', function(a) {
$('#monthselector').hide();});
$(document).on('click', '#btwdates', function(a) {
$('#btwdateselector').show();});
I'm not sure yet how to include the if statement and toggle between the show and hide.
The error was only occurring in Firefox 27.0.1
Solution was to change <fieldset data-type="controlgroup"> to <div data-type="controlgroup"> around the radioboxes. Thanks to Omar for the help.
http://jsfiddle.net/pfLme/11/
<form action="page.php" name="mileageform" class="responsive_block" data-ajax="false">
<div data-role="controlgroup">
<legend>Should be at TOP</legend>
<input type="radio" name="searchtype" value="certainmonth" id="certainmonth" checked="checked" />
<label for="certainmonth">Mileage for certain month</label>
<input type="radio" name="searchtype" value="btwdates" id="btwdates" />
<label for="btwdates">Mileage between two dates</label>
</div>
<fieldset id="monthselector" data-role="controlgroup" data-type="horizontal">
<select name="month" data-native-menu="false">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="year" data-native-menu="false">
<option value="2000">2000</option>
<option value="2001">2001</option>
</select>
</fieldset>
<fieldset id="btwdateselector" class="ui-screen-hidden">
<div class="ui-field-contain">
<label for="datestart">Start Date:</label>
<input type="date" id="datestart" name="datestart" placeholder="dd/mm/yyyy" />
</div>
<div class="ui-field-contain">
<label for="dateend">End Date:</label>
<input type="date" id="dateend" name="dateend" placeholder="dd/mm/yyyy" />
</div>
</fieldset>
<input type="submit" onclick="return checkForm();" value="Display Mileage" />
</form>
$(document).on('change', '#certainmonth, #btwdates', function (a) {
$('#monthselector').toggleClass("ui-screen-hidden");
$('#btwdateselector').toggleClass("ui-screen-hidden");
});
In am using HTML select control (Not .net server control DropDownList), and i want to set an item selected of a particular value, from server side.How i can do this. I am using asp.net as a server side technology.
Following is my select box.And I dont want to add runnat="server" property in it
<select id="ddlPriceBetween" name="ddlPriceBetween">
<option value="0" selected="selected">All</option>
<option value="1">Less than 10,000 Rs. </option>
<option value="2">10,000 - 20,000 Rs. </option>
<option value="3">20,000 - 30,000 Rs. </option>
<option value="4">30,000 - 40,000 Rs. </option>
<option value="5">40,000 - 50,000 Rs. </option>
</select>
If you don't want to use runat='server' or ASP dropdown then you can't access it on server, One thing you should consider that beauty of html tags is that it is render at client side and it has no direct server communication. so if you want then you need indirect way to set the selected with jquery or javascript, ie you can set hidden field with selected value and on document ready you can set selected value.
For example : Set selected value
working demo
In ASP.NET the usual convention is to use server side controls which work better with the Postback model. So you could use the equivalent:
<asp:DropDownList ID="filterResultsBy" runat="server" CssClass="ddlFilter">
<asp:ListItem Value="" Text="Select..." />
<asp:ListItem Value="Date" Text="Date" />
<asp:ListItem Value="Subject" Text="Subject" />
<asp:ListItem Value="Status" Text="Status" />
</asp:DropDownList>
which would allow you to access the filterResultsBy variable in the code behind and retrieve the currently selected value. To make this work with client scripting libraries such as jQuery add a class and use a class selector instead of id selector because of the name mangling that occurs in ASP.NET server side controls:
$('.ddlFilter').change(function() {
var sel = $(this).val();
if(sel === 'DATE') {
hideAll(); // a function to hide all the divs first
$('#divDateRangeSearch').show();
} else if (sel === 'SUBJECT') {
///so on...
}
});
It is not possible to access a HTML control on the .cs page. so in your case put runat server in your select control as follow
<select id="ddlPriceBetween" name="ddlPriceBetween" runat="server">
<option value="0" selected="selected">All</option>
<option value="1">Less than 10,000 Rs. </option>
<option value="2">10,000 - 20,000 Rs. </option>
<option value="3">20,000 - 30,000 Rs. </option>
<option value="4">30,000 - 40,000 Rs. </option>
<option value="5">40,000 - 50,000 Rs. </option>
</select>
your .cs code will be
ddlPriceBetween.SelectedIndex=yourindex.
I've can't seem to find a solution to this so I'm posting here.
Basically I'm trying to build a basic filter for property listings. All the property listings are just posts with custom fields. For example, one of the properties has these values in the custom fields:
custom field value
------------ -----
area 150
rooms 4
bathrooms 2
garage 1
alfresco 1
study 1
theatre 1
My search form HTML looks like this:
<form method="get" id="advanced_search" action="<?php echo get_settings('home'); ?>/" >
<fieldset>
<label>Rooms
<select name="rooms">
<option value="">Any</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</label>
<label>Bathrooms
<select name="bathrooms">
<option value="">Any</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</label>
<label>Garage
<select name="garage">
<option value="">Any</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</label>
<label>Area (square metres)
<select name="garage">
<option value="">Any</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="250">250</option>
</select>
</label>
<label><input type="checkbox" name="theatre" value="1" /><span>Home Theatre</span></label>
<label><input type="checkbox" name="study" value="1" /><span>Study</span></label>
<label><input type="checkbox" name="alfresco" value="1" /><span>Alfresco</span></label>
<input type="submit" id="submit" value="Search" />
</fieldset>
</form>
What I am wanting to do is let the user use this filter to only show posts on a search results page that match it.
There's a slight catch too: all these custom field represents a minimum value. So if they selected "200" from "Area", "1" from "Alfresco", then it needs to show all properties that are 200 and higher and have at least 1 Alfresco area.
And - I'd like to limit the search filter to just the category called "properties".
Not asking much? :-P
Any help would be appreciated.
I ran into a strange problem with checkbox groups. I am trying to get the values from a group of checkboxes, but I have to hit the submit button twice for it to get the values... I have no idea why. I also use a dropdown box on the same form and I only need to hit the button once to get its value.
my asp code to write it to page
Dim selectFormValue
selectFormValue = Replace(Request.Form("selectTest"), """", "")
Response.write Request.Form("checkGroup")
here is the html being generated
<form method="post" name="formTest">
<select name="selectTest">
<option value='123"' selected="">Option 1</option>
<option value='124"' selected="">Option 2</option>
<option value='125"' selected="">Option 3</option>
</select>
<input type="checkbox" name="checkGroup" value="1" CHECKED />
<input type="checkbox" name="checkGroup" value="2" CHECKED />
<input type="checkbox" name="checkGroup" value="3" CHECKED />
<input type="checkbox" name="checkGroup" value="4" CHECKED />
<input type="submit" name="submit" value="Update" />
</form>
Thanks!
One thing i note is, that you don't specify an action in your form.