[Seaside] JavaScript anyone?

[Nevin Pratt]

Ned Konz wrote:

>On Friday 28 March 2003 10:02 am, Nevin Pratt wrote:
>  
>
>>I would like to have a page with "Next Image" and "Previous Image"
>>buttons that when pressed, shows another photo.  However, I don't
>>want the entire page to need to get refreshed.  I would like *just*
>>the image to change-- nothing more.
>>
>>The only way I know of to do that is via JavaScript.
>>    
>>
>
>Can't you make it so that it'll work as desired in JavaScript, but 
>also degrade gracefully to refreshing the entire page when someone 
>has JS disabled?
>
>  
>
I don't know.  I've got it working right now without JavaScript.  One 
sample run produced the following html fragment:

   <form method="POST" action="/seaside/index/@8ead21b8-2f44-44ae-99d8-8685af0227f5/23522" >
   <input value="<- Previous Image" name="1" type="submit" >
   <input value="Next Image ->" name="2" type="submit" >
   <input value="Random Image" name="3" type="submit" >
   </form>


So, I suppose the solution would look like this (notice the addition of 
the 'onClick' property to the buttons):

   <form method="POST" action="/seaside/index/@8ead21b8-2f44-44ae-99d8-8685af0227f5/23522" >
   <input value="<- Previous Image" name="1" type="submit" onClick="previmg()">
   <input value="Next Image ->" name="2" type="submit" onClick="nextimg()">
   <input value="Random Image" name="3" type="submit" onClick="pickrand()">
   </form>


And then, of course, include the JavaScript found here so we have a 
definition of previmg(), nextimg(), and pickrand():

   http://www.jsmadeeasy.com/javascripts/Images/Image%20Gallery/list.htm

With this, though, I'm really not sure what would actually happen when 
the buttons are clicked.  For a JavaScript-enabled browser, would they 
both submit the form, as well as run the JavaScript function?  Or would 
it just run the function?  If JavaScript was not enabled, what would 
happen?  Would it still submit the form in this case?

It would be preferable if the above would submit the form if JavaScript 
was *not* enabled, but would just run the JavaScript functions *without* 
submitting the form if JavaScript was enabled.  What would it do?  I 
suppose I should just try it and see.

Another potential solution is below.  First, let me start with the 
sample run html fragment from the existing Seaside app, but add a hidden 
type property so that the form isn't actually displayed in the browser. 
 Let's also remove the Seaside action, remove the "POST" method 
property, and give the form a name:

   <form name="JSBUTTONS" type="hidden">
   <input value="<- Previous Image" name="1" type="submit" onClick="previmg()">
   <input value="Next Image ->" name="2" type="submit" onClick="nextimg()">
   <input value="Random Image" name="3" type="submit" onClick="pickrand()">
   </form>


So with the above, we should have a form that does *not*, under any 
circumstances, submit anything to Seaside.  Nor does the form even show 
up visually in the browser.  But, we can have JavaScript enable the form 
thus:

   <script language="JavaScript"><!--
   document.JSBUTTONS.JavaScript.value = 'enabled';
   //--></script>


Now the buttons should show up visually in the browser IF and ONLY IF 
JavaScript is enabled in the browser, and pressing them should invoke 
their respective JavaScript functions to move to the previous, next, or 
random image respectively.

But this doesn't give me any buttons if JavaScript is *not* enabled.  To 
fix that, I suppose I could take the original Seaside html fragment, but 
add a name property thus:

   <form name="NORMALBUTTONS" method="POST" action="/seaside/index/@8ead21b8-2f44-44ae-99d8-8685af0227f5/23522" >
   <input value="<- Previous Image" name="1" type="submit" >
   <input value="Next Image ->" name="2" type="submit" >
   <input value="Random Image" name="3" type="submit" >
   </form>


Now I use JavaScript to disable the buttons thus:

   <script language="JavaScript"><!--
   document.NORMALBUTTONS.JavaScript.value = 'disabled';
   //--></script>


So now, by combining the above, if JavaScript is enabled, only the 
JSBUTTONS will be visible, and they will invoke their respective 
JavaScript functions.  But if JavaScript is *not* enabled, only the 
NORMALBUTTONS will be visible, and they will submit to their Seaside 
action methods (which will reload the entire page, and in the process, 
do the same thing the JavaScript buttons were supposed to do).

So, I guess I'm going to have to play with these potential solutions, 
and see what works and what doesn't.

Nevin