Category Archives: JQuery

upload file in JQuery

LEUNG    upload file in JQuery 有 74 則迴響 

function imageManager(){
	var fd = new FormData(); 
	var files = $('#file')[0].files[0]; 
	fd.append('file', files); 

	$.ajax({
	  type:"POST",
	  url:"http://127.0.0.1/ajax/do-item.ajax.php",
	  data: fd, 
		contentType: false, 
		processData: false, 
	  beforeSend:function(){
		$("#ajax-file").html("Loading...");
	  },
	  success:function(data){
		$("#ajax-file").html(decodeURI(data));
	  }
	});
}


<?php
   var_dump($_FILES);
?>

setInterval or setTimeout

LEUNG    setInterval or setTimeout 有 55 則迴響

setInterval

<!DOCTYPE html>
<html>
	<head>
		<title>Jquery setinterval stop after sometime</title>
		<script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
		<script type='text/javascript'>
			$.ajaxSetup({ cache: false })
		</script>
	</head>
	<body>
		<input type="button" value="Start count!" onclick="startTimer()"> 
		<input type="button" value="Stop count!" onclick="stopTimer()"> 
		<br/>
		<div id="countdown_text">Placeholding text</div>
		<script type="text/javascript">
			var timer = null, 
			value = 0;

			function startTimer(){
				if (timer !== null) return;
				timer = setInterval(function () {
					document.getElementById('countdown_text').innerHTML = ++value;
				}, 1000); 
			}

			function stopTimer(){
				clearInterval(timer);
				timer = null
			}		
		</script>
	</body>
</html>

setTimeout

<!DOCTYPE html>
<html>
<body>
	<title>Jquery setinterval stop after sometime</title>
		<script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
		<script type='text/javascript'>
			$.ajaxSetup({ cache: false })
		</script>
		<button onclick="startCount()">start</button>
		<button onclick="stopCount()">stop</button>
		<div id="countdown_text">Placeholding text</div>

		<script>
			var c = 0;
			var t;
			var timer_is_on = 0;

			function timedCount() {
				document.getElementById('countdown_text').innerHTML = c;
				c = c + 1;
				t = setTimeout(
						function(){ 
							timedCount() 
						}, 1000
					);
			}

			function startCount() {
				if (!timer_is_on) {
					timer_is_on = 1;
					timedCount();
				}
			}

			function stopCount() {
				clearTimeout(t);
				timer_is_on = 0;
			}
		</script>
</body>
</html>

Remark :
setTimeout (無限loop)
setTimeout (僅行一次)

Loading Page in JQuery

LEUNG    Loading Page in JQuery 有 61 則迴響

index.php

<script src="loading.js" type="text/javascript"></script>
<link media="screen" rel="stylesheet" type="text/css" href="slyte.css" />

<div id='loading' style='display: none;'>
     Loading...
</div>

<a onclick="activate_ajax_loading('content_1.html')" href="#content_1">content_1</a> |
<a onclick="activate_ajax_loading('content_2.html')" href="#content_2">content_2</a>

slyte.css

<style>
#container { line-height: 20px; width: 500px; height: 500px; margin: 20px 0; padding: 10px; border: 1px solid #999; }
// Loding Color is Blue
#loading { MARGIN-LEFT: 90%; position: absolute; top: 0; left: 0; color: white; background-color: blue; padding: 5px 10px; font: 12px Arial; }
// Loading Color is red
#loading { position: absolute; top: 0; left: 0; color: white; background-color: red; padding: 5px 10px; font: 12px Arial; }
</style>

Loading.js

<script type='text/javascript'>
activate_ajax_loading = function(url) {
   $('#loading').ajaxStart(function(){
       $(this).fadeIn();
   }).ajaxStop(function(){
       $(this).fadeOut();
   });
   $("#content").load(url);
}
</script>

<strong>content_1.html</strong>
<pre class="brush:php">content1.html</pre>
<strong>content_2.html</strong>
<pre class="brush:php">content2.html</pre>