-2

I have a popup in which you have to select components for you pc. Each component contains a label and a drop down list with all the selected components in the database. Next to the list there is an 'add' button, when clicked it give another popup, which is used when the user does not find what he wants in the list. The add function calls a method which checks the input of the user for already existing inputs and adds if there is none. MY PROBLEM: is that I can not find a solution for refreshing the list which was updated. I am trying to use <p:ajax /> but I keep getting Cannot find component errors.

---HTML CODE----

<form id="dialog">
<h:outputText value="Computer: " styleClass="dialog-labels" />

                <ul style="list-style-type: none">

                    <li>
                        <div class="dialog-container">
                            <h:outputLabel value="Processor: " style="float:left;" />
                            <p:selectOneMenu id="procs" filterFunction="true" filterMatchMode="true"  styleClass="dialog-dropdown-list" style="width:15em;">

                                    <f:selectItem itemLabel="Select Processor" itemValue="" noSelectionOption="true" />
                                    <f:selectItems id="list"  value="#{javaHTMLConnection.procList}" />
                            </p:selectOneMenu>

                                <p:commandButton value="Add" id="addProc" styleClass="dialog-buttons" onclick="PF('addProcBox').show();" style="font-size: 10px;" />

                                <h:form id="popUp">

                                    <p:dialog header="Add Processor" widgetVar="addProcBox" height="200" width="180" draggable="false" resizable="false" style="font-size:13px;">   

                                        <h:outputLabel value="Processor: " style="float:left;" />
                                        <p:inputText  id="procInput" value="#{components.procID}"/>

                                                <p:growl id="growl" life="10000" />                                             
                                                <p:commandButton value="Save"  styleClass="dialog-bottom-buttons" action="#{components.addProcessor()}" update="growl" onclick="PF('addProcBox').hide();"  style="font-size: 10px;"  />
                                                <p:ajax listener="#{javaHTMLConnection.onAdd()}" update=":dialog:list" />
                                                <p:commandButton value="Cancel" id="CancelAddProc" styleClass="dialog-bottom-buttons" onclick="PF('addProcBox').hide();"  style="font-size: 10px;" />

                                    </p:dialog>
                                </h:form>   

                        </div>
                    </li>
</form>

----JavaHTMLConnection----

public void onAdd()
{
    if(components.addProcessor()==true)
    {
        components.getAllComponents();
    }
}

----Components(Java code)----

public boolean addProcessor()
    {
        try
        {
            db.openDatabase();
            db.con.setAutoCommit(false);

            if (!db.ifExists("processor.name", "processor", procID))
            {
                db.Entry("processor", procID);
                addMessage("Success ! Your input has been saved");
                return true;
            }
            else
            {
                addMessage("Error, the input already exists");
            }

        }
        catch (SQLException e)
        {
            try
            {
                db.con.rollback();
            }
            catch (SQLException e1)
            {
                e1.printStackTrace();
            }
            e.printStackTrace();
        }
        finally
        {
            try
            {
                db.con.setAutoCommit(true);
            }
            catch (SQLException e)
            {
                e.printStackTrace();
            }
        }
        return false;
    }

P.S.: Don't mind the naming as when this will be figured out everything will be made generic as I need to adapt this to 15 more components

FancyPants
  • 93
  • 1
  • 4
  • 20

2 Answers2

3

As Emil already mentioned, nested forms are a really bad thing which you should get rid of immediately.

Also, as Emil suggested, that kind of error message is usually related to incorrect component-selectors. Those are mainly caused due to the fact that a parent naming container is missing in the selector. Either determine the correct id using some debugging tool or, instead of 

<p:ajax listener="#{javaHTMLConnection.onAdd()}" update=":dialog:list" />

try using some of the solutions suggested in this thread: Primefaces - Cannot find component with identifier outside the datatable

I personally prefer to use the following syntax, which relies on a primefaces-method searching for an id in various naming containers:

<p:ajax listener="#{javaHTMLConnection.onAdd()}" update=":#{p:component('list')}" />
Community
  • 1
  • 1
Lukas Platzek
  • 86
  • 4
  • Do not think the problem is in the forms as everything works fine with the forms, actually my adding method isn't even called when i delete the forms, tried your syntax and still nothing. – FancyPants Nov 04 '14 at 14:21
  • Well nesting forms is actually not forbidden by jsf, but by the html-specification in general ( see http://stackoverflow.com/questions/379610/can-you-nest-html-forms and http://stackoverflow.com/questions/7371903/multiple-hform-in-a-jsf-page ). So if the code you provided with nested forms worked for you, i guess that results from using a browser that is very liberal in handling html-markup. In order for your program to run stable for other browser, i strongly advise you to rethink your structure there. – Lukas Platzek Nov 04 '14 at 14:29
  • For the id-related part: From the sample code you provided I can already see that ":dialog:list" cannot possibly work because another form with the id "popUp" is missing as a naming container. Try using ":dialog:popUp:list" if you really want to stick to the markup you provided. – Lukas Platzek Nov 04 '14 at 14:31
  • made one general form. I guess it will save trouble. Used `update=":#{p:component('list')}"` as identifier. still did not work. Any suggestions? – FancyPants Nov 05 '14 at 11:38
  • Well that depends on the error message that you get. Is it still "Cannot find component"? – Lukas Platzek Nov 05 '14 at 14:16
  • Nope. No error, just when i use the add function, nothing changes in the list, this is why i thought its a good idea to put it in a form because it would send out a request or something, but then I saw that the website breaks in half because of the nested forms so i need the ajax event to update the list but its not working. – FancyPants Nov 05 '14 at 14:32
2

First of all, you have nested forms, which you should get rid of.

As for question you should inspect the specific html element (for example by using firebug) to find out the id of it.

Emil Kaminski
  • 1,886
  • 2
  • 16
  • 26
  • Applied both your and Lukas suggestions. deleted the nested forms and change the syntax to `update=":#{p:component('list')}"` still not working, but I was thinking placing them in separate forms, but then of course there would be more than 15forms on the webpage if I would do that, what would you suggest? – FancyPants Nov 04 '14 at 14:02
  • I think you need to make an update to your current question and show us how how your code so we can see how it looks after you removed the nested forms. As for your question regarding 15 forms on the same web page, i don't know the architecture of your program. Perhaps you can explain why you need 15 different forms and not just 2 (one for your main page and one inside your dialog)? If you need re usability of your code, then perhaps you can take a look at Composite Components. – Emil Kaminski Nov 04 '14 at 14:35