Re: [Proto-Scripty] Hi, new to group. Having an issue with visible() method. any suggestions?

Jason Westbrook

unread,

Oct 15, 2012, 3:38:50 PM10/15/12

to prototype-s...@googlegroups.com

If $("id") returns null (like in this instance) then the id does not exist on the page

This might be handled better using a class on each of the panels and simply holding which is the open/minimized index that way you don't have to worry about what ids exist

Jason Westbrook | T: 313-799-3770 | jwest...@gmail.com

On Mon, Oct 15, 2012 at 11:15 AM, Peter Sysko <peter...@gmail.com> wrote:

I love prototype and scriptacualous. I don't combine with jquery so i know i am not having a noclonflict headache,
and I am just trying to get the visible() function (http://prototypejs.org/api/element/visible)
to not throw null type error exceptions: here is the function I need to fix, syntactically:
the function creates an associative array to track which of 33 system panels are either open, unopen, or minimized:
(the systems are indexed from 100 to 132)>>

function get_system_states() {
    var k=0; var sys_array = new Array(); var open_div=''; var min_div='';
    for(k=100;k<132;k++){
        open_div = 'system'+k+'';
        min_div = open_div+'_minimized';
        if ($(open_div).visible()==true) {
        sys_array[k] = "o"; // o = open
        }
        if ($(min_div).visible()==true) {
        sys_array[k] = "m"; // m = minimized
        }
        if (($(open_div).visible()==false)&&($(min_div).visible()==false)) {
        sys_array[k] = "c";    // u = unopen
        }
    }
return sys_array;
}

Javscript console error says :

Uncaught TypeError: Cannot call method 'visible' of null

the first IF statement in the for loop is throwing the exception, but I assume I am not assigning the div values correctly?
i have found no answers in this group from a text search and from a general google search.
is this a single quotation reference? my div id's are dynamically written in php codeignite, which shouldnt really matter.

any suggestions for how to properly get the visibility of each div in each current state?
thanks!!
-pete

--
You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.
To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/s8MPSAK2FwMJ.
To post to this group, send email to prototype-s...@googlegroups.com.
To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.

Message has been deleted

Peter Sysko

unread,

Oct 15, 2012, 7:32:18 PM10/15/12

to prototype-s...@googlegroups.com

Thanks for the suggestion, Jason. Most people don't run into this problem because they do not deal with dynamically assigned div ids from javascript variables. I found for what i am doing it was the most efficient way to go about referencing the divs. otherwise, switch statements with 33 cases would have to do, and that was pretty intensive.

It does appear that the $(element) wrapper doesn't play nice at all with javascript variables, you actually have to put the quotes exactly as they appear on the div. (unless I am still doing it wrong).. i tried .toString functions, parseInt's, double quotes, single quotes, with and without the $wrapers, etc.. and finally I looked into the prototype.js script and the visible method is really simple, just checks if the display: property of the style attribute is set to none and returns a boolean value, so the workaround is to get the element with the document.getElementbyID (which does work fine with javasscript variable as the ID), and do the conditional statement custom. In the process of researching this bug I made a series of alternative functions as a different way to skin the cat. Currently they keep track of which systems are closed, minimized or unopen with some innerHTML in a hidden div that references the index (100-133) with the letter U, M or O, then rewrites the entire string when it changes.
the initial div looks like this: (all systems unopened):

<div id="mb_system_state_references" style="display:none;">100=U:101=U:102=U:103=U:104=U:105=U:106=U:107=U:108=U:109=U:110=U:111=U:112=U:113=U:114=U:115=U:116=U:117=U:118=U:119=U:120=U:121=U:122=U:123=U:124=U:125=U:126=U:127=U:128=U:129=U:130=U:131=U:132=U</div>

I have got half of the functions working, you can see what I am working on here: http://monkeypanel.com/demo

Jason Westbrook

unread,

Oct 15, 2012, 7:54:13 PM10/15/12

to prototype-s...@googlegroups.com

I've never had a problem with putting variables into the $() function

but I do have a suggestion for keeping your open/minimized/closed panels straight

try declaring a global array or hash and using that as the status variable - all the javascript functions can use it natively and you don't have to do the expensive splitting every time you want to know what panels are open

example

var panels = new Hash({"system100" : "M", "system101":"U"}); //etc

//then

panels.get("system"+id);

//or

panels.set("system"+id,"U");

you can even initialize it easily

for(var t = 100 ; t <= 132 ; t++)

{

panels.set("system"+t,"U");

}

Jason Westbrook | T: 313-799-3770 | jwest...@gmail.com

--
You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.

To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/OHJUzayk4UAJ.

Peter Sysko

unread,

Oct 15, 2012, 8:25:51 PM10/15/12

to prototype-s...@googlegroups.com

whoa i had no idea you could do that with javascript array. i just didn't think the data persistence was possible, even if the window was still open. but it makes perfect sense, and much simpler than what i'm doing now. I will have to give it a shot tomorrow, thank you!

Jason Westbrook

unread,

Oct 15, 2012, 8:28:18 PM10/15/12

to prototype-s...@googlegroups.com

to be clear - the example I put is not a javascript array but a Prototype Hash

you should be able to do the same thing with a javascript array though

Jason Westbrook | T: 313-799-3770 | jwest...@gmail.com

--
You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.

To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/dodF3TNhKR0J.

Peter Sysko

unread,

Oct 15, 2012, 9:44:34 PM10/15/12

to prototype-s...@googlegroups.com

right, i found it: http://api.prototypejs.org/language/dollar-H/
i am used to the idea of assuming zero data persistence in a runtime environment
so i'm not sure how this works outside the function scope. in php you have to serialize variables,
use a global or superglobal array, use database, files, etc. on a client im used to seeing cookies
being used, I am just wondering what the scope limit of this use is, as i am used to treating
javacsript variables scope at function level only, passing them being required with get and setter methods
I'll try the $H idea and see how it works. Thanks again

Message has been deleted

Peter Sysko

unread,

Oct 15, 2012, 10:00:01 PM10/15/12

to prototype-s...@googlegroups.com

for what its worth, these are some the handler functions I have created.
the logic is fine, but your suggestion is much less work, it seems,
and there are a few bugs which i commented out. there are other functions
which will utilize the current state of system panels, namely opening a module
that is in a system panel that is not currently open, requires first opening the panel via ajax.updater
i am not an expert in JS, its not very intuitive for me.

function get_system_states() {
    var ref = document.getElementById('mb_system_state_references');
    var systemz = [];
    systemz = ref.innerHTML.split(":",33);
    // innerHTML default state reference (U=Unopen, O=Open, M=Minimized) :>
    //100=U:101=U:102=U:103=U:104=U:105=U:106=U:107=U:108=U:109=U:
    //110=U:111=U:112=U:113=U:114=U:115=U:116=U:117=U:118=U:119=U:
    //120=U:121=U:122=U:123=U:124=U:125=U:126=U:127=U:128=U:129=U:
    //130=U:131=U:132=U
    var mb_statez = [];
    for(k=100;k<133;k++) {
        var n = k-100; // system 100 should be index 0, system 132 should be index 32
        var sys_string = systemz[n];
        var system_statez = sys_string.split("=",2);
        var state = system_statez[1]; // index 0 should be the system number, index 1 is the letter U, M or O
        mb_statez[n] = state;
    } // end loop
    return mb_statez;
} // end function

function get_system_state(system_index) {
    system_index+='';
    var s = get_system_states();
     var n = (parseInt(system_index)-100);
     return s[n];
}

function set_system_state(system_index,new_state){
    var s = []; s=get_system_states(); var n = 0;
    system_index+=''; var new_ref_string="";
    //alert('setting new system state: '+new_state);
         for(k=100;k<133;k++) { n = k-100;
            //if not the setting we are setting, write its current state
            if ((system_index)==k.toString()) {
            new_ref_string+=k+'='+new_state;
            } else { // else, write the new one
             new_ref_string+=k+'='+s[n];
            } // end else
            new_ref_string+=":";
        } // end for loop
    document.getElementById('mb_system_state_references').innerHTML=new_ref_string;
    //alert('writing new innerHTML as: '+new_ref_string);
return false;
} // function

function minimize_mb_system(system_index) {
    //if (get_system_state(system_index)=="M")
         //    {
                system_index+='';
                var sp_div_id = 'system'+system_index+'';
                var min_div_id = 'system'+system_index+'_minimized';
                Effect.SwitchOff(sp_div_id);
                Effect.Appear(min_div_id);
                set_system_state(system_index,"M");
                return false;
        //    }
    //    else { var warning = "system display state is already minimized. did not collapse."; return warning; }
}
function restore_mb_system(system_index) {
    //if (get_system_state(system_index)=="O")
         //    {
                system_index+='';
                var sp_div_id = 'system'+system_index;
                var min_div_id = 'system'+system_index+'_minimized';
                Effect.Appear(''+sp_div_id+'');
                Effect.SwitchOff(''+min_div_id+'');
                set_system_state(system_index,"O");
                return false;
        //    }
    //    else { var warning = "system display state is already open. did not restore."; return warning; }
}

Dave Kibble

unread,

Oct 16, 2012, 1:29:26 AM10/16/12

to prototype-s...@googlegroups.com

To answer your OP directly (not sure if it has been, I didn't notice it).

open_div = 'system'+k+'';
...
if ($(open_div).visible()==true) {

if there is no item with id 'system'+k then $(open_div) returns null
(correctly) and so $(open_div).visible() throws an error. (for example
if nothing has "id='system123'" then when k-123 the error wiil throw)

You can avoid it with:

if ($(open_div)) {
if ($(open_div).visible()==true) {

Dave

Peter Sysko

unread,

Oct 18, 2012, 1:33:47 PM10/18/12

to prototype-s...@googlegroups.com, DaveK...@gmail.com

Thanks Dave, I'm still not sure why my visible() comparison wrapper was registering as null when i originally first attempted to perform the functions, because that looks something like what I first tried.

Thanks again to Jason suggestions to use a Hash, I have since modified the interface to utilize two hashes, one for the systems, and one for the 8 modules of each system. the relatively stable navigational interface is working mostly how I want it now. http://monkeypanelcom/demo

Sm:)e

Peter Sysko

unread,

Oct 18, 2012, 1:35:45 PM10/18/12

to prototype-s...@googlegroups.com, DaveK...@gmail.com

http://monkeypanel.com/demo <<oops.. a dot usually works before the 'com' hehe

Reply all

Reply to author

Forward