Bitwyse1
Bitwyse1

Reputation: 339

Error Occurred While Updating Some of the Page

I have a combobox that performs a partial refresh of a hidden table. I'm trying to show the table once any value is selected other than the default value. I am using a hidden edit field that is bound to a scope variable to control the table rendering or not. I believe the problem I am having is my code is doing the partial refresh first before the scope variable is set ( see code below onComplete...). However, I am unsure how to set the scope variable first before the refresh occurs. Can anyone point me in the right direction?

<xp:comboBox id="vendorAppAdvSkills1">
    <xp:selectItem itemLabel="-Select a Category-"
        itemValue="" id="selectItem1">
    </xp:selectItem>
    <xp:selectItems id="selectItems1">
        <xp:this.value><![CDATA[#{javascript:getComponent( "vendorAppSkills1" ).getValue();}]]></xp:this.value>
    </xp:selectItems>
    <xp:eventHandler event="onblur" submit="false"
        id="eventHandler1">
        <xp:this.script><![CDATA[
XSP.partialRefreshPost("#{id:tblAdvertising}", 
{ 
    //  Added showAdvertising code to hide the advertising table until the user selects their free category!
    onComplete: function() 
    { 
        //  Fetch a handle to the first category field
        var freeCategory = dojo.byId('#{id:vendorAppAdvSkills1}');
        var showAdvertising = document.getElementById('#{id:showAdvertising}');
        //  If it's blank, force the cursor off the field to fire the onBlur Event
        if( freeCategory.value == "" || freeCategory.value == null )
        {
            if($('body').scrollTop()>0)
            {
                $('body').scrollTop(0);         //Chrome,Safari
            }
            else
            {
                if($('html').scrollTop()>0)
                {    //IE, FF
                    $('html').scrollTop(0);
                }
            } 
            showAdvertising.value = false;
            //  Notify the user this is required
            alert( "Please Select Your FREE Category Listing!" );
            //  Place the cursor back in the first category field again
            freeCategory.focus();
        }
        else
            showAdvertising.value = true;
    }
} );]]></xp:this.script>
    </xp:eventHandler>
</xp:comboBox>  

NEW CODE ADDED HERE

<xp:comboBox id="vendorAppAdvSkills1">
<xp:selectItem itemLabel="-Select a Category-"
    itemValue="" id="selectItem1">
</xp:selectItem>
<xp:selectItems id="selectItems1">
    <xp:this.value><![CDATA[#{javascript:getComponent( "vendorAppSkills1" ).getValue();}]]></xp:this.value>
</xp:selectItems>
<xp:eventHandler event="onblur" submit="true" refreshMode="partial" refreshId="tblAdvertising"
    onComplete="alert( 'ssjs code done' )">
    <xp:this.script><![CDATA[#{javascript:
    var vendorAppSkills = getComponent( "vendorAppSkills1" ).getValue(); 
    print( "vendorAppSkills: " + vendorAppSkills ); 
    print( "typeof vendorAppSkills: " + typeof vendorAppSkills ); 
    if( typeof vendorAppSkills == "java.util.Vector" )
    {
        if( vendorAppSkills.contains( "-Select a Category-" ) )
            viewScope.put( "showAdvertising", false );
    }
    else
    {
        if( typeof( vendorAppSkills == "String" ) )
            if( vendorAppSkills.equalsIgnoreCase( "-Select a Category-" ) )
                viewScope.put( "showAdvertising", false );
            else
                viewScope.put( "showAdvertising", true );
    }
    }]]></xp:this.script>

Upvotes: 1

Views: 195

Answers (1)

jpishko
jpishko

Reputation: 1070

Instead of doing the partial refresh with XSP.partialRefreshPost use the refreshId parameter of the event handler, set your scope variable, then your onComplete code will run after the scoped variable has been assigned a value:

    <xp:view xmlns:xp="http://www.ibm.com/xsp/core">

        <xp:this.afterPageLoad><![CDATA[#{javascript:viewScope.myVar = "initial value";}]]></xp:this.afterPageLoad>
        <xp:comboBox id="comboBox1">
            <xp:selectItem itemLabel="val 1" itemValue="val1"></xp:selectItem>
            <xp:selectItem itemLabel="val 2" itemValue="val2"></xp:selectItem>
            <xp:eventHandler event="onchange" submit="true" refreshMode="partial"
              refreshId='#{javascript:(viewScope.myVar == "someValue") ? "idToUpdate" : ""}'
              onComplete="alert('ssjs code done');">
                <xp:this.action><![CDATA[#{javascript:viewScope.myVar = "someValue";}]]></xp:this.action>
            </xp:eventHandler>
        </xp:comboBox>

        <xp:panel id="idToUpdate">
            <xp:this.rendered><![CDATA[#{javascript:(viewScope.myVar == "someValue")}]]></xp:this.rendered>
            table data
        </xp:panel>
    </xp:view>

Upvotes: 3

Related Questions