Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Location
    Connecticut
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Controlling Display of Image with JS

    I'm currently working with ibm's websphere studio and in a .jsp page I am trying to control the display of an image. My server side program returns up to five session saved fields containing image file names. I need to be able to only display the number of pictures actually passed back to this page. I may get no pictures, or up to 5 picture file names.

    I have tried several (many ) javascripts to try to not display a picture if the saved session field contains an "X". My server side program loads either the field(s) with an actual file name, or "X" if no picture is defined.
    I'm honestly not sure if I running into a websphere problem or my syntax is just not right. I've tried other printed examples and they just plain fail with syntax errors or undefined errors.

    In this first attempt, the picture is displayed, but so are the empty image boxes for those pictures that have an "X" in the picture field value.

    *********example of script # 1 ********************
    <% String hh1 = (String)session.getAttribute("OPIC1");
    f((hh1 !=null) && (hh1 !=" ") && (hh1 != "X ")) { %><IMG border="0" width="200" height="200" src=<%= session.getAttribute("OPIC1") %> >
    <% } %>

    <% String hh2 = (String)session.getAttribute("OPIC2");
    if((hh2 !=null) && (hh2 !=" ") && (hh2 != "X ")) { %><IMG border="0" width="200" height="200" src=<%= session.getAttribute("OPIC2") %> >
    <% } %>

    <% String hh3 = (String)session.getAttribute("OPIC3");
    if((hh3 !=null) && (hh3 !=" ") && (hh3 != "X ")) { %><IMG border="0" width="200" height="200" src=<%= session.getAttribute("OPIC3") %> >
    <% } %>

    ****************************************************

    In the above code, Even though OPIC2 & OPIC3 have "X" as their value, the image boxes still display (emtpy)


    ***************************************************
    Script attempt 2... this fails with missing ';' on the second line...
    Here I'm attempting to determine the lenght of the saved session field, and if it's greater than 2, then display the image.


    <SCRIPT language="javascript" type="text/javascript">
    String hpic1 = (String)session.getAttribute("OPIC1");
    if(hpic1.length > 2){
    document.write("<IMG border='0' src='hpic1' width='200' height='200'>");
    }

    String hpic2 = (String)session.getAttribute("OPIC2");
    if(hpic2.length > 2) {
    document.write("<IMG border='0' src='hpic2' width='200' height='200'>");
    }

    String hpic3 = (String)session.getAttribute("OPIC3");
    if(hpic3.length > 2) {
    document.write("<IMG border='0' src='hpic3' width='200' height='200'>");
    }


    </script>
    ***************************************************

    I appreciate any and all comments adn assistance. This small snippet of code has taken on a life of it's own and I've wasted sooo much time trying to do something I feel should be a snap.. very frustrating...

  • #2
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't know if this is just a typo for the post or not but you say you shouldn't show the pictures if it is "X" but you are testing to see if it is "X " (with a space after the X). That will fail causing the image to be drawn.

    As for the second attempt, while javascript looks similar to java they are completely different languages. There is no type "String" datatype. Everything is "var" and there is no typecasting. Plus I suspect the session object isn't accessible from javascript on the client side.

    Although I don't know much about jsp nor your code, I suspect the first example was close especially since you said it showed the images. The second is not close.

    Looking closer I see that you are using

    session.getAttribute("OPIC1");

    for your test and also for the src attribute. Are you sure that is the attribute that stores the X?

    david_kw

  • #3
    New to the CF scene
    Join Date
    Jan 2007
    Location
    Connecticut
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, my JS newbie status us showing thru.. I see now that IBMs examples are of java embedded in HTML, not JS.. So, I can't use their examples in the </Script> portion of the page. (2nd attempt)..

    As for the X and spaces, I have tried the code with and without the spaces, and it still doesn't work. But now I see that's java, not JS, soo..

    So, let's skip both the examples and see if I can get the code to work using a proper JS <script>

    This is missing something..It says the object does not support the method. I have the hidden fields loaded with the return values from the server side pgm....


    <INPUT type = "hidden" size=50 name="OPIC1" >
    <INPUT type = "hidden" size=50 name="OPIC2" >
    <INPUT type = "hidden" size=50 name="OPIC3" >
    <INPUT type = "hidden" size=50 name="OPIC4" >
    <INPUT type = "hidden" size=50 name="OPIC5" >

    <SCRIPT language="javascript" type="text/javascript">
    var hpic1 = document.getAttribute("OPIC1");
    if(hpic1 != "X"){

    document.write("<IMG border='0' src='hpic1' width='200' height='200'>");
    }

    var hpic2 = document.getAttribute("OPIC2");
    if(hpic2 != "X") {
    document.write("<IMG border='0' src='hpic2' width='200' height='200'>");
    }

    var hpic3 = document.getAttribute("OPIC3");
    if(hpic3 !="X") {
    document.write("<IMG border='0' src='hpic3' width='200' height='200'>");
    }


    </script>

  • #4
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    document does not support the getAttribute() method.

    Try changing

    var hpic1 = document.getAttribute("OPIC1");

    to

    var hpic1 = document.OPIC1;

    for each of the 3 cases.

    david_kw

  • #5
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That still didn't seem right to me so I tried it out and came up with this method.

    Code:
    <form name="f" action="#" onsubmit="return(false);">
      <input type="hidden" name="opic1" />
      <input type="hidden" name="opic2" value="X" /> 
      <input type="hidden" name="opic3" /> 
    </form>
    
    <script type="text/javascript">
    var hpic1 = document.f.opic1;
    if (hpic1 != null && hpic1.value != "X"){
      document.write("<img border='0' src='hpic1.jpg' width='200' height='200'>"); 
    } 
    var hpic2 = document.f.opic2;
    if (hpic2 != null && hpic2.value != "X"){
      document.write("<img border='0' src='hpic2.jpg' width='200' height='200'>"); 
    } 
    var hpic3 = document.f.opic3;
    if (hpic3 != null && hpic3.value != "X"){
      document.write("<img border='0' src='hpic3.jpg' width='200' height='200'>"); 
    } 
    </script>
    david_kw


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •