Setting a JSF list box directly from javascript - javascript

I'd like to directly set the listbox elements defined in a jsf block via setting them in a javascript code, but the document.getElementById() returns null ?
JSF Code:
<h:panelGroup id="dtEffectiveDate">
<h:outputText value="EffectiveDates:" style="margin-left: 250px;width:76px;"/>
<h:selectManyListbox id="effectiveDateListbox" style="margin-left: 15px; width:76px;" size="2">
<c:selectItems id="effectiveDateSelectItems" value="#{manualDataEntryRegText.effectiveDates}"/>
</h:selectManyListbox>
</h:panelGroup>
JavaScript code:
CalendarPopup.handleSelectForMultipleDates = function(type, args, obj, inputEl)
{
alert("MultiSelect");
var arrDates = CalendarPopup.effectiveDateCalendar.getSelectedDates();
var length = arrDates.length;
var i=0;
var tokenizedDates = "";
var txtDate = document.getElementById("pageForm:effectiveDateListbox");
alert(txtDate); // returns null
for (i = 0; i!= length; i++)
{
var date = arrDates[i];
var displayMonth = date.getMonth() + 1;
var displayYear = date.getFullYear();
var displayDate = date.getDate();
tokenizedDates = displayMonth.toString(10) + "/" + displayDate.toString(10) + "/" + displayYear.toString(10);
effectiveDateListbox.options[i].value = tokenizedDates;
i++;
}
}
EDIT: I am able to get the listbox but cannot set it:
How do I set the listbox ?
var listBox = document.getElementById('pageForm:effectiveDateListbox');
for (i = 0; i!= length; i++)
{
var date = arrDates[i];
var displayMonth = date.getMonth() + 1;
var displayYear = date.getFullYear();
var displayDate = date.getDate();
tokenizedDates = displayMonth.toString(10) + "/" + displayDate.toString(10) + "/" + displayYear.toString(10);
listBox.options[i].value = tokenizedDates;
i++;
}

This should not return null:
<select id="pageForm:effectiveDateListbox" name="pageForm:effectiveDateListbox" multiple="multiple" size="0"></select>
document.getElementById('pageForm:effectiveDateListbox');
If it is, it might be that the select element does not exist at the time your javascript is running. To protect against that you could try:
window.onload = function(){
// do stuff here
};

Related

Iterate over gmail threads and add a label with addlabel

I wish to run this standalone code twice a day, but cannot solve the exception on the addLabel, which is "impossible to find the method", any suggestion? I tried to change the for cycle as well as to assign a var to the threads[i] but nothing changed.
function salvaNote(){
var d = new Date();
d.setMonth(d.getMonth()-6);
var n = d.getFullYear() + "/" + addZero(d.getMonth()+1) + "/" + addZero(d.getDate());
var folderName = 'tavoloTecnico';
labelName = GmailApp.createLabel('tavoloTecnico');
var query = 'in:anywhere from:mariano.casillo#mit.gov.it OR from:donato.castigliego#mit.gov.it has:attachment subject:previsioni filename:xls '+ 'after:'+n;
var threads = GmailApp.search(query);
var quanteMail = threads.length;
for ( var i = 0 ; i < quanteMail; i++) {
threads[i].addLabel(labelName);
var mesgs = threads[i].getMessages();
for(var j in mesgs){
var attachments = mesgs[j].getAttachments();
for(var k in attachments){
var attachment = attachments[k];
var attachmentBlob = attachment.copyBlob();
var file = DriveApp.createFile(attachmentBlob);
DriveApp.getFoldersByName(folderName).next().addFile(file);
}
}
}
}

How to get week numbers in month in Javascript?

I need to generate year calendar with week numbers which should look like this image:
However it is not trivial to get week numbers in each month so they wouldn't overlap or be missing. I am using weekCount() function from this SO question. And for displaying calendar I have written this code:
var year = parseInt($(this).text());
var months = {1:'leden',2:'únor',3:'březen',4:'duben',5:'květen',6:'červen',7:'červenec',8:'srpen',9:'září',10:'říjen',11:'listopad',12:'prosinec'};
var calendar = $('<div id="summary_search_form_menu"></div>');
calendar.offset({top:$(this).offset().top + $(this).height() + 10}).css({right: '0px'});
var cur_week = 0;
for (var i=1;i<=12;i++) {
var row = $('<div class="row"></div>');
row.append('<div class="month button dark-blue">'+months[i]+'</div>');
var week_count = weekCount(year, i);
for (var week=1;week<week_count;week++) {
cur_week++;
row.append('<div class="week button blue">'+cur_week+'</div>');
}
calendar.append(row);
}
$('body').append(calendar);
Any way how to display week numbers correctly ?
OK, I have finally solved this on my own. In case somebody would find it helpful, I post my final code which works as I needed.
function weekCount(year, month_number) {
var firstOfMonth = new Date(year, month_number-1, 1);
var lastOfMonth = new Date(year, month_number, 0);
var used = firstOfMonth.getDay() + lastOfMonth.getDate();
return Math.ceil( used / 7);
}
Date.prototype.getWeekNumber = function(){
var d = new Date(+this);
d.setHours(0,0,0);
d.setDate(d.getDate()+4-(d.getDay()||7));
return Math.ceil((((d-new Date(d.getFullYear(),0,1))/8.64e7)+1)/7);
};
var year = parseInt($(this).text());
var months = {1:'leden',2:'únor',3:'březen',4:'duben',5:'květen',6:'červen',7:'červenec',8:'srpen',9:'září',10:'říjen',11:'listopad',12:'prosinec'};
var calendar = $('<div id="summary_search_form_menu"></div>');
calendar.offset({top:$(this).offset().top + $(this).height() + 10}).css({right: '15px'});
var cur_week = 0;
var col1 = $('<div id="summary_search_form_menu_col1"></div>');
var col2 = $('<div id="summary_search_form_menu_col2"></div>');
calendar.append(col1);
calendar.append(col2);
var col2_table = $('<div id="summary_search_form_menu_col2_table"></div>');
col2.append(col2_table);
for (var i=1;i<=12;i++) {
var row = $('<div class="row"></div>');
col1.append('<div class="month button dark-blue">'+months[i]+'</div>');
var week_count = weekCount(year, i);
var d = new Date(year, i-1, 1, 0,0,0);
var first_week_in_month = d.getWeekNumber();
for (var week=(cur_week == first_week_in_month ? 2 : 1);week<=week_count;week++) {
cur_week++;
row.append('<div class="week button blue">'+cur_week+'</div>');
}
col2_table.append(row);
}
$('body').append(calendar);

JS output to a html input

