Hi,
I am new to Ultrawebtab. I have a requirement to display a popup when the user clicks on another tab. I'm using a div to show the popup. This popup has three buttons: yes, no, cancel. Am displaying the popup using jquery In the clientside event BeforeSelectedTabChange.
Based on any of the three buttons clicked, i have to decide whether stay on the tab or not.
If 'cancel' button is clicked, I want to restrict the event by using the code oEvent.cancel = true;
For 'Yes' and 'No' buttons, it should move to the tab clicked.
function UltraWebTab_BeforeSelectedTabChange(oWebTab, oTab, oEvent) {
showDialog('myPopup');
// if cancel button or close(X) on the popup clicked.
oEvent.cancel = true;
// else oEvent.cancel = false;
}
function ClosePopup() {
closeDialog('myPopup'); return false; }
function showDialog(id) {
$('#' + id).dialog("open"); }
function closeDialog(id) {
$('#' + id).dialog("close"); }
please see the popup button code for the button
<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClientClick="return ClosePopup();" />
Setting a value based on the user input is okay? But the user may not click the button soon like that..
Any help anyone could produce would highly be appreciated.
Many thanks
Ratheesh
Hi Ratheesh,
Thank you for posting in the community.
As far as I can understand, your question is how to conditionally change the selected tab of UltraWebTab based on the clicked element inside your popup.
The approach you are using is correct - the tab changing should be cancelled when the popup is being displayed and based on what the user clicks in the popup, the selected tab may be later programmatically changed. Note that the oTab argument passed to the handler in this case is the new tab to be selected, and its index can be accessed via:
oTab.getIndex()
I suggest that you store the index of this tab when cancelling the event. Subsequently you can programmaticallly change the selected tab in javascript when handling the "OK" button's clientside click event. The selected tab may be changes using something similar to:
igtab_getTabById("UltraWebTab1").setSelectedIndex(1)
Please let me know if this helps.
Thanks Petar for the help provided. It was very useful and encouraged me to go ahead in the same direction.
I have improved the code based on your input.
var index = 0;
function UltraWebTab1_BeforeSelectedTabChange(oWebTab, oTab, oEvent) {
index = oTab.getIndex(); // saving the index to be used in the Yes button clientclick event
closeDialog('myPopup'); }
function MoveToSelectedTab() {
closeDialog(' myPopup ');
var ultraWebTab = igtab_getTabById("UltraWebTab1");
if (ultraWebTab == null) return; // here am getting null.
ultraWebTab.setSelectedIndex(index); // setting index
return false;
<asp:Button ID="btnYes" runat="server" Text=Yes" Width="50" OnClientClick="return MoveToSelectedTab();" OnClick="btnYes_Click" />
Do you know why igtab_getTabById("UltraWebTab1") giving me null? any syntax issue? I hope its a minor one for you.. once again many thanks for the reply.