คลังเก็บบล็อก

jQuery Ajax Debugging


ข้อเสียอย่างหนึ่งเวลาใช้ Ajax คือ เวลามี error อะไร user จะไม่ทราบอะไรเลย เพราะว่าเป็นการโหลดแบบเบื้องหลัง บางทีโหลดเกือบจะเสร็จแล้ว แต่เห็นหน้านิ่งๆ เลย refresh ใหม่ซะเลย ความจริง jQuery มี event onErrors ไว้สำหรับจัดการเวลาใช้ Ajax แล้วมีปัญหาอยู่แล้ว แต่การที่จะต้องมาเขียนกำหนดให้ทุกตัวที่เรียกใช้ Ajax ก็ไม่สดวกเลย จึงมี $.ajaxSetup ไว้ให้สามารถกำหนดคุณสมบัติที่เป็นส่วนกลางให้คำสั่ง Ajax ต่างๆ ทั้ง $.Ajax, $.get, $.json, $.post ใช้ร่วมกัน แค่ประกาศใช้ $.ajaxSetup เอาไว้ล่วงหน้า

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery.ajaxSetup</title>
</head>

<body>
<script src="assets/jQuery/jquery.min.js"></script> 
<script>
$.ajaxSetup({
	"cache": false,
	"error": function(jqXHR, exception)
	{
		if(jqXHR.status === 0)
		{
			alert('Not connect.\n Verify Network.');
		}
		else if(jqXHR.status == 404)
		{
			alert('Requested page not found. [404]');
		}
		else if(jqXHR.status == 500)
		{
			alert('Internal Server Error [500].');
		}
		else if(exception === 'parsererror')
		{
			alert('Requested JSON parse failed.');
		}
		else if(exception === 'timeout')
		{
			alert('Time out error.');
		}
		else if(exception === 'abort')
		{
			alert('Ajax request aborted.');
		}
		else
		{
			alert('Uncaught Error.\n' + jqXHR.responseText);
		}
	},
	"scriptCharset": "utf-8",
	"timeout": 60000
});

$.post('nofile.php', function(data){
	alert(data);
});
</script>
</body>
</html>

เรื่องที่เกี่ยวข้อง

Ajax Jquery Tinymce Serialize


เวลาใช้ jQuery serialize() ดึงข้อมูลจากฟอร์ม ถ้ามี WYSIWYG Editor อยู่ หลายๆครั้ง จะได้ข้อมูลไม่ครบ เพราะช่องที่เรากรอกข้อมูลลงไป จริงๆแล้วมันไม่ใช้ textarea แต่จะเป็นอีก layer ที่อยู่ข้างบนอีกที ถ้าจะเอาข้อมูลออกมาต้องคัดลอกข้อมูลกลับไปที่ textarea ก่อน
ถ้าเป็น tinymce ใช้คำสั่ง tinyMCE.get(‘ ไอดี ของ textarea’).getContent()

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tinymce & Jquery serialize By Pitt Phunsanit</title>
</head>

<body>
<form id="plus" method="post" action="somepage">
  <textarea name="article" id="articleId" style="width:100%"></textarea>
  <input type="submit">
</form>
<script src="assets/jQuery/jquery.min.js"></script> 
<script src="assets/tinymce/tiny_mce.js"></script> 
<script>
$(function(){
	$('#plus').submit(function(event){
		event.preventDefault();
		$('#articleId').val(tinyMCE.get('articleId').getContent());
		alert('after '+$('#articleId').serialize());
	});
});

tinyMCE.init({
	mode : "textareas",
	theme : "simple"
});
</script>
</body>
</html>
%d bloggers like this: