function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
sales4cesales4ce 

Tabs with Java Script

Hi,

 

I have a visualforce page with Tabs on it. whenever a user clicks on a different tab, the page loads and the changes are not persisted.

How can i persist the changes?

 

A workaround was to have a Javascript that would pop up (confirmmessage) everytime a user switches between tabs .

But when the user clicks on the cancel button if the confirm dialog i want the page not to switch to the tab. 

 

For some reson the tab is getting switched?

 

Any help is highly appreciated.

 

VF Page:

<apex:page >
<apex:form >
<script >
function showtabAlert()
{
    confirm("Please Save your Changes before Navigating to a New Tab!");
}


</script>
<apex:tabpanel switchtype="server" selectedTab="Qualify" onclick="showtabAlert();" >
<apex:tab label="Customer Information" name="Customer Information">
</apex:tab>
<apex:tab label="Qualify" name="Qualify">
</apex:tab>
<apex:tab label="Validate" id="TabValidate" >
</apex:tab>
<apex:tab label="Other tab" disabled="true">
</apex:tab>
</apex:tabPanel>

<apex:commandButton value="Click Me" onclick="showtabAlert();"/>

</apex:form>



</apex:page>

 

 

Thanks,

Sales4ce

TheSwamiTheSwami

switchType="client" (or "ajax") should persist the changes while switching the panels without the onclick javascript.
sfdcfoxsfdcfox

If you wish to continue using the dialog box, you need to return false if the user clicks cancel. So, you'll basically have to change the onclick to:

 

 

onclick="return showtabAlert()"

If you do this, you should change your function to:

 

 

function showtabAlert() {
  return confirm('Changing tabs may lose data. Continue?');
}

 

 

 
sales4cesales4ce

One interesting thing i have noticed is that when i use the javascript on an individual tab rather than on tabpanel would not result in executing the javascript. It works fine with TabPanel

 

is this an expected behavior? The documentation does not give any further information though. Any ideas?

 

VF Page:

 

<apex:page >
<apex:form >
<script >
function showtabAlert()
{
   return confirm("Please Save your Changes before Navigating to a New Tab!");
}


</script>
<apex:tabpanel switchtype="server" selectedTab="Qualify" onclick="showtabAlert();" >
<apex:tab label="Customer Information" name="Customer Information">
</apex:tab>
<apex:tab label="Qualify" name="Qualify" onclick="showtabAlert();">
</apex:tab>
<apex:tab label="Validate" id="TabValidate" >
</apex:tab>
<apex:tab label="Other tab" disabled="true">
</apex:tab>
</apex:tabPanel>

<apex:commandButton value="Click Me" onclick="showtabAlert();"/>

</apex:form>



</apex:page>

 

Thanks,

Sales4ce
sfdcfoxsfdcfox

The fact is that onclick is a prototyped attribute (that is, it's a legal attribute for an apex:tab), but it seems to be ignored at the moment. I verified that the apex:tab onclick attribute is not generated anywhere that I could find in the source of the actual VF page. For now, it's probably best if you keep to the TabPanel version in place (although, seems awkward to even figure out which is the newly selected tab in pure JS, too).
CEPCEP
FYI, as of 4/29/2014 using the switchType="client" still does not work :(