Jquery modal causing page protection violation error

Hi,

I am using Apex 4.2.2.

I tried to move away from built in plugin template as it doesnt work in IE 7 (this is in theme 26) to use Jquery modal.


In page Header: I put the following code:

<link rel="stylesheet" href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"> </script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"> </script>

<script language="JavaScript1.1" type="text/javascript">

	$( function() 
	{
	   $('#modal-1').dialog(
	   {
			width: 500,
			height: 400,
			modal : true ,
			autoOpen : false ,
			buttons  : {
							Cancel 	: function() {
										closeDialog('modal-1');
									}
					    }

	   });
	});
</script>

<script language="JavaScript1.1" type="text/javascript">		
	function openDialog(pId)
	{
		var dialog_id = '#'+pId;
		$(dialog_id).dialog('open');
		
	}
	function closeDialog(pId)
	{
		var dialog_id = '#'+pId;
		$(dialog_id).dialog('close');
	}

</script>

Then created my Modal region (type HTML + No Template) with a

Region Header: <di v id="modal-1" style="display:none;">
Region Footer: </di v >

Modal comes up fine as soon as I run the page and submit or click on any other links on tabs (to go to other page) I am getting the error:

Session state protection violation: This may be caused by manual alteration of protected page item P17_RELEASE_ID. If you are unsure what caused this error, please contact the application administrator for assistance.

Contact your application administrator.

I know this is the main cause because if I remove the code from page header, the error dissappears.

Anyone encountered this? Please share how you fixed it (if you were able to ) thanks.

Edited by: William Wallace on 29/05/2013 21:47