title: Appending javascript value to gridview hyperlink. Any ideas why my code doesn't work?
body: <p>We have a javascript that takes start date and end date, calculates the difference between them and stores the value in a variable called hourDiff.</p>
  
  <p>Here is relevant part of the js.</p>
  
  <p>To avoid a scope issue, a gobal variable called hourDiff is defined at top of the javascript outside any function"</p>
  
  <pre><code>var hourDiff = 0;
  
  //Calulate the time difference and store the value in hourDiff
  hourDiff = endDate - startDate;
  </code></pre>
  
  <p>The idea is to eventually appendd hourDiff to the gridview hyperlink control below and pass the name-value pairs as querystring to another page called Reseve.aspx</p>
  
  <pre><code>&lt;asp:HyperLink ID="siteId" class="js_siteid" style="color:#111" runat="server" navigateurl='&lt;%# String.Format("Reserve.aspx?id={0}&amp;groupsize={1}&amp;facilityFees={2}&amp;extrahour={3}&amp;depoitAmt={4}&amp;cancelAmt={5}&amp;keydeptAmt={6}", Eval("siteId"), Eval("capacity"),Eval("RentalFeeAmount"),Eval("ExtraHourAmount"),Eval("DepositAmount"),Eval("CancellationAmount"),Eval("KeyDepositAmount")) %&gt;' Text='Select' /&gt;
  </code></pre>
  
  <p>Since the hyperlink is not exposed to the javascript until <strong>after</strong> search button is clicked, I have another javascript below that is used to apend hourdiff to the hyperlink and passed to another page.</p>
  
  <p>This javascript is placed at the bottom of the html page:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var links = document.getElementsByClassName("js_siteid");
  if ( links.length &gt; 0 )
  {
      links[0].onclick = function() {
          this.href += ( "&amp;hoursdiff=" + hourDiff );
          return true;
      }
  }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  
    &lt;script type="text/javascript"&gt;
                   **var hourDiff = 0;**
                  $(window).load(function () {
                      $("#txtFromDate").datepicker();
                      $('#timeStart').timepicker({ showPeriod: true,
                          onHourShow: OnHourShowCallback,
                          onMinuteShow: OnMinuteShowCallback
                      });
  
                      $("#txtToDate").datepicker();
                      $('#timeEnd').timepicker({ showPeriod: true,
                          onHourShow: OnHourShowCallback,
                          onMinuteShow: OnMinuteShowCallback
                      });
                      function OnHourShowCallback(hour) {
                          if ((hour &gt; 20) || (hour &lt; 6)) {
                              return false; // not valid
                          }
                          return true; // valid
                      }
                      function OnMinuteShowCallback(hour, minute) {
                          if ((hour == 20) &amp;&amp; (minute &gt;= 30)) { return false; } // not valid
                          if ((hour == 6) &amp;&amp; (minute &lt; 30)) { return false; }   // not valid
                          return true;  // valid
                      }
                      $('#btnSearch').on('click', function () {
                          var sDate = $("#txtFromDate").val();
                          var sTime = $("#timeStart").val();
  
                          var eDate = $("#txtToDate").val();
                          var eTime = $("#timeEnd").val();
  
                          var startDate = new Date(sDate + " " + sTime).getHours();
                          var endDate = new Date(eDate + " " + eTime).getHours();
  
                          //Calulate the time difference
                           **hourDiff = endDate - startDate;**
                          //alert(hourDiff);
  
                          //Check if hour difference is less than 4 hours and show the message accordingly
                          if (hourDiff &lt; 4) {
                              var r = false; $($("&lt;div&gt;A mininum of 4 hours is required!&lt;/div&gt;")).dialog({ closeOnEscape: false, resizable: false, modal: true, open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); }, buttons: { Close: function () { r = false; $(this).dialog("close"); } }, close: function () { return r; } });
                              return false;
                          }
  
                          //Add the check condition if the user is above the 4 hours time frame
                          if (hourDiff &gt; 4) {
                              var r = confirm("There may be additional fees for going over the 4 hours!");
                              if (r == true) { // pressed OK
                                  return true;
                              } else { // pressed Cancel
                                  return false;
                              }
                          }
                      });
                  });
          &lt;/script&gt;
  </code></pre>
  
  <p>Each time I compile my code and clic the Select link, hourDiff always displays the value of 0 rather than the difference between start date and end date.</p>
  
  <p>Any ideas what I am doing wrong?</p>
  
  <pre><code>Protected Sub ValidateDuration(ByVal sender As Object, ByVal args As ServerValidateEventArgs)
    Dim validator As Control = DirectCast(sender, Control)
    Dim row As Control = validator.NamingContainer
  
    Dim startHour As Integer = Integer.Parse(DirectCast(row.FindControl("startHour"), DropDownList).SelectedValue)
    Dim startMinutes As Integer = Integer.Parse(DirectCast(row.FindControl("startMinutes"), DropDownList).SelectedValue)
    Dim startAmPm As String = DirectCast(row.FindControl("startAmPm"), DropDownList).SelectedValue
  
    Select Case startAmPm
      Case "AM"
          If startHour = 12 Then
              startHour = 0
          End If
  
      Case "PM"
          If startHour &lt;&gt; 12 Then
              startHour += 12
          End If
  
      Case Else
          args.IsValid = True
          Return
    End Select
  
    Dim endHour As Integer = Integer.Parse(DirectCast(row.FindControl("endHour"), DropDownList).SelectedValue)
    Dim endMinutes As Integer = Integer.Parse(DirectCast(row.FindControl("endMinutes"), DropDownList).SelectedValue)
    Dim endAmPm As String = DirectCast(row.FindControl("endAmPm"), DropDownList).SelectedValue
  
    Select Case endAmPm
      Case "AM"
          If endHour = 12 Then
              endHour = 0
          End If
  
      Case "PM"
          If endHour &lt;&gt; 12 Then
              endHour += 12
          End If
  
      Case Else
          args.IsValid = True
          Return
    End Select
  
    Dim hoursDiff As Integer = endHour - startHour
    If endMinutes &lt; startMinutes Then
      hoursDiff -= 1
    End If
  
    args.IsValid = hoursDiff &gt;= 2
  </code></pre>
  
  <p>End Sub</p>