I am having trouble getting my FullCalendar to save any information if I hit save. Any help would be greatly appreciated.
www.synergyrecycling-calendar.com/calendar-admin.html
Code for the buttons
buttons: {
save : function() {
calEvent.id = id; id++;
calEvent.start = new Date(startField.val());
calEvent.end = new Date(endField.val());
calEvent.title = titleField.val();
calEvent.prototype = eventField.val();
calEvent.body = bodyField.val();
$calendar.fullCalendar("updateEvent", calEvent);
$dialogContent.dialog("close");
}
}
I found the problem, but I am not sure how to fix it.
<select name="start">
<option value="">Select Start Time</option>
<option value="08:00:00 GMT-0400 (Eastern Daylight Time)">08:00 am</option>
<option value="Sun May 22 2011 08:15:00 GMT-0400 (Eastern Daylight Time)">08:15 am</option>
<option value="Sun May 22 2011 08:30:00 GMT-0400 (Eastern Daylight Time)">08:30 am</option>
Related
I have a styles issue that only happens on iOS devices. I've confirmed 🐞 in Chrome +
Safari in iPhone 12 Pro Max.
I can see my local set up code live on my iPhone when I go to the IP Address
Ex.
http://192.168.116.161/mybabies/public/baby/797b808a-e8c6-4a83-acf4-667hhjg?code=8888
In the Chrome simulator (as iPhone), it displays perfectly fine.
How do I make my select menus look uniform with my other inputs?
Update
public function settingsUpdate($id){
$baby = Baby::where('uuid',$id)->first();
if($baby){
$baby->name = Request::get('name','');
$baby->phone = Request::get('phone','');
$baby->email = Request::get('email','');
$baby->babyName = Request::get('babyName','');
$baby->babyDob = Request::get('babyDob','').' '.Request::get('babyHob','').':00';
$baby->adminCode = Request::get('adminCode','');
$baby->readOnlyCode = Request::get('readOnlyCode','');
$baby->feedingInterval = (float) Request::get('feedingInterval',''); <<<---------- ✨
$baby->feedingAmount = (float) Request::get('feedingAmount',''); <<<---------- ✨
$baby->displayMode = Request::get('displayMode','');
$baby->save();
return Redirect::to('/baby/'.$baby->uuid.'?code='.$baby->adminCode);
} else {
return Redirect::to('/');
}
}
HTML/View
<div class="form-group">
<div class="col-xs-6">
<label for="feedingInterval"><h5>Feeding Interval <small class="helpText">(hours)</small></h5></label>
<select class="form-control" id="feedingInterval" name="feedingInterval">
<option value="2">2 hrs </option>
<option value="2.5">2.5 hrs </option>
<option value="3">3 hrs </option>
<option value="3.5">3.5 hrs </option>
<option value="4">4 hrs </option>
<option value="4.5">4.5 hrs </option>
<option value="5">5 hrs </option>
<option value="5.5">5.5 hrs </option>
<option value="6">6 hrs </option>
</select>
</div>
<div class="col-xs-6">
<label for="feedingAmount"><h5>Feeding Amount <small class="helpText">(ounces)</small></h5></label>
<select class="form-control" id="feedingAmount" name="feedingAmount">
<option value="2">2 oz </option>
<option value="2.5">2.5 oz </option>
<option value="3">3 oz </option>
<option value="3.5">3.5 oz </option>
<option value="4">4 oz </option>
<option value="4.5">4.5 oz </option>
<option value="5">5 oz </option>
<option value="5.5">5.5 oz </option>
<option value="6">6 oz </option>
</select>
</div>
</div>
GET & SET
$('#feedingInterval').val(`{{$baby->feedingInterval}}`.toString());
$('#feedingAmount').val(`{{$baby->feedingAmount}}`.toString());
select elements in Safari have their own styling, if you have a custom style in mind, the best thing is using -webkit-appearance: none; and define yours.
Firefox 59.0 Project MVC.NET. Use https://select2.github.io js lib for select elements
On the View there are many elements such as:
<div class="control control_medium control_select">
<select name="#nameof(Model.Query.BudgetCycleIds)"
#Html.AjaxViewSubmitOnChange()
#Html.AsugfAutoComplete()
multiple="multiple">
<option value="0">Все</option>
#foreach (var budgetCycle in Model.BudgetCycles)
{
<option value="#budgetCycle.Id" #(Model.Query.BudgetCycleIds?.Contains(budgetCycle.Id) ?? false ? "selected" : "")>#budgetCycle.Name</option>
}
</select>
</div>
Same in the html:
<select name="BudgetCycleIds" ajaxview-submit-onchange="" asugf-select2="" multiple="" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
<option value="0">Все</option>
<option value="13" selected="">2010 - 2012</option>
<option value="14">2011 - 2013</option>
<option value="9">2012 - 2014</option>
<option value="5">2013 - 2015</option>
<option value="6">2014 - 2016</option>
<option value="7">2015 - 2017</option>
<option value="1">2016 - 2018</option>
<option value="2">2017 - 2019</option>
<option value="4">2018 - 2020</option>
</select>
Normal UI (before loading):
Not normal UI (in a second after loading):
Normal UI (in two second after loading):
The other browsers are the same, but very fast, and the user does not see the interface jumps.
How to make sure that the wrong interface does not appear
Not a good solution (because the layout is "jumps")
add hidden class
<option class="hidden" value="0">Все</option>
#foreach (var budgetCycle in Model.BudgetCycles)
{
<option class="hidden" value="#budgetCycle.Id" #(Model.Query.BudgetCycleIds?.Contains(budgetCycle.Id) ?? false ? "selected" : "")>#budgetCycle.Name</option>
}
I am trying to create a dropdownlist of months, that renders with the current month selected:
#Html.DropDownList("Month",
new SelectList(Enumerable.Range(1, 12).ToDictionary<int, string>(
i => System.Threading.Thread.CurrentThread.CurrentUICulture.DateTimeFormat.GetMonthName(i)
), "Value", "Key", DateTime.Now.Month));
This builds the list just fine, but it always renders with January selected.
What am I doing wrong here?
HTML output:
<select name="Info.Month" id="dLMonth-451" data-val-required="The Month field is required." data-val-number="The field Month must be a number." data-val="true">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
Code works for me on MVC4/.Net 4. What version of .Net and MVC are you using?
could add some of the HTML output?
Using this bit of code in my wordpress theme:
<select name="archive-dropdown" onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="">Select month</option>
<?php wp_get_archives('type=monthly&format=option'); ?>
</select>
Taken from here: http://codex.wordpress.org/Function_Reference/wp_get_archives
This is the outputted code
<select name="archive-dropdown" onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="">Select month</option>
<option value='http://www.domain.com/?m=201307'> July 2013 </option>
<option value='http://www.domain.com/?m=201306'> June 2013 </option>
<option value='http://www.domain.com/?m=201305'> May 2013 </option>
</select>
For example, if I select July, the July archive page comes up and I checked that the address of the page is correct: http://www.domain.com/?m=201307
But the July option is not selected in the drop down. I understand that the bit of javascript in the onChange field is comparing the document href to the options and then selecting the matching option value, but it doesn't appear to be working.
Any help?
Figured it out creating a custom filter in my WordPress theme functions. Placed this in my theme's functions.php:
function get_archives_link_mod ( $link_html ) {
preg_match ("/value='(.+?)'/", $link_html, $url);
$requested = "http://{$_SERVER['SERVER_NAME']}{$_SERVER['REQUEST_URI']}";
if ($requested == $url[1]) {
$link_html = str_replace("<option", "<option selected='selected'", $link_html);
}
return $link_html;
}
Then placed this in my theme's archive.php:
<form action="" method="get">
<select name="archive-dropdown" onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="">PICK MONTH</option>
<?php add_filter("get_archives_link", "get_archives_link_mod"); ?>
<?php wp_get_archives('type=monthly&format=option'); ?>
</select>
</form>
I basically took the code suggested here for highlighting the current link in the default list version of wp_get_archives() and modified it for the option format of the function. It took a bit of digging as a non-coder and posting it here is probably as consequential as a tree falling with no one around to hear it, but I'll just give myself a pat on the back and pretend it was someone else's hand in this sad and desolate world.
I have a web page that uses three controls to allow a user to specify a date: 2 drop down controls for month and day (where Jan = 1, perhaps a bad choice :-)) and the days of the month (1-31). A text box is used for the year. In the Year text box, I use an AJAX Toolkit Watermark extender found [here][1] to write the literal word "Year" in light grey in the text box. This text disappears when the user sets focus to the text box. If the user enters something in the text box, the text appears in the normal textbox color, else the light grey text "Year" re-appears when the textbox loses focus.
3 control make up a "Date Issued" text box and similarly, 3 more control make up a "Expiration Date" set of controls.
When a user changes the Issue date (for example, the focus of the last control, Issued Year, is lost, I'd like to update the Expiration Date controls to a date value that is 10 years from the Issue date.
The issue is this: If I use Javascript to set the value of the txtExpireYear control, it updates the light grey text watermark text that normally says "Year" to the year number value instead of displaying the value in normal text color and treating the value as if it were typed by the user.
The 2nd issue that I have is getting the year value of the IssueDate. Why does the dtmDateOfIssue.getYear() function return a two-digit year if the year is <2000 and itherwise return a 4-digit year if the year is > 2000? I can probably work around this but I am looking for an explanation.
Thanks in advance.
function txtIssueYear_OnBlur() {
//Get sub controls of passport Expiration date
var ddlExpireMonth = document.getElementById("dtmPassportExpirationDate_ddlMonth");
var ddlExpireDate = document.getElementById("dtmPassportExpirationDate_ddlDate");
var txtExpireYear = document.getElementById("dtmPassportExpirationDate_txtYear");
//Get the individual values of each sub control of the Expiration date
var ExpireMonth = parseInt(ddlExpireMonth.value);
var ExpireDayOfMonth = parseInt(ddlExpireDate.value);
var ExpireYear = parseInt(txtExpireYear.value);
//If the Expiration Date still contains all the default values, set it to a default
//value based on the value of the Date of Issue
if ( ExpireMonth == -1 && ExpireDayOfMonth == -1 && (isNaN(ExpireYear)) ) {
//Get sub controls of passport Issue date
var ddlIssueMonth = document.getElementById("dtmPassportDateOfIssue_ddlMonth");
var ddlIssueDate = document.getElementById("dtmPassportDateOfIssue_ddlDate");
var txtIssueYear = document.getElementById("dtmPassportDateOfIssue_txtYear");
//Get the individual values of each sub control of the Issue date
var IssueMonth = parseInt(ddlIssueMonth.value);
var IssueDayOfMonth = parseInt(ddlIssueDate.value);
var IssueYear = parseInt(txtIssueYear.value);
var dtmDateOfIssue = new Date(IssueYear, IssueMonth - 1, IssueDayOfMonth); //construct Issue date
//add 10 years - 1 day to get the default Expiration date
dtmDateOfIssue.setYear(dtmDateOfIssue.getYear() + 10);
dtmDateOfIssue.setDate(dtmDateOfIssue.getDate() - 1);
//Set the Expiration Date
txtExpireYear.value = dtmDateOfIssue.getYear();
ddlExpireMonth.value = dtmDateOfIssue.getMonth() + 1;
ddlExpireDate.value = dtmDateOfIssue.getDate();
}
The 3 controls of each date group are included in a usercontrol (ASCX file):
<asp:DropDownList ID="ddlMonth" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="ddlDate" runat="server">
</asp:DropDownList>
<asp:TextBox ID="txtYear" runat="server" Width="85px" ></asp:TextBox>
<asp:CustomValidator ID="CustomValidator1" runat="server"
EnableClientScript="true" Required="True"
ErrorMessage="CustomValidator" ClientValidationFunction="validateDate"
ValidateEmptyText="True"></asp:CustomValidator>
This is sent to the browser as the following. Note that the event handler that I am writing Javascript for uses the client side IDs because the client sided script is page-specific. Not sure if that will be clear or will make sense to you. I would prefer an example using the final client side names, but if you again want to offer the <%- servercontrol.ClientId %> approach too, I would be willing to give it a try.
THANK YOU!
<select name="dtmPassportExpirationDate$ddlMonth" id="dtmPassportExpirationDate_ddlMonth" class="DefaultDropDown">
<option value="-1">--Month--</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option selected="selected" value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
<select name="dtmPassportExpirationDate$ddlDate" id="dtmPassportExpirationDate_ddlDate" class="DefaultDropDown">
<option value="-1">--Day--</option>
<option value="1">1</option>
<option value="2">2</option>
<option selected="selected" value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<input name="dtmPassportExpirationDate$txtYear" type="text" value="2009" maxlength="4" id="dtmPassportExpirationDate_txtYear" class="DefaultTextBox" style="width:68px;" />
<input name="dtmPassportExpirationDate$btnClear" type="button" id="dtmPassportExpirationDate_btnClear" style="font-size: x-small; height: 20px;" value="Clear" tabindex="-1" onClick="ClearDate_dtmPassportExpirationDate();" /></td>
<input type="hidden" name="dtmPassportExpirationDate$TextBoxWatermarkExtender1_ClientState" id="dtmPassportExpirationDate_TextBoxWatermarkExtender1_ClientState" />
About your second issue, the getYear function is deprecated, you should use the getFullYear function instead.
Edit: To correctly set the value of a TextBoxWatermark extended control, you should use the MS Ajax $find function to get the object and call the set_Text function:
$find("ctl00_SampleContent_TextBoxWatermarkExtender2").set_Text('value');
or better using the server-side ClientID property of the control:
$find("<%=ExtenderControl.ClientID%>").set_Text('value');
I found the set_Text function by object inspection with Firebug, because it's a shame that there is no documentation of the Client-Side API of the Ajax Control Toolkit...