-1

Okay, so I have read several other answers on here regarding querySelectorAll and getElementsByClassName and none work.

Here is the HTML:

<input class="date_input" autocomplete="off" type="text" name="aai_funded_date_c" id="aai_funded_date_c" value="11/26/2015" title="" tabindex="0" size="11" maxlength="10">
<img src="themes/SuiteR/images/jscalendar.gif?v=TYz8pPCJ_YWjY6_eaNf7xg" alt="Enter Date" style="position:relative; top:6px" border="0" id="aai_funded_date_c_trigger">

Then to the right when you click on the calendar button, if you click on that the html brought up is:

<div class="yui-calcontainer single" id="aai_funded_date_c_trigger_div">
    <table cellspacing="0" class="yui-calendar y2015" id=
    "aai_funded_date_c_trigger_div_t">
        <thead>
            <tr>
                <th class="calhead" colspan="7">
                    <div class="calheader">
                        <a class="calnavleft" href="#">Previous Month
                        (October 2015)</a> <a class="calnav" href=
                        "#">November 2015</a> <a class="calnavright" href=
                        "#">Next Month (December 2015)</a>
                    </div>
                </th>
            </tr>
            <tr class="calweekdayrow">
                <th class="calweekdaycell">Sun</th>
                <th class="calweekdaycell">Mon</th>
                <th class="calweekdaycell">Tue</th>
                <th class="calweekdaycell">Wed</th>
                <th class="calweekdaycell">Thu</th>
                <th class="calweekdaycell">Fri</th>
                <th class="calweekdaycell">Sat</th>
            </tr>
        </thead>
        <tbody class="m11 calbody">
            <tr class="w45">
                <td class=
                "calcell wd0 d1 selectable calcelltop calcellleft" id=
                "aai_funded_date_c_trigger_div_t_cell0">
                    <a class="selector" href="#">1</a>
                </td>
                <td class="calcell wd1 d2 selectable calcelltop" id=
                "aai_funded_date_c_trigger_div_t_cell1">
                    <a class="selector" href="#">2</a>
                </td>
                <td class="calcell wd2 d3 selectable calcelltop" id=
                "aai_funded_date_c_trigger_div_t_cell2">
                    <a class="selector" href="#">3</a>
                </td>
                <td class="calcell wd3 d4 selectable calcelltop" id=
                "aai_funded_date_c_trigger_div_t_cell3">
                    <a class="selector" href="#">4</a>
                </td>
                <td class="calcell wd4 d5 selectable calcelltop" id=
                "aai_funded_date_c_trigger_div_t_cell4">
                    <a class="selector" href="#">5</a>
                </td>
                <td class="calcell wd5 d6 selectable calcelltop" id=
                "aai_funded_date_c_trigger_div_t_cell5">
                    <a class="selector" href="#">6</a>
                </td>
                <td class=
                "calcell wd6 d7 selectable calcelltop calcellright" id=
                "aai_funded_date_c_trigger_div_t_cell6">
                    <a class="selector" href="#">7</a>
                </td>
            </tr>
            <tr class="w46">
                <td class="calcell wd0 d8 selectable calcellleft" id=
                "aai_funded_date_c_trigger_div_t_cell7">
                    <a class="selector" href="#">8</a>
                </td>
                <td class="calcell wd1 d9 selectable" id=
                "aai_funded_date_c_trigger_div_t_cell8">
                    <a class="selector" href="#">9</a>
                </td>
                <td class="calcell wd2 d10 selectable" id=
                "aai_funded_date_c_trigger_div_t_cell9">
                    <a class="selector" href="#">10</a>
                </td>
                <td class="calcell wd3 d11 selectable" id=
                "aai_funded_date_c_trigger_div_t_cell10">
                    <a class="selector" href="#">11</a>
                </td>
                <td class="calcell wd4 d12 selected selectable" id=
                "aai_funded_date_c_trigger_div_t_cell11">
                    <a class="selector" href="#">12</a>
                </td>
                <td class="calcell wd5 d13 selectable" id=
                "aai_funded_date_c_trigger_div_t_cell12">
                    <a class="selector" href="#">13</a>
                </td>
                <td class="calcell wd6 d14 selectable calcellright" id=
                "aai_funded_date_c_trigger_div_t_cell13">
                    <a class="selector" href="#">14</a>
                </td>
            </tr>
            <tr class="w47">
                <td class="calcell wd0 d15 selectable calcellleft" id=
                "aai_funded_date_c_trigger_div_t_cell14">
                    <a class="selector" href="#">15</a>
                </td>
                <td class="calcell wd1 d16 selectable" id=
                "aai_funded_date_c_trigger_div_t_cell15">
                    <a class="selector" href="#">16</a>
                </td>
                <td class="calcell wd2 d17 selectable" id=
                "aai_funded_date_c_trigger_div_t_cell16">
                    <a class="selector" href="#">17</a>
                </td>
                <td class="calcell wd3 d18 selectable" id=
                "aai_funded_date_c_trigger_div_t_cell17">
                    <a class="selector" href="#">18</a>
                </td>
                <td class="calcell wd4 d19 selectable" id=
                "aai_funded_date_c_trigger_div_t_cell18">
                    <a class="selector" href="#">19</a>
                </td>
                <td class="calcell wd5 d20 today selectable" id=
                "aai_funded_date_c_trigger_div_t_cell19">
                    <a class="selector" href="#">20</a>
                </td>
                <td class="calcell wd6 d21 selectable calcellright" id=
                "aai_funded_date_c_trigger_div_t_cell20">
                    <a class="selector" href="#">21</a>
                </td>
            </tr>
            <tr class="w48">
                <td class="calcell wd0 d22 selectable calcellleft" id=
                "aai_funded_date_c_trigger_div_t_cell21">
                    <a class="selector" href="#">22</a>
                </td>
                <td class="calcell wd1 d23 selectable" id=
                "aai_funded_date_c_trigger_div_t_cell22">
                    <a class="selector" href="#">23</a>
                </td>
                <td class="calcell wd2 d24 selectable" id=
                "aai_funded_date_c_trigger_div_t_cell23">
                    <a class="selector" href="#">24</a>
                </td>
                <td class="calcell wd3 d25 selectable" id=
                "aai_funded_date_c_trigger_div_t_cell24">
                    <a class="selector" href="#">25</a>
                </td>
                <td class="calcell wd4 d26 selectable" id=
                "aai_funded_date_c_trigger_div_t_cell25">
                    <a class="selector" href="#">26</a>
                </td>
                <td class="calcell wd5 d27 selectable" id=
                "aai_funded_date_c_trigger_div_t_cell26">
                    <a class="selector" href="#">27</a>
                </td>
                <td class="calcell wd6 d28 selectable calcellright" id=
                "aai_funded_date_c_trigger_div_t_cell27">
                    <a class="selector" href="#">28</a>
                </td>
            </tr>
            <tr class="w49">
                <td class=
                "calcell wd0 d29 selectable calcellleft calcellbottom" id=
                "aai_funded_date_c_trigger_div_t_cell28">
                    <a class="selector" href="#">29</a>
                </td>
                <td class="calcell wd1 d30 selectable calcellbottom" id=
                "aai_funded_date_c_trigger_div_t_cell29">
                    <a class="selector" href="#">30</a>
                </td>
                <td class="calcell oom calcellbottom" id=
                "aai_funded_date_c_trigger_div_t_cell30">1</td>
                <td class="calcell oom calcellbottom" id=
                "aai_funded_date_c_trigger_div_t_cell31">2</td>
                <td class="calcell oom calcellbottom" id=
                "aai_funded_date_c_trigger_div_t_cell32">3</td>
                <td class="calcell oom calcellbottom" id=
                "aai_funded_date_c_trigger_div_t_cell33">4</td>
                <td class="calcell oom calcellright calcellbottom" id=
                "aai_funded_date_c_trigger_div_t_cell34">5</td>
            </tr>
        </tbody>
    </table>
