How do I keep these two scripts from stepping on one another?

Head out to http://www.brucegust.com/portfolio/verizon/index_static.php#

There are two ways that you can hide and show the different events on the calendar. One is by using the little keyboard on the left, the other is the list of states that show up when you click on the number to the right of each month.

The problem is this: While for the most part, everything works well, on occasion, you'll click on a "calendar" (which is a series of regions that potentially include a number of states) and when you go to click on a state, because of the "queue" that I've got set up, the resulting collection of layers doesn't make sense.

So what I need to do is figure out how to ensure that every time my user clicks on a region on the keyboard, whatever "queue" has been cached has been reset so it's as if the page has been reloaded.

In other words, these functions:

function SCTL()
{
      queue.SCTL=true;
      queue.SCTL_long=true;
      
      $("Arkansas,.Florida,.Georgia,.Kentucky,.Louisiana,.Mississippi,.North Carolina,.Oklahoma,.South Carolina,.Tennessee,.Texas").show();
      $(".CATN,.FL,.CTX,.HGC,.GAAL,.AREA,.ALU,.ERC,.DEVICE, .CATN_long,.FL_long,.CTX_long,.HGC_long,.GAAL_long,.AREA_long,.ALU_long,.ERC_long,.DEVICE_long").hide();

      for( var state in queue)
      {
         $("." + state).show();
      }
      
return true;
}

...will sometimes prove problematic if the user has been hiding and showing various regions using the keyboard. I believe it's because the "queue" is storing certain "show" values and I need to make sure that doesn't happen.

You'll see how I solved my "calendar" problem by including "$(".CATN,.FL,.CTX,.HGC,.GAAL,.SCTL,.ALU,.ERC,.DEVICE, .CATN_long,.FL_long,.CTX_long,.HGC_long,.GAAL_long,.SCTL_long,.ALU_long,.ERCLong,.DEVICE_long").hide();" in every state function. This guarantees a clean starting point, as far as the various regions' visibility.

But I can't figure out how to ensure the same kind of clean slate when my user is working with the regions and as a result, sometimes certain states aren't showing up when their corresponding region has been clicked.

What do you think?
Bruce GustPHP DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
Without even looking at your code, I know that you need a state machine. A fancy name for creating logic in your code that represents a flowchart.  In fact, you should flowchart the logic on paper, if you haven't already as a reference.

I do find this easiest with a view model like knockout or angular. Have a quick look at my article: http://www.experts-exchange.com/articles/18468/Introducing-the-Knockout-JavaScript-Framework-MVVM.html

I'll also look into your code but interested top hear what you think about the state machine.
dameyCommented:
This is a bubble issue or propagation issue:
In your event (assuming a onClick event you have to stop other controls from accepting the event which "bubbles" up through all controls.
The following should work for you:

In the Microsoft model you can set it for the entire page once using:
window.event.cancelBubble = true

In the W3C model you must call the event’s stopPropagation() method.

e.stopPropagation()

This stops all propagation of the event in the bubbling phase. For a complete cross-browser experience do

...onClick = .... stopPropagation(this.event); yourClickFunction(.....)....

function stopPropagation(e)
{
      if (!e) var e = window.event;
      e.cancelBubble = true;
      if (e.stopPropagation) e.stopPropagation();
}
Bruce GustPHP DeveloperAuthor Commented:
Gentlemen!

Thanks for the feedback! I've come up with a plan after having read your comments and spending some time with my code this am.

I incorporated some "alerts" into my script so I could better see what was going on. The good news is that everything is working exactly as it should. The challenge is accommodate the "queue" variables, especially when going back and forth between the two different options (calendar and states).

What I've decided to do is check to see what's in either "queue" or "the_queue." "the_queue" is the variable in my calendars code, "queue" is what I'm using with my states. The question that I need answered is this:

When I do: alert(JSON.stringify(queue), I get either "{}" or "Alabama=true" etc. I want to simply see if there's anything in the array. I've tried this:

if (queue === 'undefined') {
            alert("nothing");
      }

...and nothing happens. Even when I know there's nothing in "queue," nothing fires.

Even when I try something like:

if(queue.length>0) - nothing happens.

How can I check to see if there are any values in my queue array? If I can get that piece figured out, I believe we'll be poised on the threshold of great things.

Thanks!
hieloCommented:
The object doesn't have a "length" or "size" property.  Given the definition var x = {}; then typeof(x) == 'object' -- meaning that it is defined even though it is empty. Instead of:
var queue={};
queue.SCTL=true;
queue.SCTL_long=true;

Open in new window


create a property for the actual items, and another for you to manage the length:
var queue={'length':0, 'item':{}};

//now add to the 'items' property
queue.item.SCTL=true;
queue.item.SCTL_long=true;

//and update the length
queue.length+=2;

Open in new window


If you want to keep the original var queue={}; (meaning without managing the length manually and resorting to a separate 'item' property) another option would be to create a "static method" for the Object and feed it the queue so that the method crawls through its properties and dynamically figures out how many properties you have added to it:
Object.size=function(item){
    var size = 0;
    for (var key in item) {
        if (item.hasOwnProperty(key)) size++;
    }
    return size;
};

var queue={};
alert( Object.size(queue) );

queue.Florida = true;
queue.Mississippi = true;
alert( Object.size(queue) );

delete queue.Florida;//dot notation
alert( Object.size(queue) );

delete queue["Mississippi"]; // array notation
alert( Object.size(queue) );

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dameyCommented:
How are you generating the the array?
If you generate like this:
var queue = {val1,va2,val3,....} your creating an object not an array so code to check length won't work.
I don't suggest using and object (has no length for keys) for creating an array but you would have to  parse & loop through all the values to get the count.


    for (key in queue ) {
        if (obj.hasOwnProperty(key)){
            i++;
        }
return i;

But if you create with square brackets what you have should work.
var queue = [val1,va2,val3]
var arrcount = queue[0].length // queue == 3
but
var arrcount = queue.length // this would equal 1 because only one array in the creation
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.