jquery 활용 js 파일 include 하기

< script src="/common/js/jquery-1.7.1.min.js" >< /script >
< script src="/common/js/jquery.extended.js" >< /script >

# 방법 1  /=========================
$.include(
	'js/my.js',
	// my.js 로딩 후 my1.js 를 로딩함
	$.include('js/my1.js')
);

# 방법 2 /==============================
$.include('js/my.js',
	// my.js를 먼저 로딩 후 my1.js, my2.js 를 불러 들입니다.
	[
		$.include('js/src/my1.js'),
		$.include('js/src/my2.js')
	]
);

/**
 * $.include - script inclusion jQuery plugin
 * Based on idea from http://www.gnucitizen.org/projects/jquery-include/
 * @author Tobiasz Cudnik
 * @link http://meta20.net/.include_script_inclusion_jQuery_plugin
 * @license MIT
 */
// overload jquery's onDomReady
if ( jQuery.browser.mozilla || jQuery.browser.opera ) {
	document.removeEventListener( "DOMContentLoaded", jQuery.ready, false );
	document.addEventListener( "DOMContentLoaded", function(){ jQuery.ready(); }, false );
}
jQuery.event.remove( window, "load", jQuery.ready );
jQuery.event.add( window, "load", function(){ jQuery.ready(); } );
jQuery.extend({
	includeStates: {},
	include: function(url, callback, dependency){
		if ( typeof callback != 'function' && ! dependency ) {
			dependency = callback;
			callback = null;
		}
		url = url.replace('\n', '');
		jQuery.includeStates[url] = false;
		var script = document.createElement('script');
		script.type = 'text/javascript';
		script.onload = function () {
			jQuery.includeStates[url] = true;
			if ( callback )
				callback.call(script);
		};
		script.onreadystatechange = function () {
			if ( this.readyState != "complete" && this.readyState != "loaded" ) return;
			jQuery.includeStates[url] = true;
			if ( callback )
				callback.call(script);
		};
		script.src = url;
		if ( dependency ) {
			if ( dependency.constructor != Array )
				dependency = [dependency];
			setTimeout(function(){
				var valid = true;
				$.each(dependency, function(k, v){
					if (! v() ) {
						valid = false;
						return false;
					}
				})
				if ( valid )
					document.getElementsByTagName('head')[0].appendChild(script);
				else
					setTimeout(arguments.callee, 10);
			}, 10);
		}
		else
			document.getElementsByTagName('head')[0].appendChild(script);
		return function(){
			return jQuery.includeStates[url];
		}
	},
	readyOld: jQuery.ready,
	ready: function () {
		if (jQuery.isReady) return;
		imReady = true;
		$.each(jQuery.includeStates, function(url, state) {
			if (! state)
				return imReady = false;
		});
		if (imReady) {
			jQuery.readyOld.apply(jQuery, arguments);
		} else {
			setTimeout(arguments.callee, 10);
		}
	}
});

jquery 를 이용해 SELECT 메뉴를 손쉽게 컨트롤 해보자

좋은 소스를 만들어 주신 분께 먼저 감사합니다.
참 좋은 소스 인데요.

익스7, 8, 9, 오페라, 파이어폭스, 크롬, 사파리 에서 테스트 해 보았습니다.

다 잘 되더군요 역시 익스6은 안되는듯 ...
익스6은 버렸음 좋겠다 얼릉 사라졌음 하는 바램뿐

일단 jQuery 를 기반으로 만들어 졌기 때문에
jquery를 포함하고 있어야 합니다.

말보다 소스를 보시고
소스를 긁어다 테스트 해 보심이 더 빠를겁니다.

@ 자바 스크립트 /==========================================================

< script src="http://code.jquery.com/jquery.min.js" type="text/javascript">

