This discussion is archived
3 Replies Latest reply: Dec 11, 2008 8:53 PM by 843833 RSS

Binding error in blueprints AJAX Rating Component

843833 Newbie
Currently Being Moderated
I am using the blueprints AJAX Rating Component in a table in which data is populated dynamically. Each row of the table has one rating component in it.
At the time of display, the ratings are displayed correctly from the database but when I try to submit a new rating, the page gives the following error
"An error occurred performing an asynchronous request: [object Object]"

My rating component is binded as
<bp:rating id="rating3" binding="#{ReleasesView.rating3}" grade="#{currentRow.value['userRating']}"/>

The java class has rating3 defined as the RatingComponent and contains it getters and setters.

Please advise, what I am missing out in my code.
Thanks
  • 1. Re: Binding error in blueprints AJAX Rating Component
    843833 Newbie
    Currently Being Moderated
    I work with Divya and have been looking at this too. Perhaps, if we provide a little more detail, someone can offer some suggestions for resolution. First, here's the code in the *.jspf
    <?xml version="1.0" encoding="UTF-8"?>
    *<div style="-rave-layout: grid; " xmlns:bp="*[http://java.sun.com/blueprints/ui/14]*" xmlns:f="*[http://java.sun.com/jsf/core]*" xmlns:ui="*[http://www.sun.com/web/ui]*">*
        <f:subview id="ReleasesView">
            <ui:label binding="#{ReleasesView.label1}" id="label1"
                style="font-family: 'Arial','Helvetica',sans-serif; font-size: 14px; font-style: normal; font-weight: normal; left: 288px; top: 24px; position: absolute; width: 406px" text="Releases are the output of a project.  They are the physical package available for installation for our customers.  "/>
           <ui:table augmentTitle="false" binding="#{ReleasesView.table1}" id="table1" paginateButton="true" paginationControls="true"
                style="left: 24px; top: 144px; position: absolute;">
                <ui:tableRowGroup binding="#{ReleasesView.tableRowGroup1}" emptyDataMsg="There are no releases for the specified criteria" id="tableRowGroup1"
                    rows="10" sourceData="#{ReleasesView.objectListDataProvider1}" sourceVar="currentRow">
                    <ui:tableColumn binding="#{ReleasesView.tableColumn1}" headerText="Number" id="tableColumn1" sort="number">
                        <ui:staticText binding="#{ReleasesView.staticText1}" id="staticText1" text="#{currentRow.value['number']}"/>
                    </ui:tableColumn>
                    <ui:tableColumn binding="#{ReleasesView.tableColumn2}" headerText="Product" id="tableColumn2" sort="product">
                        <ui:staticText binding="#{ReleasesView.staticText2}" id="staticText2" text="#{currentRow.value['product'].description}"/>
                    </ui:tableColumn>
                    <ui:tableColumn binding="#{ReleasesView.tableColumn3}" headerText="Release Date" id="tableColumn3" sort="releaseDate">
                        <ui:staticText binding="#{ReleasesView.staticText3}" id="staticText3" text="#{currentRow.value['releaseDate']}"/>
                    </ui:tableColumn>
                    <ui:tableColumn binding="#{ReleasesView.tableColumn5}" headerText="Feedback" id="tableColumn5">
    <!-- Causes 500 error   
                        <bp:rating 
                            style="border: 0px solid #ffffff;" 
                            grade="#{currentRow.value['userRating']}" 
                            id="rating3" 
                            includeModeToggle="True" 
                            inAverageMode="True" 
    This line cause prob    binding="#{ReleasesView.rating3}" 
                        />  
    -->
                        *<bp:rating* 
    *                        style="border-style: none;"* 
    *                        grade="#{currentRow.value['userRating']}"* 
    *                        id="rating3"* 
    *                        includeModeToggle="True"* 
    *                        inAverageMode="True"*
    *                    />* 
    <!--                    <ui:imageHyperlink icon="ALERT_SUCCESS_MEDIUM" id="image1" style="border: 1px solid #ffffff; " url="FeedbackPopup.jsp?number=#{currentRow.value['number']}&productID=#{currentRow.value['product'].id}"/> -->
                    </ui:tableColumn>
                </ui:tableRowGroup>
            </ui:table>
            <ui:dropDown binding="#{ReleasesView.dropDown2}" id="dropDown2" items="#{ReleasesView.applicationList.options}" label="Application:  " labelOnTop="true"
                onChange="common_timeoutSubmitForm(this.form, 'dropDown2');" style="left: 24px; top: 24px; position: absolute; width: 214px" valueChangeListener="#{ReleasesView.dropDown2_processValueChange}"/>
            *<!-- <bp:rating* 
    *                id="rating3"* 
    *                style="border: 1px solid white; left: 288px; top: 72px; position: absolute"* 
    *                grade="#{ReleasesView.grade}"* 
    *             /> -->*
        </f:subview>
    </div>
    The latter block of code that is outside of the table works fine. We simply set up a property with a getter and a setter and we can see that the getter and the setter are hit to retrieve and to set the rating as the page loads or the user clicks on the rating control. But, place the same block code into the table and adjust the property to which "grade" is bound and the results indicate that the intial value is used as expected, but we get the error Divya references below. I have tried a number of variations and have not been able to get anything to work. Any ideas or suggestions would be extremlely welcome. A few other things to note. The style tab is ignore.

    This block of supporting code in the Java source supported the last rating control when used:
    Java Code

    ....
    private int grade = 3;
    
    public int getGrade() 
    {
       return grade;
    }
    
    public void setGrade(int grade) 
    {
       this.grade = grade;
    }
    ....
    Or, in the case Divya tested the property is on the Domain Model used by the View page as follows the first bolded instance of bp:rating...:



    public int getUserRating() {
    return userRating;
    }


    public void setUserRating(int userRating) {
    this.userRating = userRating;
    }



    Help would be appreciated.
  • 2. Re: Binding error in blueprints AJAX Rating Component
    843833 Newbie
    Currently Being Moderated
    I have kept troubleshooting and have made some progress:

    The OnGrade property as the documentation and inline comments state expects to be set to a string representing a "Scripting" function. The following worked:
                        <bp:rating 
                            grade="#{currentRow.value['userRating']}"
                            style="border: 0px solid #ffffff;"
                            id="rating3" 
                            includeModeToggle="True" 
                            inAverageMode="True"
                            onGrade="#{'OnGradeSet'}"
                        /> 
    With this defined in the jsp portion of the JSPF page:
        <script type="text/javascript">
            function OnGradeSet()
            {
                alert("In OnGradeSet");
            }
        </script>
    If I click on a start, I get the alert message.

    So, it would appear our challenge now is to determine how best to take advantage of the OnGradeSet's triggering to persist the user's selected rating.
    The styling seems to be ignored too.
  • 3. Re: Binding error in blueprints AJAX Rating Component
    843833 Newbie
    Currently Being Moderated
    hi divya,
    i have problem on bp:rating AJAX component , i don't know how to assign value to star.
    if you have solution then help me.