Need the output of the time script to change the input of a input field but can't figure it out.
<script>
function addZero(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
function checkouttimeFunction() {
var d = new Date();
var x = document.getElementById("demo");
var h = addZero(d.getHours());
var m = addZero(d.getMinutes());
var s = addZero(d.getSeconds());
x.innerHTML = h + ":" + m + ":" + s;
var elem = document.getElementById("cout");
elem.value = document.getElementById("demo");
}
</script>
Looks like on the last line in checkouttimeFunction() you want do to:
elem.value = x.innerHTML;
Other than:
elem.value = document.getElementById("demo");
As you are trying to set the value to be a DOM element.
Fiddle Example
I'm assuming you want the innerHTML text of x to be displayed in the input field elem.
You cant set the 'value' attribute to an HTML element, but you can instead just set it to the desired text (e.g the time).
<script>
function addZero(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
function checkouttimeFunction() {
var d = new Date();
var h = addZero(d.getHours());
var m = addZero(d.getMinutes());
var s = addZero(d.getSeconds());
var elem = document.getElementById("cout");
elem.value = h + ":" + m + ":" + s;
}
</script>
You should change
elem.value = document.getElementById("demo");
to
elem.value = document.getElementById("demo").innerHTML;
That should give you what you need. Because you need the content of the element and document.getElementById() will just give you the element, Which will be in the form of an Object.
Hope this helps.

To set focus on textbox if the condition is failure using javascript

In the below code i have a textbox and a javascript function which has regular expression.I can validate regular expressions in textbox it will alert success or failure.My aim is if it is failure it should focus on textbox and should not able to move to another control until it is success.
js:
function ValidateRegExp(txtInput, REGEXP) {
var mySplitResult = new Array();
mySplitResult = REGEXP.split("~~");
var iReturn = 0;
for (i = 0; i < mySplitResult.length - 1; i++) {
var re = new RegExp(mySplitResult[i]);
if (!txtInput.match(re)) {
iReturn = iReturn + 1;
}
}
if (iReturn > 0) {
alert("Failed...");
}
else {
alert("Success...");
}
}
asp.net:
<asp:TextBox ID="txtField" runat="server" width="200Px" onfocus="But1()"></asp:TextBox>
codebehind
txtField.Attributes.Add("onblur", "javascript:ValidateRegExp(document.getElementById('" + txtField.ClientID + "').value, '" + hidRegExp.Value + "');");
Because you are already using onblur event so you just need to use javascript focus() to set focus on your text box. I have changed your code to pass this(your control) to javascript function.
Change you code behind code to
txtField.Attributes.Add("onblur", "javascript:ValidateRegExp(this, '" + hidRegExp.Value + "');");
and your javascript code to
function ValidateRegExp(txtInput, REGEXP) {
var mySplitResult = new Array();
mySplitResult = REGEXP.split("~~");
var iReturn = 0;
for (i = 0; i < mySplitResult.length - 1; i++) {
var re = new RegExp(mySplitResult[i]);
if (!txtInput.value.match(re)) {
iReturn = iReturn + 1;
}
}
if (iReturn > 0) {
alert("Failed...");
txtInput.focus(); //set focus back to control.
}
else {
alert("Success...");
}
}

Javascript function not recognizing id in getElementById

I am adding a row to a table, and attached an ondblclick event to the cells. The function addrow is working fine, and the dblclick is taking me to seltogg, with the correct parameters. However, the var selbutton = document.getElementById in seltogg is returning a null. When I call seltogg with a dblclick on the original table in the document, it runs fine. All the parameters "selna" have alphabetic values, with no spaces, special characters, etc. Can someone tell me why seltogg is unable to correctly perform the document.getElementById when I pass the id from addrow; also how to fix the problem.
function addrow(jtop, sel4list, ron4list) {
var tablex = document.getElementById('thetable');
var initcount = document.getElementById('numrows').value;
var sel4arr = sel4list.split(",");
var idcount = parseInt(initcount) + 1;
var rowx = tablex.insertRow(1);
var jtop1 = jtop - 1;
for (j = 0; j <= jtop1; j++) {
var cellx = rowx.insertCell(j);
cellx.style.border = "1px solid blue";
var inputx = document.createElement("input");
inputx.type = "text";
inputx.ondblclick = (function() {
var curj = j;
var selna = sel4arr[curj + 2];
var cellj = parseInt(curj) + 3;
inputx.id = "cell_" + idcount + "_" + cellj;
var b = "cell_" + idcount + "_" + cellj;
return function() {
seltogg(selna, b);
}
})();
cellx.appendChild(inputx);
} //end j loop
var rowCount = tablex.rows.length;
document.getElementById('numrows').value = rowCount - 1; //dont count header
} //end function addrow
function seltogg(selna, cellid) {
if (selna == "none") {
return;
}
document.getElementById('x').value = cellid; //setting up for the next function
var selbutton = document.getElementById(selna); //*****this is returning null
if (selbutton.style.display != 'none') { //if it's on
selbutton.style.display = 'none';
} //turn it off
else { //if it's off
selbutton.style.display = '';
} //turn it on
} //end of function seltogg
You try, writing this sentence:
document.getElementById("numrows").value on document.getElementById('numrows').value
This is my part the my code:
contapara=(parseInt(contapara)+1);
document.getElementById("sorpara").innerHTML+="<li id=\"inputp"+contapara+"_id\" class=\"ui-state-default\"><span class=\"ui-icon ui-icon-arrowthick-2-n-s\"></span>"+$('#inputp'+contapara+'_id').val()+"</li>";
Look you have to use this " y not '.
TRY!!!!

Categories

Resources