I have a Registration model and form which uses a datepicker. I want the user to be only able to select dates which correspond to events (another model).
My problem is I can't find the right way to pass the event array to javascript.
this is in the controller:
#available_dates = Event.pluck(:start_time).as_json
this is in the view:
<script>
var availableDates = [<%= #available_dates.to_s.html_safe %>] ;
</script>
and this is the js:
function available(date) {
ymd = date.getFullYear() + "-" + ('0' + (date.getMonth()+1)).slice(-2) + "-" + ('0' + date.getDate()).slice(-2);
console.log(ymd+' : '+($.inArray(ymd, availableDates)));
if ($.inArray(ymd, availableDates) != -1) {
return [true, "","Available"];
} else {
return [false,"","unAvailable"];
}
}
$("#registration_date").datepicker({ beforeShowDay: available, dateFormat: "yy-mm-dd"});
I think I'm doing something wrong in the view since the js array seems to be empty looking at the console...
any help would be greatly appreciated
In the question comments you have mentioned #available_dates.to_s returns "[\"2013-01-05\", \"2013-02-02\", \"2013-03-02\"]". This itself will render the array on the page so no need to "box it up" again.
Try changing the following line:
var availableDates = [<%= #available_dates.to_s.html_safe %>] ;
to this:
var availableDates = <%= #available_dates.to_s.html_safe %>;
Hope it helps.
If it doesn't you are either clearing the value of #available_dates somewhere further in your code or #available_dates is not available in the context of your view. Have your tried stepping through the code using debugger;?
Related
Thanks for taking the time out of your day to assist me.
What i am looking to get help with is my datepicker. I am building a small webform that acts as a template for an email. So the idea is to fill in the form, hit create and it populates a email with the form information.
However, my datepicker requires me to select the date twice until it prints the correct date to the email. The first selection will result in nothing, and 3rd attempt would result in 2nd selection being output and so on.
I am using Jquery 1.12.4 and my code is as follows:
JS:
$(function(){
$( "#IncidentDateInput" ).datepicker({
dateFormat: 'dd/mm/yy'
});
});
function updateMailString() {
mailString = '?subject=' + encodeURIComponent($('#subject').val())
+ '&body=Agent Name: ' + encodeURIComponent($('#AgentNameInput').val())
+"%0D%0AMDN: " +encodeURIComponent($('#MDNInput').val())
+"%0D%0ADevice: " +encodeURIComponent($('#DeviceInput').val())
+"%0D%0AIssue: " +encodeURIComponent($('#IssueInput').val())
+"%0D%0ADate: " +encodeURIComponent($('#IncidentDateInput').val());
var receiver = encodeURIComponent($('#ReceiverInput').val());
$('#mail-link').attr('href', 'mailto:' + receiver + mailString);
}
$( "#IncidentDateInput" ).focusout(function() { updateMailString(); });
Html:
<input type="text" id="IncidentDateInput" />
Any insight would be great, thank you.
Try with change instead of focusout. When using focusout input remains empty and updateMailString function is called. On using change function, after input(datepicker) is changed then updateMailString function is called
Fiddle link
$(document).ready(function() {
$('#IncidentDateInput').datepicker({
dateFormat: 'dd/mm/yy',
});
$("#IncidentDateInput").change(function() {
updateMailString();
});
})
function updateMailString() {
mailString = '?subject=' + encodeURIComponent($('#subject').val()) + "%0D%0ADate: " + encodeURIComponent($('#IncidentDateInput').val());
var receiver = encodeURIComponent($('#ReceiverInput').val());
$('#mail-link').attr('href', 'mailto:' + receiver + mailString);
alert($('#mail-link').attr('href'))
}
I am a rookie on web design. I have a problem like this:
<script type="text/javascript">
var searchIDs = new Array();
<% searches.forEach(function (search) { %>
searchIDs.push('<%= search._id%>');
console.log('<%= search._id%>');
<% }) %>
</script>
...
<script>
for (var i = 0; i < searchIDs.length; i++) {
$.get('../../tCounter', { search: searchIDs[i]}, function(data){
console.log(data.c);
$("#" + searchIDs[i]).append("<b>" + data.c + "</b>");
});
}
</script>
On this code, I have some divs which their ids have been generated by searchID. I want to reach different html components by search IDs. Problem here, I can get true data with get and see it with console.log(data.c); but I cant reach correct component to write the data. It always appends on same div. I am waiting for your suggestions,
Thanks.
The problem is the internal function runs async. The loop is finished and i is at the highest value when they run.
The easiest way around this is using jquery's $.each() like this
$.each(searchIDs, function(i, id) {
$.get('../../tCounter', {
search: id
}, function(data) {
console.log(data.c);
$("#" + id).append("<b>" + data.c + "</b>");
});
});
Hi I'm using Hilios Jquery Countdown https://github.com/hilios/jQuery.countdown
Example of multiple instances:
<div data-countdown="2014/06/20 20:00"></div>
<div data-countdown="2014/06/21 20:00"></div>
<div data-countdown="2014/06/22 20:00"></div>
Js:
$('[data-countdown]').each(function () {
var $this = $(this), finalDate = $(this).data('countdown');
$this.countdown(finalDate, function (event) {
var format = '%H:%M:%S';
if (event.offset.days > 0) {
format = '%-d day%!d ' + format;
}
if (event.offset.weeks > 0) {
format = '%-w week%!w ' + format;
}
$(this).html(event.strftime(format));
});
});
The problem here is, that if I select some European language(German, Slovenian) in the browser, the browser automatically formats string date from 2014/06/20 to 2014.06.20 which makes the script not working. Why is this happening? Am I passing the date value to data attribute wrong?
When I see their examples here: http://hilios.github.io/jQuery.countdown/examples/multiple-instances.html it works properly with all languages... but they dont have an example of HTML implementation, only the way I am doing it, but somehow for them it works.
Anyone had issues with this?
I had to use CultureInfo.InvariantCulture.
I'm desiging a dynamic dropdown form that will help my customers choose the right product for them and was looking to test the function to output the final results. When I add the JS function to take the info from the last dropdown and use it to build the results list the whole script seems to break. My console in Chrome spits out Uncaught SyntaxError: Unexpected string (pointing to the third to last line of the broken JS) although its nearly identical to my other functions except for some changed variables.
Basically, I use JS to pull info from dropdowns which sends that data using GET to a PHP script. The script then uses that data to query an SQL DB to dynamically build a list of options for the next dropdown. After the last dropdown of the form the JS would parse the PHP script to receive some data (a table eventually) and update a DIV with that data. This is where the script breaks. Adding that last JS function breaks the script while removing it keeps it working.
You can test the working script here and the broken script here.
Here's the working JS:
$(function(){
$("#type").change(function() {
var tval = document.getElementById('type').value;
$("#source").load(encodeURI("findbackend.php?type=" + tval));
});
$("#source").change(function() {
sval = document.getElementById('source').value;
$("#range").load(encodeURI("findbackend.php?source=" + sval));
});
$("#range").change(function() {
rval = document.getElementById('range').value;
$("#setpoint").load(encodeURI("findbackend.php?range=" + rval));
});
$("#setpoint").change(function() {
stval = document.getElementById('setpoint').value;
$("#dig_num").load(encodeURI("findbackend.php?range=" + rval + "&setpoint=" + stval));
});
});
And here's the broken JS:
$(function(){
$("#type").change(function() {
var tval = document.getElementById('type').value;
$("#source").load(encodeURI("findbackend.php?type=" + tval));
});
$("#source").change(function() {
sval = document.getElementById('source').value;
$("#range").load(encodeURI("findbackend.php?source=" + sval));
});
$("#range").change(function() {
rval = document.getElementById('range').value;
$("#setpoint").load(encodeURI("findbackend.php?range=" + rval));
});
$("#setpoint").change(function() {
stval = document.getElementById('setpoint').value;
$("#dig_num").load(encodeURI("findbackend.php?range=" + rval + "&setpoint=" + stval));
});
$("#dig_num").change(function() {
dnum = document.getElementById('dig_num').value;
$("#findresults").load(encodeURI("findbackend.php?range=" + rval + "&setpoint=" + stval "&dig_num=" + dnum));
});
});
I've looked it over a hundred times and can't figure out what's breaking the script.
If you'd like to see the PHP or anything just let me know.
Thanks in advance for any help.
Again, you can view the working script here and the broken script here.
You forgot to add a "+" sign after stval.
$("#findresults").load(encodeURI("findbackend.php?range=" + rval + "&setpoint=" + stval + "&dig_num=" + dnum));
I am using a form to input date in text box format (mm/dd/yyyy) and the next text box I will enter how many days to add. This is should automatically calulate the no of days and display in 3rd text box. E.g
Text Box1: Input date (mm/dd/yyyy)
Text Box2: Input no of days
Text Box3: textbox1 value+textbox3 value
I need help to add dates.
I tried in onblur event in textbox2 using Javascript function
Code:
//text box2 event
onblur="adddate(this.value)"
//javascript fn
function adddate(a) {
var rdat=document.telstoe.rdate.value;
if(a==2) {
document.telstoe.tdate.value=rdat+2;
}
}
Input Values:
Textbox 1: 11/14/2012 (mm/dd/yyyy)
Textbox 2: 2 or 3 or 4
The output should be: only the days should be counted and displayed and I am getting like 1/14/2012*2*
Please help with the correct code
try this:
function adddate(a) {
var tdate = document.telstoe.rdate.value;
var theDate=new Date(tdate);
theDate.setDate( theDate.getDate() + a );
document.telstoe.tdate.value=(theDate.getMonth() + 1) + "/" + theDate.getDate() + "/" theDate.getFullYear();
}
and use this page for your reference:
http://www.w3schools.com/jsref/jsref_obj_date.asp
Please have a look at the object reference! It would be preferred for your own sake, to learn the javascript Date object. Good luck.
You can use a Date object to parse the date and add days to it:
var date = new Date(document.telstoe.rdate.value);
date.setDate(date.getDate() + 1);
document.telstoe.tdate.value = (date.getMonth() + 1) + "/" + date.getDate() + "/" date.getFullYear().toString().substring(2);
Or use something like the jQuery UI datepicker to format the date.