</div>

Then here is my function I am calling to the page:

function dateChange(control_date, calc_date, return_date) {
    var date1 = new Date($('#' + control_date).html());
    var date2 = new Date($('#' + calc_date).val());
    var timeDiff = Math.abs(date2.getTime() - date1.getTime());
    var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
    $('#' + return_date).val(diffDays);
}
var text = "";
var i;
for (i = 0; i <= 34; i++) {
    text += $("#aai_funded_date_c_trigger_div_t_cell" + i).on("click", function () {
        dateChange('date_entered', 'aai_funded_date_c', 'final_day_count_to_funding_c');
    });
}

I call .html() because the field generated is simply text and doesn't have a date value. I already know the function works correctly, and I can call a .on("click") event to the actual field. But selecting a field in the calendar isn't working.

What I am REALLY trying to accomplish is that when the value of that field is changed, the function would activate. The problem I ran into was that .val() doesn't trigger .change() in jquery. So I tried to do this instead. I have also tried selecting the class name instead using querySelectorAll and getElementsByClassName, but it always says they aren't functions in the console.

Community
  • 1
  • 1
Josh Whitlow
  • 481
  • 6
  • 25

2 Answers2

0

If you want to have on change trigger with .val() just do it manually.

Attach your onchange.

$('#someId').on('change',
    function () {
        // do something
    }
);

Then immediately after you update your value with .val() manually trigger it:

$('#someId').val('someValue')
$('#someId').trigger('change');

As for querySelectorAll and getElementsByClassName not working it seems whatever you are trying to call those on are not the document or not a proper element node but since your code doesn't show that I can only guess.

AtheistP3ace
  • 9,611
  • 12
  • 43
  • 43
0

Maybe not the best solution, but here was my final solution:

$('#content').on("mouseover", function(){
                        var date1 = new Date($('#date_entered').html());
                        var date2 = new Date($('#aai_funded_date_c').val());
                        var timeDiff = Math.abs(date2.getTime() - date1.getTime());
                        var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); 

                        $('#final_day_count_to_funding_c').val(diffDays);
                        });

I decided to forget the calendar, and the moment they move their mouse around the body of the page after selecting a date, the function triggers.

Josh Whitlow
  • 481
  • 6
  • 25