How to clear items in select tag,
I am trying to clear items before adding new adding new item, so the old items dont show up only the new items,
Using this code,
document.getElementById("myDivResultSelect").options.length = 0;
It removes all items, but we say for ex,
if i onClick, First show items,
Items1
========
2014-12-12 20:00
2014-12-12 21:00
2014-12-12 22:00
2014-12-12 23:00
========
Second time onClick i dont wont to show that Items1 i want to delete them and on next round display new Items2
Items2
========
2014-12-13 20:00
2014-12-13 21:00
2014-12-13 22:00
2014-12-13 23:00
for (var j = 0; j < bookedFreeTimes.length; j++) {
free = bookedFreeTimes[j];
var array = new Array(free);
var myDivRem = document.getElementById("myDivResultSelect");
var lengths = myDivRem.options.length;
for (var ms = 0; ms < lengths; ms++) {
myDivRem.options[ms] = null;
}
while (myDivRem.hasChildNodes()) {
myDivRem.removeChild(myDiv.firstChild);
}
for (var k = 0; k < array.length; k++) {
var option = document.createElement("option");
option.text = array[k];
option.value = array[k];
myDiv.appendChild(option);
}
}
========
UPDATE
==================
var free = "";
for (var j = 0; j < bookedFreeTimes.length; j++) {
free = bookedFreeTimes[j];
var array = new Array(free);
var select = document.getElementById("myDivResultSelect");
var lengths = select.options.length;
if (lengths > 0) {
for (i = 0; i < length; i++) {
select.options[i] = null;
}
} else {
for (var k = 0; k < array.length; k++) {
var option = document.createElement("option");
option.text = array[k];
option.value = array[k];
myDiv.appendChild(option);
}
}
}
UPDATE
==
My App.js file
var mili;
var increase = 0;
function addNewDateFrom() {
getListCalender = document.getElementById('CalenderListDrop').value;
spHostUrl = decodeURIComponent(getQueryStringParameter('SPHostUrl'));
context = new SP.ClientContext.get_current();
parentContext = new SP.AppContextSite(context, spHostUrl);
web = parentContext.get_web();
list = web.get_lists().getByTitle(getListCalender);
context.load(list);
var fromDate08 = "T08:00:00Z";
var toDate17 = "T17:00:00Z";
var listItemCustom = document.getElementById('datepicker').value;
var listItemFromTime = document.getElementById('timepicker').value;
var listItemtoDate = document.getElementById('datepickerto').value;
var listItemToTime = document.getElementById('timepickerTo').value;
var result = listItemCustom + "T" + listItemFromTime + ":00" + "Z";
var result2 = listItemtoDate + "T" + listItemToTime + ":00" + "Z";
fromTime = new Date(result);
toTime = new Date(result2);
mili = toTime - fromTime;
fromTime.setDate(fromTime.getDate());
fromTimeConverted = fromTime.toJSON().split('T')[0] + fromDate08;
increase = increase + 1;
toTime.setDate(toTime.getDate() + increase);
if (toTime.getDay() == 6) {
toTime.setDate(toTime.getDate() + 2);
increase = increase + 2;}
else if (toTime.getDay() == 0) {
toTime.setDate(toTime.getDate() + 1);
increase = increase + 1;
}
toTimeConverted = toTime.toJSON().split('T')[0] + toDate17;
var camlQuery = new SP.CamlQuery('<View><Query><Where><And><Geq><FieldRef Name=\'EventDate\' /><Value IncludeTimeValue=\'TRUE\' Type=\'DateTime\'>' + fromTimeConverted + '</Value></Geq><Leq><FieldRef Name=\'EndDate\' /><Value IncludeTimeValue=\'TRUE\' Type=\'DateTime\'>' + toTimeConverted + '</Value></Leq></And></Where></Query></View>');
camlQuery.set_viewXml();
collListItem = list.getItems(camlQuery);
context.load(collListItem);
context.executeQueryAsync(onQuerySucceededaddNewDateFrom, onQueryFailedaddNewDateFrom);
}
function onQuerySucceededaddNewDateFrom() {
var myDiv = document.getElementById("myDivResultSelect");
var length = myDiv.options.length;
for (var m = 0; m < length; m++) {myDiv.options[m] = null;}
while (myDiv.hasChildNodes()) {myDiv.removeChild(myDiv.firstChild);}
var dtstartCon = new Date(fromTimeConverted);
var dtEndCon = new Date(toTimeConverted);
var convertUtctoFromtime = new Date(dtstartCon.getTime() + dtstartCon.getTimezoneOffset() * 60 * 1000);
var start = new Date(convertUtctoFromtime);
var convertUtcToTime = new Date(dtEndCon.getTime() + dtEndCon.getTimezoneOffset() * 60 * 1000);
var end = new Date(convertUtcToTime);
var listItemEnumerator = collListItem.getEnumerator();
var bookedTimes = [];
var bookedFreeTimes = [];
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
var eventDate = new Date(oListItem.get_item('EventDate'));
var endDate = new Date(oListItem.get_item('EndDate'));
bookedTimes.push([eventDate, endDate]);
}
while (start.getTime() < end.getTime()) {
var timeFree = true;
var firstnewDate = (start.setTime(start.getTime()));
var firstNewDt = new Date(firstnewDate);
var newDate = start.setTime(start.getTime() + mili);
start = new Date(newDate);
for (var i = 0; i < bookedTimes.length; i++) {
var time = bookedTimes[i][0];
var time2 = bookedTimes[i][1];
if (firstNewDt.getTime() != time.getTime() && start.getTime() != time2.getTime()) {
} else {
bookedTimes.splice(i, 1);
timeFree = false;
break;
}
}
if (timeFree) {
var from = new Date(firstNewDt);
var to = new Date(start);
var day = from.getDate();
if (from.getHours() <= 16 && from.getMinutes() <= 30 && from.getHours() >= 8 && !(from.getDay() == 0 || from.getDay() == 6)) {
if (day <= 9) {day = "0" + day;}
var month = from.getMonth() + 1;
if (month <= 9) { month = "0" + month;}
var year = from.getFullYear();
var hours = from.getHours();
if (hours < 10) {hours = "0" + hours;}
var minutes = from.getMinutes();
if (minutes < 30) {minutes = "0" + minutes;}
var dayto = to.getDate();
if (dayto <= 9) {dayto = "0" + dayto;}
var monthto = to.getMonth() + 1;
if (monthto <= 9) {monthto = "0" + monthto;}
var yearto = to.getFullYear();
var hoursto = to.getHours();
if (hoursto < 10) { hoursto = "0" + hoursto;}
var minutesto = to.getMinutes();
if (minutesto < 30) {minutesto = "0" + minutesto;}
bookedFreeTimes.push(year + "-" + month + "-" + day + " " + hours + ":" + minutes + " , " + yearto + "-" + monthto + "-" + dayto + " " + hoursto + ":" + minutesto);
}
}
}
$(function() {
$("#dialog").dialog({
autoOpen: false,
modal: true,
width: 400,
height: 400,
});
$("#dialog").dialog("open");
var free = "";
for (var j = 0; j < bookedFreeTimes.length; j++) {
free = bookedFreeTimes[j];
var array = new Array(free);
var select = document.getElementById("myDivResultSelect");
var lengths = select.options.length;
if (lengths > 0) {
for (i = 0; i < length; i++) {
select.options[i] = null;
}
} else {
for (var k = 0; k < array.length; k++) {
var option = document.createElement("option");
option.text = array[k];
option.value = array[k];
myDiv.appendChild(option);
}
}
}
}
);
}
function onQueryFailedaddNewDateFrom(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
My Default aspx.
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
<p id="message">
initializing...
</p>
<div id="content">
<h2>Boka möte</h2>
<br />
Välj Kalender
<br />
<select id="CalenderListDrop">
</select>
<br />
Rubrik
<br />
<input type="text" name="txtTitle" id="Textrubrik" />
<br />
Starttid<br />
<input type="text" size="10" readonly="readonly" id="datepicker" /><input type="text" readonly="readonly" size="8" id="timepicker" />
<br />
Sluttid<br />
<input type="text" size="10" readonly="readonly" id="datepickerto" /><input type="text" readonly="readonly" size="8" id="timepickerTo" />
<br />
Beskrivning<br />
<textarea name="txtTitle" id="Textbeskrivning" cols="40" rows="5"></textarea>
<br />
<br />
<br />
<button onclick="createItem();return false;">Boka tid</button><br /><br /> <div id="freetime">Lediga tider idag</div>
<select id="LedigTiderDrop">
</select>
<div id="dialog">
<div id="bokningupptagentext"></div>
<div id="textresultfree"></div>
<select id="myDivResultSelect">
</select>
<br/>
<div id="buttonResultPlus"></div><div id="buttonResultMinus"></div>
<br/>
<div id="buttonResultpopup"></div>
</div>
<div id="dialogBokninggenomford">
<div id="text"></div>
</div>
</div>
</asp:Content>