The idea is when each select field is changed, it will pass part of the directory needed for the form action (the value of each option). ie:
<select onChange="chgFrmAtn" id="1-1">
<option value="">Any</option>
<option value="exDir1Option1">option 1</option>
<option value="exDir1Option2">option 2</option>
</select>
So here is the javascript, basically I want to build 2 directories, several different options. The number of options is much longer than the list in this example script. The options can be in any order. if any is selected, it doesn't add to the directory.
function chgFrmAtn( itemVal )
{
var directory1Part1 = '';
var directory1Part2 = '';
var directory1Part3 = '';
var directory2Part1 = '';
var directory2Part2 = '';
if(itemVal == '1-1'){
directory1Part1 = document.getElementById(itemVal);
}
if(itemVal == '1-2'){
directory1Part2 = document.getElementById(itemVal);
}
if(itemVal == '1-3'){
directory1Part3 = document.getElementById(itemVal);
}
if(itemVal == '2-1'){
directory1Part1 = document.getElementById(itemVal);
}
if(itemVal == '2-2'){
directory1Part2 = document.getElementById(itemVal);
}
document.advancedSearchForm.action = directory1Part1 + directory1Part2 + directory1Part3 + '/' + directory2Part1 + directory2Part2 + '/';
}
Thank you in advance.
You can use two array and map the comparison.
function chgFrmAtn(itemVal) {
var vals = ['1-1', '1-2', '1-3', '2-1', '2-2'],
directory = vals.map(function (a) {
return itemVal === a ? document.getElementById(a) : '';
});
document.advancedSearchForm.action = directory[0] + directory[1] + directory[2] + '/' + directory[3] + directory[4] + '/';
}
try
function chgFrmAtn(itemVal)
{
document.advancedSearchForm.action = document.getElementById(itemVal).value;
}
basically you will only get one value in your directoryxParty since itemVal will remain same and only one if statement will true.
Edit:
If it has to append values from each select, then
var selectIds = ["1-1", "1-2", "1-3", "2-1", "2-2"];
function chgFrmAtn()
{
var vals = selectIds.map(function(id){
var obj = document.getElementById(id);
return obj && obj.value ? obj.value : "";
});
document.advancedSearchForm.action = vals[0] + vals[1] + vals[2] + '/' + vals[3] + vals[4] + '/';
}
Related
var list = e.data.goods_list;
$.each(list, function(k, v) {
var str = '';
str = str + '<optgroup label="'+v[0].store_name+'">';
$.each(v, function(kk, vv) {
str = str + '<option value="'+vv.goods_id+'">'+vv.goods_name+'</option>';
});
str = str + '</optgroup>';
$('#goodsSelect2').append(str);
});
$('#goodsSelect2').select2({formatSelection:test});
console.log(#goodsIds);
var goodsIdsStr = "#goodsIds";
if(goodsIdsStr !=null && goodsIdsStr != "" && goodsIdsStr != undefined){
var arr = goodsIdsStr.split(",");
console.log(arr);
$("#goodsSelect2").val(arr).trigger('change');
}
Above is part of my code. When I use $('#goodsSelect2').select2();, all is ok
However when I use $('#goodsSelect2').select2({formatSelection:test}), the function "test" is useful but the style is wrong.
formatSelection must return e.text, or it render wrong
I have a couple of menu's that add a variable to the current link uppon click. Here is an example:
<select onChange="window.location.href+=this.value">
<option value="&numb=1">1</option>
<option value="&numb=2">2</option>
<option value="&numb=3">3</option>
</select>
<select onChange="window.location.href+=this.value">
<option value="&cord=x">x</option>
<option value="&cord=y">y</option>
<option value="&cord=z">z</option>
</select>
My problem is then, if I choose "y" 2 times, it adds "&cord=y" 2 times. Instead I want it to replace the current value from that menu. So if "&cord=x" is allready present, it would then just change it to "&cord=y" instead of adding a new variable to the link. Ofcourse, if I choose one from the &numb menu, it shouldn't replace one from the &cord menu.
Can this be done? If yes, then how?
EDIT: Here is another example. If I have the url
"www.google.com?cat=p&comp=x&type=1" and I choose "&comp=3" in my select box, It will then replace the current &comp with the new. If &comp is not set, it will just add &comp=3 (or whatever I chose) to the url.
These functions should let you parse and edit the URL parameters:
function splitObj(str, rowSplit, columnSplit) {
var obj = {};
var rows = str.split(rowSplit);
for (var i = 0; i < rows.length; i++) {
var kv = rows[i].split(columnSplit);
if (kv.length === 1) {
obj[kv[0]] = null;
} else {
obj[kv[0]] = kv[1];
}
}
return obj;
}
function joinObj(obj, rowSplit, columnSplit) {
var rows = [];
for (var name in obj) {
if (name[obj] === null) {
rows.push(name);
} else {
rows.push(name + columnSplit + obj[name]);
}
}
return rows.join(rowSplit);
}
function setUrlParam(name, value) {
var parts = window.location.href.split('?');
var urlbase = parts[0];
var params = {};
if (parts.length > 1) {
params = splitObj(parts[1], '&', '=');
}
params[encodeURIComponent(name)] = encodeURIComponent(value);
window.location.href = urlbase + '?' + joinObj(params, '&', '=');
}
function changeURL(elem) {
var kv = elem.value.slice(1).split('=');
setUrlParam(kv[0], kv[1]);
}
Then you can do:
<select id="select" onChange="changeURL(this);">
<option value="&cord=x">x</option>
<option value="&cord=y">y</option>
<option value="&cord=z">z</option>
</select>
UPDATE:
You can make it cut out the splitObj and joinObj at the cost of readability.
function setUrlParam(name, value) {
var parts = window.location.href.split('?'), params = {};
if (parts.length > 1)
parts[1].split('&').forEach(function(x){
var p = x.split('=');
params[p[0]] = (p.length > 1) ? p[1] : null;
});
params[encodeURIComponent(name)] = encodeURIComponent(value);
window.location.href = parts[0] + '?' + Object.keys(params).map(function(x){
return (params[x] === null) ? x : (x + '=' + params[x]);
}).join('&');
}
function changeURL(elem) {
var kv = elem.value.slice(1).split('=');
setUrlParam(kv[0], kv[1]);
}
You would add an if statement so that it checks if there is already a value in the window. By doing this, you would replace the value with the current one.
Change window.location.href to window.location.origin
<select onChange="window.location.href=window.location.origin+this.value">
fiddle
EDIT Go for something like this: http://jsfiddle.net/63s8eb70/5/
<select onChange="makeUrl()">
<option value="?numb=1">1</option>
<option value="?numb=2">2</option>
<option value="?numb=3">3</option>
</select>
<select id="select" onChange="makeUrl();">
<option value="&cord=x">x</option>
<option value="&cord=y">y</option>
<option value="&cord=z">z</option>
</select>
<br><br>
<div id="cu"></div>
JS
var current_Url = "";
function makeUrl() {
var base = window.location.origin;
var e = document.getElementById("select");
var val = e.options[e.selectedIndex].value;
if (current_Url === "") {
current_Url = base + val;
document.getElementById('cu').innerHTML = current_Url;
//Comment out the next line on you actual site
//document.location.href = current_Url;
}
else {
current_Url += val;
document.getElementById('cu').innerHTML = current_Url;
//Comment out the next line on you actual site
//document.location.href = current_Url;
}
}
This function takes the a parameter and a value and either adds it to the URL or updates the parameter if it already exists.
function urlQueryString(parameter, value) {
var url = window.location.href;
var regex = new RegExp("([?&])" + parameter + "=.*?(&|#|$)(.*)", "gi"),
hash;
if (regex.test(url)) {
if (typeof value !== 'undefined' && value !== null)
window.location = url.replace(regex, '$1' + parameter + "=" + value + '$2$3');
else {
hash = url.split('#');
url = hash[0].replace(regex, '$1$3').replace(/(&|\?)$/, '');
if (typeof hash[1] !== 'undefined' && hash[1] !== null)
url += '#' + hash[1];
window.location = url;
}
}
else {
if (typeof value !== 'undefined' && value !== null) {
var separator = url.indexOf('?') !== -1 ? '&' : '?';
hash = url.split('#');
url = hash[0] + separator + parameter + '=' + value;
if (typeof hash[1] !== 'undefined' && hash[1] !== null)
url += '#' + hash[1];
window.location = url;
}
else
window.location = url;
}
}
It would be wise to give your input element a name attribute indicating the name of the parameter you're trying to change so you don't repeat the numb= part and coord= part over and over. Consider something like this, which lets you parameterize the name of the query key you're trying to change:
<select name="numb" onChange="updateSearch(event)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="coord" onChange="updateSearch(event)">
<option value="x">x</option>
<option value="y">y</option>
<option value="z">z</option>
</select>
That way you can make as many of these input element you'd like and use the same event handler for the onchange.
The corresponding javascript could look like this:
function updateSearch(event) {
var param = event.target.name;
var value = event.target.value;
var params = parseQuery(window.location.search);
params[param] = value;
window.location.search = buildQuery(params);
}
function parseQuery(querystring) {
if (!querystring) { return {}; }
var pairs = querystring.replace(/^\?/, '').split('&');
var params = {};
var pair;
var i;
for (i = 0; i < pairs.length; i++) {
pair = pairs[i].split('=');
params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
}
return params;
}
function buildQuery(params) {
var pairs = [];
var key;
for (key in params) {
if (!params.hasOwnProperty(key)) { continue; }
pairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(params[key]));
}
return pairs.join('&');
}
Some of the verbosity here is dealing with a string of serialized parameters in your URL safely and without using a lot of string manipulation. Consider those functions reusable for any instances you want to fetch or set some query parameters from the client-side.
Here's a jsFiddle: https://jsfiddle.net/8fftmwzn/20/
This implementation does not (of course) handle settings the inputs to what's already in your URL querystring. That's a separate challenge.
Thanks for checking this out. I've got this dynamic ddl that populates after I put a value (ie. "51") into the specific page's javascript. So different pages pull different lists based on the number value. Everything is working great, except IE 8 (rhyme +1). When I open in IE8, I just get a single drop down item that reads "Choose A Program First".
I did some research and noticed there was an article on here talking about .empty not being reliable with IE8, but I don't use it. Here's my working code:
Local code:
<script type="text/javascript" language="javascript">
<!--
$(document).ready(function () {
$('#ballform_program').val(51);
loadCampuses();
});
//-->
</script>
Referenced DDL functionality js:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- Populate Campus DDL -->
<script type="text/javascript" language="javascript">
<!--
$(document).ready(function () {
if (firstField("#ballform_campuslocation", "#ballform_program") == "#ballform_campuslocation") {
loadCampuses();
$('#ballform_campuslocation').change(loadPrograms);
} else if (firstField("#ballform_campuslocation", "#ballform_program") == "#ballform_program") {
loadPrograms();
$('#ballform_program').change(loadCampuses);
}
$('#ballform_searchterm').val(getSearch());
$('#ballform_url').val(location.href);
$('#ballform_referrer').val(document.referrer);
$('#ballform_useragent').val(navigator.userAgent);
$.getJSON("http://jsonip.appspot.com?callback=?",
function(data) {
$('#ballform_ipaddress').val(data.ip);
});
});
function loadCampuses() {
var host = location.host;
var data;
if (firstField("#ballform_campuslocation", "#ballform_program") == "#ballform_campuslocation") {
data = liveballScriptlet(6, "json", "url=" + host + "&program=0");
clearProgram();
} else {
var programID = $('#ballform_program').val();
data = liveballScriptlet(6, "json", "url=" + host + "&program=" + programID);
}
var options = "<option value=''>Choose...</option>";
var optGroup = "";
var jsonString = $.parseJSON(data);
$.each(jsonString, function () {
var value = this['ID'];
var text = this['Name'];
var school = this['School'];
if (optGroup != school) {
if (optGroup != "") {
options += "</optgroup>";
}
optGroup = school;
options += "<optgroup label='" + optGroup + "'>";
}
options += "<option value='" + value + "'>" + text + "</option>";
});
$('#ballform_campuslocation').html(options);
}
function clearCampus() {
if ($('#ballform_campuslocation').length > 0) {
$('#ballform_campuslocation')
.find('option')
.remove()
.end()
.append('<option value="">Choose a Program First</option>');
$('#ballform_campuslocation')
.find('optgroup')
.remove()
.end();
}
}
function loadPrograms() {
var host = location.host;
var data;
if (firstField("#ballform_campuslocation", "#ballform_program") == "#ballform_program") {
data = liveballScriptlet(7, "json", "url=" + host + "&campus=0");
clearCampus();
} else {
var campusID = $('#ballform_campuslocation').val();
data = liveballScriptlet(7, "json", "url=" + host + "&campus=" + campusID);
}
var options = "<option value=''>Choose...</option>";
var optGroup = "";
var jsonString = $.parseJSON(data);
$.each(jsonString, function () {
var value = this['ID'];
var text = this['Name'];
var degree = this['Degree'];
if (optGroup != degree) {
if (optGroup != "") {
options += "</optgroup>";
}
optGroup = degree;
options += "<optgroup label='" + optGroup + "'>";
}
options += "<option value='" + value + "'>" + text + "</option>";
});
$('#ballform_program').html(options);
}
function clearProgram() {
if ($('#ballform_program').length > 0) {
$('#ballform_program')
.find('option')
.remove()
.end()
.append('<option value="">Choose a Campus First</option>');
$('#ballform_program')
.find('optgroup')
.remove()
.end();
}
}
function getSearch() {
var work = "", output = "";
var start = 0, length = 0;
work = document.referrer;
start = work.indexOf("q=") + 2;
work = work.substring(start);
length = work.indexOf("&");
if (length == -1) {
output = work;
} else {
output = work.substring(0, length);
}
return output;
}
function firstField(object1, object2) {
var o1Exists, o1, o1Pos;
var o2Exists, o2, o2Pos;
var value = "";
//check for existence
o1Exists = ($(object1).length);
o2Exists = ($(object2).length);
if (!o1Exists && !o2Exists) {
value = "";
} else if (o1Exists && !o2Exists) {
value = object1;
} else if (!o1Exists && o2Exists) {
value = object2;
} else {
try {
o1 = $(object1);
o2 = $(object2);
o1Pos = o1.position();
o2Pos = o2.position();
if (o1Pos.top < o2Pos.top) {
value = object1;
} else {
value = object2;
}
} catch (err) {
value = object1;
alert(err);
}
}
return value;
}
//-->
</script>
Anyone have a fix possibility here that doesn't involve rewriting the entire "working" script? Thank you so much!
#epascarello pointed out in the comments that I could try swapping:
$('#ballform_campuslocation').html(options);
with:
$('#ballform_campuslocation').append(options);
and, for this scenario, it worked! Thanks again.
I don't have all that much experience with Prototype and I've been working with jQuery to get things working properly on our site found here. Today I've added a jQuery based script for session handling. The problem I'm having is that even though I've gotten so far today in terms of functionality, I can't seem to get the change event fired via jQuery.
I'm using the following code currently, but it isn't working properly (you can test it on the site.. as soon as you change the year using your mouse, the AJAX is triggered and a Make can be selected)...
var yearSelected = jQuery.jStorage.get("yearSelected");
console.log(yearSelected);
// Set the vars...
if ((jQuery("div.amfinder-horizontal td:nth-child(1) select").val() == "0")) {
jQuery("div.amfinder-horizontal td:nth-child(1) select option").each(function() { this.selected = (this.text == "2003"); });
jQuery("div.amfinder-horizontal td:nth-child(1) select").trigger('change');
console.log('Set the year!');
}
The following code is the Prototype script controlling this and I need to fire off the change event, and would love to do it via jQuery if at all possible.
var amFinder = new Class.create();
amFinder.prototype = {
initialize: function(containerId, ajaxUrl, loadingText, isNeedLast, autoSubmit)
{
this.containerId = containerId;
this.ajaxUrl = ajaxUrl;
this.autoSubmit = Number(autoSubmit);
this.loadingText = loadingText;
this.isNeedLast = Number(isNeedLast);
this.selects = new Array();
//possible bug if select order in the HTML will be different
$$('#' + this.containerId + ' select').each(function(select){
select.observe('change', this.onChange.bindAsEventListener(this));
this.selects[this.selects.length] = select;
}.bind(this));
},
onChange: function(event)
{
var select = Event.element(event);
var parentId = select.value;
var dropdownId = 0;
/* should load next element's options only if current is not the last one */
for (var i = 0; i < this.selects.length; i++){
if (this.selects[i].id == select.id && i != this.selects.length-1){
var selectToReload = this.selects[i + 1];
if (selectToReload){
dropdownId = selectToReload.id.substr(selectToReload.id.search('--') + 2);
}
break;
}
}
this.clearAllBelow(select);
if (0 != parentId && dropdownId){
var postData = 'dropdown_id=' + dropdownId + '&parent_id=' + parentId;
new Ajax.Request(this.ajaxUrl, {
method: 'post',
postBody : postData,
evalJSON : 'force',
onLoading: function(){
this.showLoading(selectToReload);
}.bind(this),
onSuccess: function(transport) {
if (transport.responseJSON){
this.clearSelectOptions(selectToReload);
var itemsFound = false;
transport.responseJSON.each(function(item){
itemsFound = true;
var option = document.createElement('option');
option.value = item.value;
option.text = item.label;
option.label = item.label;
$(selectToReload).appendChild(option);
});
if (itemsFound){
$(selectToReload).disabled = false;
}
}
}.bind(this)
});
}
},
isLast: function(select)
{
return (this.selects[this.selects.length-1].id == select.id);
},
isFirst: function(select)
{
return (this.selects[0].id == select.id);
},
clearSelectOptions: function(select)
{
$(select).descendants().each(function(option){
option.remove();
});
},
clearAllBelow: function(select)
{
var startClearing = false;
for (var i = 0; i < this.selects.length; i++){
if (startClearing){
this.clearSelectOptions(this.selects[i]);
$(this.selects[i]).disabled = true;
}
if (this.selects[i].id == select.id){
startClearing = true;
}
}
var type = (((this.isLast(select) && !this.isNeedLast) && select.value > 0) || ((this.isNeedLast) && ((select.value > 0) || (!this.isFirst(select))))) ? 'block' : 'none';
if ('block' == type && this.autoSubmit && this.isLast(select))
{
$$('#' + this.containerId + ' .amfinder-buttons button')[0].form.submit();
} else {
$$('#' + this.containerId + ' .amfinder-buttons')[0].style.display = type;
}
},
showLoading: function(selectToReload)
{
var option = document.createElement('option');
option.value = 0;
option.text = this.loadingText;
option.label = this.loadingText;
$(selectToReload).appendChild(option);
},
};
I had the same problem. Here is solution. When you create : amfinder-horizontal the html goes something like this
<div class="amfinder-horizontal" id="amfinder_5333ffb212b09Container">
...
</div>
Look at id element : amfinder_5333ffb212b09 Container, bold part is also the name of variable that is amfinder object (created from prototype). It's a random name. This is from the extension source :
<?php $finderId = 'amfinder_' . uniqid(); ?>
...
<script type="text/javascript">
var <?php echo $finderId ?> = new amFinder(
'<?php echo $finderId ?>Container',
'<?php echo $this->getAjaxUrl() ?>',
'<?php echo $this->__('Loading...')?>',
'<?php echo Mage::getStoreConfig('amfinder/general/partial_search')?>',
<?php echo intval(Mage::getStoreConfig('amfinder/general/auto_submit')) ?>
);
</script>
So on every page refresh there is different name. var <?php echo $finderId ?>
Steps :
// Find the name for amfinder object.
var objName = jQuery("div.amfinder-horizontal").attr('id').replace('Container','');
// set Value to that select - copied from your code
jQuery("div.amfinder-horizontal td:nth-child(1) select option").each(function() { this.selected = (this.text == "2003"); });
// call the change event of that object
var targetObj = {
target : jQuery("div.amfinder-horizontal td:nth-child(1) select")[0]
};
window[objName].onChange(targetObj);
Another angularJS question i have scope binding a click that should add one value on the first click ad another value on the second click but it just keeps returning and empty array and filling the first value again why? :
scope.dbclickalert = function (scope, $watch) {
var getCheckInDate = this.cellData.date;
var formatcheckindate = new Date(getCheckInDate);
var checkingdates = [];
var curr_datecell = formatcheckindate.getDate();
var padded_day = (curr_datecell < 10) ? '0' + curr_datecell : curr_datecell;
var curr_monthcell = formatcheckindate.getMonth() + 1;
var padded_month = (curr_monthcell < 10) ? '0' + curr_monthcell : curr_monthcell;
var curr_yearcell = formatcheckindate.getFullYear();
var date_stringcell = + padded_month + "/" + padded_day + "/" + curr_yearcell;
var checkindatestrg = "checkindate";
console.log(checkingdates.length);
if (checkingdates.length < 2) {
alert("element exists in array");
checkingdates.push('checkoutdate');
checkingdates.push(date_stringcell);
console.log(checkingdates + checkingdates.length);
} else {
checkingdates.push('checkindate');
checkingdates.push(date_stringcell);
}
var setCheckInDate = el.hasClass('checkInDate');
if (checkingdates === true) {
alert('You have allready set your check In Date');
} else {
el.addClass('checkInDate');
$('#checkoutbar').addClass('datePickerchecout');
}
$(".date-cell").each(function removeclasses() {
$(this).removeClass('true');
});
return getCheckInDate;
};
ok so when i declare this outside of the function i get undefined error:
scope.checkingdates = [];
scope.dbclickalert = function(scope, $watch){
var getCheckInDate = this.cellData.date;
var formatcheckindate = new Date(getCheckInDate);
var checkingdates = scope.checkingdates;
var curr_datecell = formatcheckindate.getDate();
var padded_day = (curr_datecell < 10) ? '0'+curr_datecell : curr_datecell;
var curr_monthcell = formatcheckindate.getMonth() + 1;
var padded_month = (curr_monthcell < 10) ? '0'+curr_monthcell : curr_monthcell;
var curr_yearcell = formatcheckindate.getFullYear();
var date_stringcell = + padded_month + "/" + padded_day + "/" + curr_yearcell;
var checkindatestrg = "checkindate";
console.log(checkingdates.length);
if (checkingdates.length < 2){
alert("element exists in array");
checkingdates.push('checkoutdate');
checkingdates.push(date_stringcell);
console.log(checkingdates+checkingdates.length);
}else{
checkingdates.push('checkindate');
checkingdates.push(date_stringcell);
}
var setCheckInDate = el.hasClass('checkInDate');
if (checkingdates === true){
alert('You have allready set your check In Date');
} else{
el.addClass('checkInDate');
$('#checkoutbar').addClass('datePickerchecout');
}
$(".date-cell").each(function removeclasses() {
$(this).removeClass('true');
});
return getCheckInDate;
};
ok in the third version of this it the same data "the date" again if the same div has been clicked but not if a second div with the same ng-click="dbclickalert()" is clicked why?
link: function(scope, el, attributes, dateSheetCtrl, $watch) {
scope.checkingdatesarry = [];
scope.dbclickalert = function(){
var getCheckInDate = this.cellData.date;
var formatcheckindate = new Date(getCheckInDate);
var checkingdates = scope.checkingdates;
var curr_datecell = formatcheckindate.getDate();
var padded_day = (curr_datecell < 10) ? '0'+curr_datecell : curr_datecell;
var curr_monthcell = formatcheckindate.getMonth() + 1;
var padded_month = (curr_monthcell < 10) ? '0'+curr_monthcell : curr_monthcell;
var curr_yearcell = formatcheckindate.getFullYear();
var date_stringcell = + padded_month + "/" + padded_day + "/" + curr_yearcell;
var checkindatestrg = "checkindate";
var checkoutdatestrg = "checkoutdate";
if( $.inArray('checkindate', scope.checkingdates) !== -1 ) {
scope.checkingdatesarry.push(checkoutdatestrg);
scope.checkingdatesarry.push(date_stringcell);
console.log(scope.checkingdatesarry + scope.checkingdatesarry.length);
}
else{
scope.checkingdatesarry.push(checkindatestrg);
scope.checkingdatesarry.push(date_stringcell);
console.log(scope.checkingdatesarry + scope.checkingdatesarry.length);
}
var setCheckInDate = el.hasClass('checkInDate');
if (scope.checkingdates === true){
alert('You have allready set your check In Date');
} else{
el.addClass('checkInDate');
$('#checkoutbar').addClass('datePickerchecout');
}
$(".date-cell").each(function removeclasses() {
$(this).removeClass('true');
});
return scope.checkingdatesarry;
};
ok for anyone that cares the answer was that because my div's where being created with a angularJS directive it was returning and array per div instead of one global array I have taken the array all the way out of the directive and moved it into a service and it works fine.
Because you redefined the array with empty list in the dbclickalert action. So every time when the action is triggered, the array will be empty.
var checkingdates = [];
You should move it outside the function and declare as
$scope.checkingdates = []; //In your code, you may use scope.checkingdates = []; if you renamed the $scope when you inject it