< script type="text/javascript" >
var receiverMan = {
	itemList: null, // select option
	baseOption: {
		itemListSelector : 'select#itemList'
	},
	
	init: function(pOption) {
		this.baseOption = $.extend(this.baseOption, pOption);
		this.itemList = $(this.baseOption.itemListSelector);
	},
	selectedOptions: function() {
	    return this.itemList.find("option:selected");	
	}
	,
	add: function(data) {
		this.itemList.append($("").attr("value", data.value).text(data.text));
	}
	,
    del: function() {
    	// del selected all
    	this.selectedOptions().remove();
    }
	,
    clear: function() {
        // del all items
        this.itemList.find("option").remove();
    }
	,
    up: function() {        
    	var selectedOptions = this.selectedOptions();
    	var prev = $(selectedOptions).first().prev();
    	$(selectedOptions).insertBefore(prev);
    }
	,
    dn: function() {
    	var selectedOptions = this.selectedOptions();
        var next = $(selectedOptions).last().next();
        $(selectedOptions).insertAfter(next);
    }
	,
	selectedOne: function() {
		// return selected first item
		return { 
			value: this.selectedOptions().first().attr("value"),
			text:  this.selectedOptions().first().text()
			}
	}
	,
	selectedAll: function() {
        // return all selected item
		var r  = [];
		this.selectedOptions().each(function(idx, data) {
            r.push({
                value: $(this).attr("value"),
                text: $(this).text()
            });
        });
        return r;
    }
	,
   all: function() {
    	// return all
    	var r  = [];
	this.itemList.find("option").each(function(idx, data) {
    		r.push({
    			value: $(this).attr("value"),
                text: $(this).text()
    		});
    	});
    	return r;
    }
}



$(document).ready(function() {
	$('#receiverAdd').click(function() {
        receiverMan.add({text: 'test:'+(new Date().getTime()), value: '0001'  })
    });
    $('#receiverDel').click(function() {
        receiverMan.del();                
    });
    $('#receiverClear').click(function() {
        receiverMan.clear();                
    });
    $('#receiverUp').click(function() {
    	receiverMan.up();
    });
    $('#receiverDown').click(function() {
    	receiverMan.dn();
    });
    
	receiverMan.init({
		// itemListSelector : "your SELECT selector"
		itemListSelector : "select#itemList"
	});

	$('#itemList').change(function(){
		var args= receiverMan.selectedOne();
		alert(args['value']+' '+args['text']);
	});

	// 자동 등록 레이어 테스트 
	for(var i=0; i<7; i++){
		receiverMan.add({text: 'test:'+(new Date().getTime()), value: '000'+i  })
	}
});
< /script >

< style text="text/css" >
.receiverInputBox {
    width: 500px;
}
.itemList {
    width:300px;
    height:20px;
    font-size:100%;
    color:blue;
    background-color:#ffffff;
    border:0px solid #ffffff;
}
< /style >

< div>
    < div>
        < select name="itemList" id="itemList" class="itemList">
        < a href="#" id="receiverAdd">Add/
        < a href="#" id="receiverDel">Delete/
        < a href="#" id="receiverClear">Clear/
        < a href="#" id="receiverUp">Up/
        < a href="#" id="receiverDown">Down
    < /div>
< /div>

우리는 jquery 를 이용해서 서버와의 통신을 자주 하게 됩니다.
그런데 dataType : 'json'  으로 ajax 통신을 할때

크롬을 제외한 IE 등에서 parse error 를 발생합니다.
정말 난감할 뿐만 아니라 어처구니가 없는거죠

jquery 가 잘 만들어 졌지만 브라우저 마다 처리 방법들이 조금씩 다르다 보니
모두 호환 되도록 하는 방법 밖에 없는 것 같습니다.

그리하여 해결 방법은 이렇습니다.

@ Javascript /=====================================

< script >
function jsonAjax(uid)
{

   $.ajax({
    type: "post",
    url: "./test_json.php",
    cache: false,
    dataType :'text',
    data: {'uid':uid},
    success: function(data, status){
           var json = eval("(" + data + ")");
         // OR  var json =$.parseJSON(data);
           
	  if(typeof(json.result) != 'undefined')
	  {
		if(json.result != ''){
			alert(json.result);
		}else{
			$("#list_loop").empty(); //초기화
			$.each(json.msg, function(key,state) {
				$("#list_loop").append('
'+state["userid"]+' ('+state["name"]+')
');
			}); 
		}
	  }
     },
     error: onError
     });
     
     return false;
}

function onError(data, status, errorThrown){
    alert(data.responseText+' '+status+' '+errorThrown);
}
< /script >

@ PHP /============================================

<?php
# 회원정보 루프 배열 값
$loop[0] = array(
    'userid' => 'test1id',
    'name'  => '홍길동'
);

$loop[1] = array(
    'userid' => 'test1id',
    'name'  => '홍길동'
);


# json 최종결과
$args = array(
    'result' => 'ok',
    'msg'   => $loop
);

echo json_endcode($args);
exit;
?>

@ HTML /===========================================

< div id="list_loop"> 여기에 내용 결과 출력 < /div >

1. jquery를 이용한 ajax 통신을 할때 dataType 를 text 로 합니다.
2. text 값으로 받은 값을 eval 를 통해 json 데이타로 변환 한다.