Modla panel does not submit h:form

[satyakatti]

Hi All,

I have a modal panel to display the charts based on the chart name selection.

But the modal panel submits h:form to get chart from servlet for the very 1st time, after that the h:form is not submitted at all

but it just shows the old chart. When chart name is selected, the JS function sets the name to src of image and submits the form.

Code goes as shown below:

<h:selectOneMenu immediate="true" id="kennfeldChartNames"

     onchange="javascript:if(this.selectedIndex != 0){Richfaces.showModalPanel('kennfeldChartModal'); sumbitKennfeldChart(this);}" >

          <f:selectItem itemLabel="#{testMeasurement.selectChart}" itemValue=""/>

          <f:selectItems value="#{kennfeldChartNames}" />

</h:selectOneMenu>

JS function sets the name of selected chart to src of image in modalPanel. Servlet reads this name to build the chart.

function sumbitKennfeldChart(selVal){
    var chartName = selVal.options[selVal.selectedIndex].value;
    if(chartName != null && chartName != "") {
        document.getElementById('kennfeldChartForm:kennfeldChart').src = "/plcd/TestManagementUI/show.charts?chartName="+chartName;
         //document.getElementById('kennfeldChartForm').submit;
        document.kennfeldChartForm.submit;
     }
}

code of modalPanel with its own h:form so that it can submit to retrieve the image from src (which is set by JS)

Here onClick of close button, i reset the src of image to loading screen so that next time loading image is shown till chart is streamed by servlet.

    <rich:modalPanel id="kennfeldChartModal" width="900" height="600">
            <f:facet name="header">
                <h:panelGroup>
                    <h:outputText value="#{testMeasurement.kennfeldPreviewDialogHeader}"></h:outputText>
                </h:panelGroup>
            </f:facet>
            <f:facet name="controls">
                <h:panelGroup>
                    <h:graphicImage value="/img/iconClosePopin.gif" id="closeKennfeldChartModal"
                    onclick="javascript:document.getElementById('kennfeldChartForm:kennfeldChart').src='/plcd/TestManagementUI/img/ajaxLoading.gif';Richfaces.hideModalPanel('kennfeldChartModal');" />
                </h:panelGroup>
            </f:facet>
            <br/>
            <h:form id="kennfeldChartForm">
                <h:graphicImage id="kennfeldChart" url="/img/ajaxLoading.gif" />
            </h:form>   
        </rich:modalPanel>

Though i reset the src of img in modalpanel to loading screen, the old chart is displayed for the subsequent selection of chart names.

Can you help me how to submit the h:form properly for subsequent calls.

My doubt is:

The chart names in combobox can be duplicate. So even if I select another option with same name, the JS function sets the src of image properly.

But form is not submited coz the last url was also same?

I meant: If i select "chart_1" for 1st time, its works.

Then I select another option but with name as "chart_1" again. JS works propely by setting src correct.

But form is not submitted because the earlier URL was also same?

Regards,

Satya

[sivaprasad9394]

In your modal panel while closing use like this

<h:commandLink  id="closeKennfeldChartModal"

action="#{SomeBeanName.clearValues}">

<h:graphicImage value="/img/iconClosePopin.gif"

style="border:0" alt="Close" title="Close" /> 

</h:commandLink> 

Then In ur SomeBean's clearValues Method clear the value(make null) for the

h:selectOneMenu it means make it as null, Then in face-config.xml redirect the page Which has combobox.Here now modal panel also closed and value of the combobox also rest.So you can select the new value from the combo box and call the javasccript function and you can get the diferent value u selected from combo box(chart name) and you can set to java script function also .

<h:commandLink  id="closelink"  

action="#{transactionListBean.clearMessages}">

<h:graphicImage value="../_assets/image/close.png"

style="border:0" alt="Close" title="Close" /> 

</h:commandLink> 

[satyakatti]

I was able to solve the problem by appending timestamp to URL of  image in javascript.

Since the URLs of two requests  used to be same, the form was not submitted or image was not retrieved  from servlet. It always showed the same old cached chart.

Now my JS looks something like this:

function sumbitKennfeldChart(selVal){
     var chartName = selVal.options[selVal.selectedIndex].value;
     if(chartName != null && chartName != "") {
         var tempVar = new Date();
         document.getElementById('kennfeldChartForm:kennfeldChart').src =  "/plcd/TestManagementUI/show.charts?chartName="+chartName

     +"&time="+tempVar.getTime();
         document.kennfeldChartForm.submit;
      }
}

Every time the URL of image is changed, the img tag is  fired to retrieve the chart for all calls.

Regards,

Satya