Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Wanet Telecoms Ltd on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

jsp and javascript 2

Status
Not open for further replies.
heeeep72

heeeep72

Programmer
Dec 15, 2004
33
CH
Hi All,

can anybody help with the following problem?

I have written a jsp page, which works perfectly. I want to show/hide a certain part (the bottom) of the resulting html page on some action from the user (f.e. user pushes a button, or clicks on a link). I want to solve this using JavaScript DIV-s, and I am a newbie.

For example my hide function could be somefin like dis:
----------------------------------------------------------------
Code: 
      function hide( objectId ){
       // W3C & Netscape 6
     if(document.getElementById && document.getElementById(objectId))
	{
          document.getElementById(objectId).style.visibility = "hidden";
          document.getElementById(objectId).style.display = "none";
      shown[objectId] = false ;
         } 
       // browser is IE 4+:
       else if (document.all && document.all(objectId)) {
          document.all(objectId).style.visibility = "hidden" ;
          document.all(objectId).style.display = "none" ;    
      shown[objectId] = false ;
         } 
       // browser is Netscape 4+:
       else if (document.layers && document.layers[objectId]) {
          document.layers[objectId].visibility = "hide" ;
      document.layers[objectId].display = "none" ;
      shown[objectId] = false ;
         }    
       else {
          return false;
         }
    }
----------------------------------------------------------------


then i can use a button somefin like dis:

Code: 
<input type=button name="view" value="hide bottom" onClick="hide( 'divbottom');">

where 'divbottom' is the name of my DIV.



OK so far, but how can i put parts of my jsp into my DIV? When I put that bottom part of my jsp in between

<div id="divbottom" class="showhide">

and

</div>

it stopped working. How can i solve this problem? Can i put lines of my jsp into DIV-s? Any help is appreciated.

thx, heeeeep

 
Sort by date Sort by votes

The best way to trouble shoot this kind of problem is to "view source" using the browser and look at what is actually being returned to the page. If you can't resolve it -- post a copy of the "view source" of the page here. Alternatively you could paste a URL if it was huuuge :)

Jeff

 
Upvote 0 Downvote

That aside, do you REALLY need to support archaic browsers like NN4 and IE4?

If not, you can remove two thirds of your code (all the document.all and document.layers rubbish) and just use standard DOM methods.

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
Thanks for your answers! Though I still dont know the answer to my main question: can i use some lines of jsp inside a javascript div?? (i mean that if i hide that div, then the page elements created by those lines of jsp will disappear from my resulting html page as well? ) Or in what way should i solve this rather easy task? (user clicks on a button or something -> user sees some lines, user clicks again -> he does not see those lines)

I made a little test with the above problem:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<table><tr><td>
<div>
<span onClick="ShowTest('test')">Hidden Information:</span>
<div id="test" style="display:none;">
This line appears when i click on the text Hidden Information
<tr><td>this is always seen</td></tr>
</div>
</div>
</td></tr></table>
<SCRIPT LANGUAGE = "JavaScript">
<!--
/* Shows test  */
    function ShowTest(test) {
    document.getElementById('test').style.display = "block";
    }
//stop hiding -->
</SCRIPT>
</body>
</html>

I always see the line in between the <tr><td> </td></tr>-s on my resulting page, regardless of clicking on the text or not. So this is my problem.

I took my source code example in my previous post (function hide ( objectId ) - see above) from a newsgroup, so probably that is the reason for making some old fashioned chekings there for different browsers. What is DOM, what conditions do i have to fulfill to be able to use DOM? (or i simply have to use a state of the art browser, thats all?)

What is 'View source' good for? Can I check with it the end result of all the different scripts, etc on my page added together? (jsp being executed first, and javascript finally?)

Thank you very much if you can provide some more details for a rather new bie in this field.

Regards,
heeeep
 
Upvote 0 Downvote

