Well, I'm not sure about the too many moving parts. But I feel I might have over-complicated the implementation. Have been working on this for quite sometime so I apologize if I'm failing to see some very simple and obvious solution.
The original piece of requirement for this issue was:
1) Show the various pages to the user no matter what.
2) Upon trying to act on the page in anyway that would update the database, verify if certain tasks have been performed already.
3) If not, prompt them to do it (hence the modal div and ajax) and unless they do it, don't let them submit.
4) If the user satisfies the requirements using the modal div, dismiss the div and record the completion of requirements.
5) Then when a submit is re-attempted, verify and allow!
"SIMPLE", I'd have been inclined to think under other circumstances...!
The pages are allowed to be shown no matter what and the user can enter data as well. Only on submit does the requirement to satisfy certain preconditions arises. Refresh is avoided, so that no data that is already entered on the page is lost and also to avoid the user being taken to any other page.