show submit button after delay with jquery mobile

arielbf
arielbf used Ask the Experts™
on
I'm trying to delay the appearance of the submit button....
here is my code:

<!DOCTYPE html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>

<div data-role="page">
	<div data-role="content">
		<fieldset>
			<form>
		
				<input type="submit" data-theme="b" value="continue" id="submitButton" name="continue">
			
			</form>
		</fieldset>
	</div>
</div>

<script>
$(document).ready(function(){
    function hidesubmit(){
	  $("#submitButton").hide();
	}
	function showsubmit(){
	  $("#submitButton").show();
	}
});
setTimeout(hidesubmit, 0);
setTimeout(showsubmit, 2000);
</script>


</body>
</html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Robert SchuttSoftware Engineer

Commented:
Either put the setTimeout calls inside the document.ready()  function or put the function definitions outside it. In this case, looking at the placement of the code, I think you can just use:
<script>
    function hidesubmit(){
	  $("#submitButton").hide();
	}
	function showsubmit(){
	  $("#submitButton").show();
	}
setTimeout(hidesubmit, 0);
setTimeout(showsubmit, 2000);
</script>

Open in new window

Author

Commented:
I've try it and it is still not working...
Robert SchuttSoftware Engineer

Commented:
Can you be a bit more specific? I've put it in a jsFiddle and it works without a problem so maybe there is something else influencing your code or html page?

see: http://jsfiddle.net/robert_schutt/7wefn6wg/
Become a Microsoft Certified Solutions Expert

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

Author

Commented:
I've checked the jsFiddle and it is working. For some reason it is not working when I test my page. Here it is...
delay1.html
Software Engineer
Commented:
There is a <div> surrounding that button doing the styling. You could use the following code but it's kind of a 'hack' I'm afraid...
<script>
  function hidesubmit(){
	  $("#submitButton").closest("div").hide();
	}
	function showsubmit(){
	  $("#submitButton").closest("div").show();
	}
setTimeout(hidesubmit, 0);
setTimeout(showsubmit, 10000);
</script>

Open in new window

Author

Commented:
It is working now (-:

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial