2 Replies Latest reply on Apr 14, 2007 7:05 PM by Tony Herstell

    Javascript/Seam and Facelets has me baffled!

    Tony Herstell Master

      A couple of questions on the code below:

      1. Why are my varibales being renamed _id9:? can I guarentee that they will always be prefixied by this and if not how do I reference them?

      2. How on earth do I reference the advertType; as document.getElementById("_id9:advertType"); brigs back something strange... that I cannot pass into the javascript function.

      On page load I want to fire the script to disable the relevant section.

      I think I have to disable it as "display=none" seems to not stop it being validated!

      I must be misunderstanding something fundemental about seam, facelets and javascript as they seem at odds... this is weired!


      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:c="http://java.sun.com/jstl/core"
       xmlns:s="http://jboss.com/products/seam/taglib">
      
      <script language="JavaScript" src="../../javascript/setstyle/setstyle.js"/>
      
      <script language="JavaScript">
       function checkAdvertType(radioButtons) {
      
       var buttonClicked = radioButtons.value;
       if (buttonClicked.toString() == "Lineage") {
       document.getElementById("_id9:goToUpload").disabled = true;
       document.getElementById("_id9:textArea").disabled = false;
       } else if (buttonClicked.toString() == "BannerAd") {
       document.getElementById("_id9:goToUpload").disabled = false;
       document.getElementById("_id9:textArea").disabled = true;
       } else {
       alert("Internal Error - Unsupported Ad Type");
       }
       }
      </script>
      
       <table>
      
       <!-- Advert Type -->
       <tr>
       <td align="right">
       <h:outputLabel for="advertType" value="#{messages.label_ad_type}" />
       <h:outputText value="#{messages.label_field_marker}" />
       </td>
       <td align="left">
       <table>
       <tr>
       <td>
       <s:decorate>
       <h:selectOneRadio id="advertType" required="true" value="#{advertisingCampaignController.campaign.advert.type}" onclick="checkAdvertType(this)">
       <s:selectItems id="choices" value="#{advertisingCampaignController.campaign.advert.advertTypes}" var="advertType" label="#{messages[advertType.label]}"/>
       <s:convertEnum />
       </h:selectOneRadio>
       </s:decorate>
       </td>
       </tr>
       </table>
       </td>
       </tr>
      
      
       <!-- Text Lines -->
       <tr id="textLines">
       <td align="right">
       <h:outputLabel for="advertType" value="#{messages.label_text_lines}" />
       <h:outputText value="#{messages.label_field_marker}" />
       </td>
       <td align="left">
       <table>
       <tr>
       <td>
       <s:decorate>
       <h:inputTextarea id="textArea" required="true" rows="4" cols="20" value="#{advertisingCampaignController.campaign.advert.textLines}">
       <s:validate/>
       </h:inputTextarea>
       </s:decorate>
       </td>
       </tr>
       </table>
       </td>
       <td>
       <h:outputText value="#{messages.tag_mandatory}"
       styleClass="mandatory" />
       </td>
       </tr>
       <tr>
       <td>
       <h:outputText value="" />
       </td>
       <td>
       <h:message styleClass="error" for="textArea" />
       </td>
       <td>
       <h:outputText value="" />
       </td>
       </tr>
      
       <!-- Upload Image Component -->
       <tr id="upload">
       <td align="right">
       <h:outputLabel for="goToUpload" value="#{messages.label_upload}" />
       <h:outputText value="#{messages.label_field_marker}" />
       </td>
       <td align="left">
       <h:commandButton id="goToUpload"
       action="#{advertisingCampaignController.goToUploadBanner}"
       value="#{messages.button_add_banner}"/>
       </td>
       <td>
       <h:outputText value="#{messages.tag_mandatory}"
       styleClass="mandatory" />
       </td>
       </tr>
       <tr>
       <td>
       <h:outputText value="" />
       </td>
       <td>
       <h:message styleClass="error" for="goToUpload" />
       </td>
       <td>
       <h:outputText value="" />
       </td>
       </tr>
      
       <tr>
       <td colspan="3" align="center">
       <s:graphicImage value="#{advertisingCampaignController.campaign.advert.image.imageBytes}" rendered="#{(advertisingCampaignController.campaign.advert.image.name != null) and (advertisingCampaignController.campaign.advert.image.name != '')}"/>
       </td>
       </tr>
       <tr>
       <td colspan="3" align="center">
       <h:outputText value="#{advertisingCampaignController.campaign.advert.image.name}" rendered="#{(advertisingCampaignController.campaign.advert.image.name != null) and (advertisingCampaignController.campaign.advert.image.name != '')}"/>
       </td>
       </tr>
      
      
       </table>
      
      </html>
      
      <script language="JavaScript">
       var radioButtons = document.getElementById("_id9:advertType");
       checkAdvertType(radioButtons);
      </script>
      
      


        • 1. Re: Javascript/Seam and Facelets has me baffled!
          Pete Muir Master

           

          "tony.herstell@gmail.com" wrote:
          1. Why are my varibales being renamed _id9:? can I guarentee that they will always be prefixied by this and if not how do I reference them?


          Some JSF components act as naming containers (e.g. h:form) - thats where the prepended id comes from. It can change as you alter the page.

          There should be lots of resources in JSF books/the net on how to work with this. Or ask on a JSF forum

          • 2. Re: Javascript/Seam and Facelets has me baffled!
            Tony Herstell Master

            OK i tok some time to talk to Joel a very clued up individual.

            I see that the model on the server is what I am rendering.

            I should not be trying to manipulate the screen.

            I need to submit the form when the radio button is selected, update the model server side, and then have the page re-rendered for me.

            el will take care of hiding the page components I now want hidden/displayed whatever.

            Stick to one paradigm.

            Now to find if I submit a seampage what action gets called to handle the submit as ther is no action defined in the form tag!

            :/