DOM = Document Object Model. Best thing is to google it I reckon. You can use Javascript to interact with the DOM to manipulate the contents of an HTML page. I may not be saying it quite right (I'm sure someone will help out here).

The code you are using in your test harness is probably not going to work because the HTML is all over the place. Here is a similar example that may be of more practical use to you in your testing:
Code: 
<html><head><title>Sample</title>
<script type="text/javascript">
<!--
function ShowTest(_myElementID) {
	document.getElementById(_myElementID).style.display = "block";
}
function HideTest(_myElementID) {
	document.getElementById(_myElementID).style.display = "none";
}
//-->
</script>
</head>
<body>
<div onclick="ShowTest('myDiv1')">
	Show hidden information:
</div>
<table>
	<tr>
	<td>
		<div id="myDiv1" style="display:none;">
			This line appears when i click on the text Hidden Information <span onclick="HideTest('myDiv1')">Hide hidden information</span>
		</div>
		This is always seen
	</td>
	</tr>
</table>
</body>
</html>
Please note that the code is purely a fictional example to show the technique of using the DOM to change the style of an element (with an id).

Using "view source" in your browser you can see the result of what the web server has sent to you. This is what the browser uses to display the page.

You would use JSP to perform code server-side. This code is run on the server and the resulting output is then delivered to the browser. As a result, you cannot "run" JSP code on the browser. You can output variable contents from JSP to the page... and as a result you can interact (albeit one way) with Javascript.

Here is a very simple example showing some JSP code to set two variables and then those variables being delivered in the HTML:
Code: 
<%
String myAlertString = "This is an alert message";
String myPageString = "This is delivered in the HTML";
%>
<html><head><title>Sample</title>
<script type="text/javascript">
alert('<%= myAlertString %>');
</script>
</head>
<body>
<p><%= myPageString %></p>
</body></html>

When you save that as a proper .jsp page (apologies if I'm missing all the usual header information for a JSP... I'm typing from memory... you may need to add that) and request the page via the JSP server, you will get an alert and some content delivered to the page.

If you were to use the "view source" option of the browser at this stage, you would get to see precisely what the browser recieved from the server:
Code: 
<html><head><title>Sample</title>
<script type="text/javascript">
alert('This is an alert message');
</script>
</head>
<body>
<p>This is delivered in the HTML</p>
</body></html>
Note that there is no mention of JSP in the code you see using the browser "view source" option.

Does this get you started?

Jeff
 
Upvote 0 Downvote
Jeff, thx a lot!
Your post really helped me.

So in this way I can reference my jsp variables in js: putting them between <%= and %> ??

OK, but what if i had the following lines in my original jsp:

Code: 
<tr class="headrow">
<td class="noLeftBorder"><bean:message key="myCompany.name" /></td>
</tr>

(as you see, here i have some reference to some javabean variable)

How can i hide/show this line in my resulting page?
heeeep
 
Upvote 0 Downvote

Put the bean tag in a span or div with an ID, just as your text was in a div with an id in the previous example.

After all - the bean simply outputs plain text to the browser, right?

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
thx Dan,

yes it works if i put my

<div id="myDiv2" ....>

and

</div>

immediately around my bean tag (it appears or disappears as it should)

But in my jsp i have several lines of <tr ></tr> -s , with <td></td> -s inside them, and 'href="#" onclick="'-s

And I just fondly thought, that i can put the whole thing inside one div, and this way i can switch the whole thing (several lines together) on/off .

Is there a solution for this? (i tried this, but if i put the whole thing inside the div, then it simply does not work)
Life seems not very easy.

thx, heeeep

 
Upvote 0 Downvote

If you want to hide and show table rows, then you would have to give the rows an id, and switch the rows off. You cannot put rows inside DIVs and switch the DIVs, as table structure is quite specific (table, [header,] body, row, cell).

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote

Hi,
All of a sudden it started working now. (with several rows of jsp inside). I do not know what i have changed, to make it work. It's something like a miracle.
:)
heeeep
 
Upvote 0 Downvote
Hi,
it seems that this is a never ending story (a programmers life...you know)

I could achive that i can switch on and off the whole thing with one user action. Please have a look at my solution:


Code: 
...

<script type="text/javascript">
<!--
function ShowTest(_myElementID) {
    document.getElementById(_myElementID).style.display = "block";
}
function HideTest(_myElementID) {
    document.getElementById(_myElementID).style.display = "none";
}
//-->
</script>


<div onclick="ShowTest('myDiv123')">
    Show hidden information:
</div>

<div onclick="HideTest('myDiv123')">
    Hide hidden information:
</div>


...

<table>

    ...
    
    lots of lots of lots of things
    ...
    
    <tr>
        <td >
            <div id="myDiv123" style="display:none; ">
                <table align=left >
     				<tr class="headrow">
                        <td class="noLeftBorder">this is the head</td>
                    </tr>
    
                    <tr class="odd">
                        <td class="label info">
                            <a href="#" onclick="........"></a>
                            City
                        </td>
                        <!--<td class="value" colspan="2">-->
                        <td class="value">
                                    <input type="text" name="city" tabindex="1" value="somevalue">
                            <font color="#FF0000">*</font>
                            <font class="error"> </font>
                        </td>
                    </tr>
                    <tr class="divider"><td></td></tr>
                </table>
            </div>
        </td>
    </tr>
</table>
...

The only problem with this solution is, that it messes up the original design of my page (the inerior of my div myDiv123, is indented a bit, and there are some other problems with the length of the table row.)

Any idea on what parameters of the div/table should i change, to retain the original design? (no indenting for myDiv123)

any answer appreciated
regards
heeeep
 
Upvote 0 Downvote
Thanks God, I have found the solution to my problem (this maybe trivial for many of you, but not so trivial for some newbies like me). I have set the padding, margin and colspan of my <td>

Code: 
<td style="padding:0;margin:0;" colspan=3>


greetings
heeeeep
 
Upvote 0 Downvote

Ahhhh. I tend to put that into the body definition and then expicitly set it when I need to (because different browsers have different defaults if you don't set them explicitly).
Code: 
body {margin:0;padding:0;}
Glad to see it's all worked out!

Cheers,
Jeff

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
850
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
437
Daniel K
Daniel K
Marclem
  • Locked
  • Question
javascript:navigator.registerProtocolHandler
Replies
1
Views
434
Marclem
Marclem
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
815
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top