When I change tokens in my dashboard, why are my searches not updating?

[charliedgz]

I have a custom drop-down list that I made using HTML and CSS and want to update time tokens based on the selection. See below: Don't worry about refactoring, going for functionality first. Now the searches all run on the dashboard when loading up, but if I change the tokens, the searches don't update. What is the missing piece to make this work? Is what I am trying to do possible or do I need to use a proper time range input all the time with the searchWhenChanged=true set?

require([
        "jquery",
        "splunkjs/mvc",
        "splunkjs/mvc/simplexml/ready!"
], function($,mvc) {

        $(document).ready(function(){
                var tokens = mvc.Components.get("default");
                tokens.set("earlyTime", "-60m@m");
                tokens.set("latestTime", "now");

                $(".time").click(function( event ) {
                        $("#showBut").html(event.currentTarget.innerHTML);
                        var tokens = mvc.Components.get("default");
                        if (event.currentTarget.innerHTML == "Last Hour") {
                                tokens.set("earlyTime", "-60m");
                                tokens.set("latestTime", "now");
                        } else if (event.currentTarget.innerHTML == "Last 4 Hours") {
                                tokens.set("earlyTime", "-4h");
                                tokens.set("latestTime", "now");
                        } else if (event.currentTarget.innerHTML == "Last 24 Hours") {
                                tokens.set("earlyTime", "-24h");
                                tokens.set("latestTime", "now");
                        } else if (event.currentTarget.innerHTML == "RT - Last Minute") {
                                tokens.set("earlyTime", "rt-1m");
                                tokens.set("latestTime", "rtnow");
                        } else if (event.currentTarget.innerHTML == "RT - Last Hour") {
                                tokens.set("earlyTime", "rt-60m");
                                tokens.set("latestTime", "rtnow");
                        } else if (event.currentTarget.innerHTML == "RT - 24 From Midnight") {
                                tokens.set("earlyTime", "rt-24h@d");
                                tokens.set("latestTime", "rtnow");
                        }
                        var timeEarly = tokens.get("earlyTime");
                        var timeLate = tokens.get("latestTime");
                        $("#tester").html(timeEarly + " : " + timeLate);
                });
        });
});

[charliedgz · Accepted solution]

Forget it, I found a solution to my problem. I manipulated the DOM to trigger click the global time range picker (hidden on my dashboard) depending on my selection. Much simpler, but I do foresee a problem if I had multiple time range pickers on a single dashboard, then my hack wouldn't work because I search the DOM for data-earliest.

[charliedgz]

So I am looking at adding the change function but unsure how I can reference every search in the dashboard....

defaultTokenModel.on("change:earlyTime", function(updateSearch, SearchManager) {
});

Would I even need to do this because I have this in my dashboard.xml

      <query>index=someCoolShiz</query>
      <earliest>$earlyTime$</earliest>
      <latest>$latestTime$</latest>