Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Jquery include causing page to reload

    For some reason, my page will load and then immediately refresh when I include the jquery script in the header like:
    Code:
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    Without that, the page doesn't refresh (but doesn't work fully as im using jquery in several spots).

    I have stripped the page to just the bare bones (no javascript at all etc) and it STILL instantly refreshes.

    Code:
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, initial-scale=0.65">
    		<title>STS Prototype</title>
    		<link rel="stylesheet" type="text/css" href="css/StyleSheet1.css" />
    		<link rel="stylesheet" type="text/css" href="css/jquerymobile.css" />
    		<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    		<script src="js/jquerymobile.js"></script>
    		
    	</head>
    	<body onload="SetVars();btnFirstClick()">
    			<div data-role="page" data-theme="c"  style="min-height:100%">
    	<div id="ContentArea">	
    		<table id="master" height="700px" width="1100px" border="0" cellpadding="0" cellspacing="0">
    			<tr>
    				<td id="tdOuterCTX">
    				<table id="tblContextList"  border="0" cellpadding="0" cellspacing="0">
    					<tr>
    						<td id="tdContextList">
    <div id="divContextList" style="height:700px;width:185px;overflow: auto;font-size:10px;">
    <? echo ($ContextList); ?>
    </div></td>
    <td><div id="divCTXExpander" style="height:700px;width:32px;" onclick="ctxExpanderClick();"><a href="#" id="btnExpand" data-mini="true" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true" style="position:absolute;top:50%"></a></div></div></td>
    					</tr>
    				</table></td>
    				<td>
    				<table id="content" height="526px" width="900px" border="0" cellpadding="0" cellspacing="0">
    					<tr>
    						<td align="center" bgcolor="C0C0C0" onclick="ToggleQuestion();" width="448" height="526px";><textarea readonly id="Question" name="Question" style="height:526px;width:448px;text-align:center"></textarea></td><td width="448" height="526px" onclick="ToggleAnswer();" align="center" bgcolor="C0C0C0"><textarea readonly id="Answer" name="Answer" style="height:526px;width:447px;overflow:auto"></textarea></td>
    					</tr>
    				</table>
    				<table height="178px" width="900px" border="0" cellpadding="0" cellspacing="0">
    					<tr>
    						<td valign="top">
    							<form name="textForm" action="ElementScreen.php" method="post">
    							<table border="0" cellpadding="0" cellspacing="0">
    								<tr>
    									<td>
    										<textarea readonly name="RuleNumber" id="RuleNumber" style="width:90px;height:30px;text-align:center;display:inline;font-weight:bold"></textarea>
    										<textarea class="SkillText" readonly name="Article" id="Article" style="width:610px;height:30px;text-align:center;display:inline;font-weight:bold"></textarea>
    										<textarea readonly name="Rule" id="Rule" style="width:90px;height:30px;text-align:center;display:inline;font-weight:bold"></textarea>
    										<textarea readonly name="SubRule" id="SubRule" style="width:90px;height:30px;text-align:center;display:inline;font-weight:bold"></textarea>
    										<input type="hidden" id="ruleNum" value="0"></input>
    									</td>
    								</tr>
    								<tr>
    									<td valign="top"><textarea readonly name="DEng" id="DEng" style="width:896px;height:30px;text-align:center;display:inline;font-weight:bold"></textarea>			
    									</td>
    								</tr>
    								<tr><td><div data-role="controlgroup" data-type="horizontal" id="NavButtons" align="right" style="display:inline">
    					<a data-role="button" href="#" onclick="btnFirstClick(); return false" id="btnFirst">First</a>
    					<a data-role="button" href="#" onclick="btnPrevClick(); return false" id="btnPrev">Prev</a>
    					<a data-role="button" href="#" onclick="btnNextClick(); return false" id="btnNext">Next</a>
    					<a data-role="button" href="#" onclick="btnLastClick(); return false" id="btnLast">Last</a>
    				</div></td></tr><tr><td><a data-mini="true" data-role="button" href="#" onclick="btnVideoClick(); return false" id="btnVideo" data-inline="true">Video</a>
    									<a data-mini="true" data-role="button" href="#" onclick="btnLearningClick(); return false" id="btnLearning" data-inline="true">Learn</a></td></tr>
    									<tr><td><input id="hdnEvent" name="hdnEvent" type="hidden" value="FX"/>
    										<input id="hdnRuleSwitch" name="hdnRuleSwitch" type="hidden" value="Yes"/><input onclick="ClickTest();" type="submit" id="btnSubmit" name="btnSubmit" value="Go to Element Study"></td></tr>
    							</table>
    							</form>
    						</td>
    					</tr>
    				</table></td>
    			</tr>
    		</table>
    		</div>
    		<div id="VideoArea" name="VideoArea">
    		<table>
    			<tr>
    				<td width="140px" align="center" valign="top">Video Select:
    					<table border="0" cellpadding="0" cellspacing="0">	
    					<tr><td style="font-size:12">
    						<div style="display:inline;text-align: center;text-decoration:underline" id="cat0Div">Cat0</div><br/>
    						<a href="#" data-mini="true" data-role="button" data-inline="true" id="btnVideo1" style="width:40px;height:30px" onClick="btnVideoNumberClick(1);">1</a>
    						<a href="#" data-mini="true" data-role="button" data-inline="true" id="btnVideo2" style="width:40px;height:30px" onClick="btnVideoNumberClick(2);">2</a>
    					</td></tr>
    					<tr><td>
    						<a href="#" data-mini="true" data-role="button" data-inline="true" id="btnVideo3" style="width:40px;height:30px" onClick="btnVideoNumberClick(3);">3</a>
    						<a href="#" data-mini="true" data-role="button" data-inline="true" id="btnVideo4" style="width:40px;height:30px" onClick="btnVideoNumberClick(4);">4</a>
    					</td></tr>
    					<tr><td style="font-size:12">
    						<div style="display:inline;text-align: center;text-decoration:underline" id="cat1Div">Cat1</div><br/>
    						<a href="#" data-mini="true" data-role="button" data-inline="true" id="btnVideo5" style="width:40px;height:30px" onClick="btnVideoNumberClick(5);">1</a>
    						<a href="#" data-mini="true" data-role="button" data-inline="true" id="btnVideo6" style="width:40px;height:30px" onClick="btnVideoNumberClick(6);">2</a>
    					</td></tr>
    					<tr><td>
    						<a href="#" data-mini="true" data-role="button" data-inline="true" id="btnVideo7" style="width:40px;height:30px" onClick="btnVideoNumberClick(7);">3</a>
    						<a href="#" data-mini="true" data-role="button" data-inline="true" id="btnVideo8" style="width:40px;height:30px" onClick="btnVideoNumberClick(8);">4</a>
    					</td></tr>
    					<tr><td style="font-size:12">
    						<div style="display:inline;text-align: center;text-decoration:underline" id="cat2Div">Cat2</div><br/>
    						<a href="#" data-mini="true" data-role="button" data-inline="true" id="btnVideo9" style="width:40px;height:30px" onClick="btnVideoNumberClick(9);">1</a>
    						<a href="#" data-mini="true" data-role="button" data-inline="true" id="btnVideo10" style="width:40px;height:30px" onClick="btnVideoNumberClick(10);">2</a>
    					</td></tr>
    					<tr><td >
    						<a href="#" data-mini="true" data-role="button" data-inline="true" id="btnVideo11" style="width:40px;height:30px" onClick="btnVideoNumberClick(11);">3</a>
    						<a href="#" data-mini="true" data-role="button" data-inline="true" id="btnVideo12" style="width:40px;height:30px" onClick="btnVideoNumberClick(12);">4</a>
    					</td></tr>
    					<tr><td style="font-size:12">
    						<div style="display:inline;text-align: center;text-decoration:underline" id="cat3Div">Cat3</div><br/>
    						<a href="#" data-mini="true" data-role="button" data-inline="true" id="btnVideo13" style="width:40px;height:30px" onClick="btnVideoNumberClick(13);">1</a>
    						<a href="#" data-mini="true" data-role="button" data-inline="true" id="btnVideo14" style="width:40px;height:30px" onClick="btnVideoNumberClick(14);">2</a>
    					</td></tr>
    					<tr><td>
    						<a href="#" data-mini="true" data-role="button" data-inline="true" id="btnVideo15" style="width:40px;height:30px" onClick="btnVideoNumberClick(15);">3</a>
    						<a href="#" data-mini="true" data-role="button" data-inline="true" id="btnVideo16" style="width:40px;height:30px" onClick="btnVideoNumberClick(16);">4</a>
    					</td></tr>
    					<tr><td style="font-size:12">
    						<div style="display:inline;text-align: center;text-decoration:underline" id="cat4Div">Cat4</div><br/>
    						<a href="#" data-mini="true" data-role="button" data-inline="true" id="btnVideo17" style="width:40px;height:30px" onClick="btnVideoNumberClick(17);">1</a>
    						<a href="#" data-mini="true" data-role="button" data-inline="true" id="btnVideo18" style="width:40px;height:30px" onClick="btnVideoNumberClick(18);">2</a>
    					</td></tr>
    					<tr><td>
    						<a href="#" data-mini="true" data-role="button" data-inline="true" id="btnVideo19" style="width:40px;height:30px" onClick="btnVideoNumberClick(19);">3</a>
    						<a href="#" data-mini="true" data-role="button" data-inline="true" id="btnVideo20" style="width:40px;height:30px" onClick="btnVideoNumberClick(20);">4</a>
    					</td></tr>
    					</table></td>
    				<td>
    					<video id="VideoPlayer" width="640" height="480" controls="controls">
    			  <source src="VideoFiles/FX/5FX1-20b.WebM" type='video/webm; codecs="vp8.0, vorbis"'/>
    			  Your browser does not support the video tag.
    			</video>
    			<table width="640"><tr><td align="left" width="100px">
    			<div style="display:inline" id="FrameCount">Frame: 0</div></td>
    			<td align="left" width="300px">
    			<input id="sldSpeed" type="range" data-style="none" data-highlight="true" min="0" max="1" value="1" step=".25" onchange="ChangeVideoSpeed(this.value)" /></td>
    			<td align="left" width="90px"><div style="display:inline" id="range">Full</div></td>
    			<td align="right">
    				<div data-role="controlgroup" data-type="horizontal"><a href="#" data-role="button" data-icon="arrow-l" data-iconpos="notext" id="btnBack" onmouseup="stepBackwardEnd();" onmouseout="stepBackwardEnd();" onmousedown="stepBackward();">Back</a>
    				<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="notext" id="btnForward" onmouseup="stepForwardEnd();" onmouseout="stepForwardEnd();" onmousedown="stepForward();">Forward</a></div>
    				
    			</td></tr></table>
    			
    			</td>
    				<td valign="top"><table><tr><td>
    					<div id="Notes"></div>
    					</td></tr></table></td>
    			</tr>
    		</table>	
    		</div>
    		</div>
    	</body>
    </html>
    That code with nothing else is causing the page to load, and then instantly refresh itself. If I remove the jquery reference it doesn't refresh anymore.

    This is a problem because I have PHP code on that page normally. So when the page refreshes, all of the post data from the previous page is nuked and part of the page doesn't work properly as things reset to default since its refreshing the entire page and seeing all blank POST data instead of what was passed before the refresh.

    Any ideas? Removing that jquery include 100% solves this, except that the entire page and scripting relies on jquery. So I need to know what exactly in that above chunk of code is causing the refresh.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Do you have a link for us? jQuery doesn’t usually cause a page refresh all by itself, there must be something else.

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That is 100% of the code on the page. I don't have that specific instance up anywhere that you could view. I stripped out all of the javascript for testing purposes and it still has the same behavior. That is what you see above.

    There is one line of PHP code but its not a reload or anything.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •