Error Occurred While Updating Some of the Page - xpages

Question

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>

Answer 1

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>