Using JQuery to add a link to an element if a condition is met

Question

I am very new to HTML, CSS and JavaScript. I am trying to use jQuery to make a button active or inactive depending on the time of day. I have managed to get the image to change correctly after defining the time now (d), an open time and a close time. However I am having problems assigning a link to the buttons depending on the time of day.

This code correctly applies a class if the time is between open and close. It also correctly applies the link to the ButtonOne div, only when the ManagersChatButtonActive class is applied, in a JSFiddle. However in SharePoint, were this will be, the link is also applied even when the time condition is not met.

How can I get the link to only be applied when the 'if' condition is met?

(This is my first time on Stack Overflow, so apologies if this is not very well laid out or explained).

$(document).ready(function() {
    var d = new Date();
    var open = new Date();
    open.setHours(9);
    open.setMinutes(0);
    open.setSeconds(0);

    var close = new Date();
    close.setHours(18);
    close.setMinutes(0);
    close.setSeconds(0);

    if (d >= open && d < close) {
        $(".ButtonOne").addClass("ManagersChatButtonActive");
        $(".ButtonOne").wrap('<a href="http://www.google.com"/>');
    } else {
        $(".ButtonOne").addClass("ManagersChatButtonInactive");
    }
});

We would need to see what the values of `d`, `open` and `close` are to be able to help you effectively. — Rory McCrossan, Apr 04 '16 at 15:17
Hi Paul, sorry missed that off. I have added it now. Just getting my head around formatting on this site! — Andy Gill, Apr 04 '16 at 15:25
I guess updating `d >= open && d < close` to `+d >= +open && +d < +close` should do the trick. — Rajesh, Apr 04 '16 at 15:33
Hi Hawkeye, I thought I had closed the a tag correctly as a self closing tag. Have I done this wrong? — Andy Gill, Apr 04 '16 at 15:49
I'm starting to think there is nothing fundamentally wrong with the script (other than maybe being a bit clunky), but rather this is a SharePoint issue? The full script along with the CSS and HTML is being put into a Content Editor web part. — Andy Gill, Apr 04 '16 at 15:50
If would be helpful to know how the script is added to the SharePoint page and if the page is using a master page. Also, see: [SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts.](http://sharepoint.stackexchange.com/) — Yogi, Apr 04 '16 at 15:54
Hi Roberto, the page is using a master page, and at the moment I am adding all the script (CSS, JavaScript, JQuery and HTML) into a single Content Editor web part. Once I have things working, I then tend to break them down into separate files referenced from a document library. It is just easier to copy and paste from Notepad++ directly into a Content Editor web part. — Andy Gill, Apr 04 '16 at 16:03
...also I will be sure to look in the SharePoint Stack Exchange site. I am thinking the 'real' problem and solution is with SharePoint. — Andy Gill, Apr 04 '16 at 16:11
Unable to duplicate problem when run in a SharePoint CEWP with code loaded via content url. The problem is mostly likely cause by trying to run the code by pasting it directly into CEWP, i.e.,SharePoint will filter and mangle code. There are multiple other design problems, but those go beyond the scope of the question. — Yogi, Apr 04 '16 at 21:12
Hi Roberto, yes this was the problem. As soon as I split the code into three separate files, referencing the css and js in the html file, and referencing that html file in the CEWP it all worked correctly. — Andy Gill, Apr 05 '16 at 11:32
Thank you everyone who contributed. It seems there was not really a problem with the code (other than being rough, but I don't, currently, know better), but rather the SharePoint CEWP issue. At least I know I am on the right track. Next I need to reconsider how I get the current time (based on your various suggestions), as time zones need to come into the logic next! — Andy Gill, Apr 05 '16 at 11:34

score 2 · Answer 1 · answered Apr 04 '16 at 15:32

Make sure you wrap your method in the JQuery syntax for document on ready or on load as follows:

$(function(){
  var d = new Date()

  var open = new Date();
  open.setHours(9);
  open.setMinutes(0);
  open.setSeconds(0);

  var close = new Date();
  close.setHours(18);
  close.setMinutes(0);
  close.setSeconds(0);

  if (d >= open && d < close) {

    $(".ButtonOne").addClass("ManagersChatButtonActive");
    $(".ButtonOne").wrap('<a href="http://www.google.com"/>');
  } else {
    $(".ButtonOne").addClass("ManagersChatButtonInactive");
  }
})

https://jsfiddle.net/aaronfranco/3xwhoh10/1/

It might also make more sense to use getTime() to use a UNIX timestamp, which is a number, instead of a date string.

$(function(){
  var d = new Date().getTime();

  var open = new Date();
  open.setHours(9);
  open.setMinutes(0);
  open.setSeconds(0);
  open = open.getTime()

  var close = new Date();
  close.setHours(18);
  close.setMinutes(0);
  close.setSeconds(0);
  close = close.getTime()

  if (d >= open && d < close) {

    $(".ButtonOne").addClass("ManagersChatButtonActive");
    $(".ButtonOne").wrap('<a href="http://www.google.com"/>');
  } else {
    $(".ButtonOne").addClass("ManagersChatButtonInactive");
  }
})

Hi Aaron, I did have a $(document).ready(function(){ and appropriate close in my file, I was not sure how much or how little I should add to my example. I have added these lines back in now. It does work in JSFiddle correctly. But when the full text (with the CSS and HTML) is added into a Content Editor web part, the link is present all the time. — Andy Gill, Apr 04 '16 at 15:40
You'll have to post a JSFiddle that reproduces the issue, or add more code with HTML and CSS to show us more clearly. — Aaron Franco, Apr 04 '16 at 15:42
jQuery document ready does not always work as expected within SharePoint environment. See: [SharePoint 2013 add javascript after whole page load](http://stackoverflow.com/questions/16936250/sharepoint-2013-add-javascript-after-whole-page-load) — Yogi, Apr 04 '16 at 15:45

Crix · Answer 2 · 2016-04-04T15:42:36.490

2

Don't forget to get the current time with the getHours or getTime method. You want this to compare to your condition. These values do not have to be in a time-format, it also possible to just use some static numbers.

You can just do something like this:

var time = new Date(),
hours = time.getHours();

if (hours >= 9 && hours < 18) {
  $(".ButtonOne").addClass("ManagersChatButtonActive");
  $(".ButtonOne").wrap('<a href="http://www.google.com"/>');
} else {
  $(".ButtonOne").addClass("ManagersChatButtonInactive");
}

Working example: https://jsfiddle.net/crix/7o4uhLxe/

Hope this helps!

edited Apr 04 '16 at 15:42

answered Apr 04 '16 at 15:37

Crix

86
3

up voted. Though this doesn't solve the problem, it is a noteworthy improvement to the original code. – Yogi Apr 04 '16 at 21:18

score 1 · Answer 3 · answered Apr 04 '16 at 15:51

I checked your code in browser with jQuery, but I don't know about SharePoint, so I guess if you just enclose your code which works fine with jQuery, in .ready() so that when document is ready only then your code is run and when the ".ButtonOne" element is initialized in dom:

$(document).ready(function(){
            var d = new Date();
            var open = new Date();
            open.setHours(9);
            open.setMinutes(0);
            open.setSeconds(0);
            console.info(d);
            console.log(open);
            var close = new Date();
            close.setHours(18);
            close.setMinutes(0);
            close.setSeconds(0);
            console.log(close);
            if (d >= open && d < close) {
                console.info("INSIDE");
                $(".ButtonOne").addClass("ManagersChatButtonActive");
                $(".ButtonOne").wrap('<a href="http://www.google.com"/>');
            } else {
                console.info("INSIDE ELSE");
                $(".ButtonOne").addClass("ManagersChatButtonInactive");
            }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ButtonOne" >
This is the desired ButtonOne Div
</div>

@Andy You can inspect the element for class or open browser console and see the console.log and console.info output for better understanding. — shivgre, Apr 04 '16 at 15:58
Hi shivgre, thank you for your input. I'm getting the same result however. The link remains active even when the 'Inactive' class is applied. But only in SharePoint. — Andy Gill, Apr 04 '16 at 16:00

Using JQuery to add a link to an element if a condition is met

3 Answers3