I have a page which contains apex:component, custom (dynamic) tab in apex:page.The design is like this,each tab represent the category and each category have 3 text area.The tab is created in page level while the text areas is inside component level.Once the user navigate into different tab, the component will re render the text area for the related category.
The quick workaround that I can think is to disable user to move or enter new data before system complete processing the previous data.So I need to have something like indicator or progress bar like the one that I used to see in other applications.I need to use ActionStatus but it will be cooler if I combine it with jQuery.
After I bumped into here and here.I come out with this.
1) The style to hide the dialog box's close button ,because it ugly to show the progressing icon with the Close 'X',and I don't want user to close it manually.
2)Define jquery dialog box
3)Create html div , put the image that I created from the
4)Create java script function to show and hide the dialog
6)The fields and actionSupport that call the ActionStatus
Congratulations to me it works but after testing, I figured out something weird.When I first time load the page, update the text area ,the dialog box able to close automatically.But after I click into different tab, update the text area,the dialog box popup and it never close forever.It keep hanging there.I am not sure why at the first load it works, but after I navigate through the tabs it wont work.
I was running out of idea, I moved the code here and there, put at page level ,move back to the component level.I put alert inside statusHide() and the alert come out but I noticed it could not read this
I don't get any solid rules why,because it works initially after the page loading but suddenly not working if I navigate into different tab and update the field from there.I googling here and there but still zero result.At last maybe because of too much reading, I see various kind of code posted in internet and come out with something like this. Instead of calling using id, I declare and call it as variable.
It WORKS and I have no idea why it works??? Happy and confuse with the solution.I am using jquery 1.7.1 ... is it related?No idea :)
EDITED:For better code put style="display: none;" in dialog_modal div.