JQuery Tip

출처 : [ JQUERY ] SRC 변경하기
[php] json_encode 함수가 없을때 해결 방법
AJAX 심플 예제~ json
json_encode
Iterate through elements with similar IDs ( wildcard search )

img src 변경

HTML

<img id="imgSrc" src="1.jpg">

JQuery

$("#imgSrc").bind("click", function(){
  $("#imgSrc").attr("src", "2.jpg");
});

속성값 조회

alert($("#img_reverse").attr("src"));

JQuery AJAX - PHP JSON 연동

json_encode.php (옵션 - PHP엔진에서 json_encode 함수가 지원하지 않는 경우)

<?
function json_encode($a=false){ 
	if(is_null($a)) return 'null'; 
	if($a === false) return 'false'; 
	if($a === true) return 'true'; 
	if(is_scalar($a)){ 
		if(is_float($a)) return floatval(str_replace(",", ".", strval($a))); 
		if(is_string($a)){ 
			static $jsonReplaces = array(array("\\", "/", "\n", "\t", "\r", "\b", "\f", '"'), array('\\\\', '\\/', '\\n', '\\t', '\\r', '\\b', '\\f', '\"')); 
			return '"' . str_replace($jsonReplaces[0], $jsonReplaces[1], $a) . '"'; 
		} else return $a; 
	} 
	$isList = true; 
	for($i=0, reset($a); $i<count($a); $i++, next($a)){ 
		if(key($a) !== $i){ 
			$isList = false; 
			break; 
		} 
	} 
	$result = array(); 
	if($isList){ 
		foreach($a as $v) $result[] = json_encode($v); 
		return '[' . join(',', $result) . ']'; 
	} else{ 
		foreach($a as $k => $v) $result[] = json_encode($k).':'.json_encode($v); 
		return '{' . join(',', $result) . '}'; 
	} 
}
?>

get_user_info.php (json 데이타 생성 php 소스)

<?
include "lib/config.php";

if(!function_exists("json_encode")) { 
	include "json_encode.php";
}

$sql="select * from user_info a where a.user_id = '$user_id'";
$voc_row=DBarray($sql);

$arr = array(
  'user_id' => $voc_row[user_id], 
  'name' => iconv("EUC-KR","UTF-8", $voc_row[name]), 
  'tel' => $voc_row[tel], 
  'email' => $voc_row[email]
);

echo json_encode($arr);
?>

JQuery AJAX 호출

function getUserInfo(parma_user_id) {
	$.ajax({
		url: 'get_user_info.php',
		type: 'GET',
		dataType: 'json',
		data: {
			user_id: parma_user_id
		},
		success : function(result){
			$('#user_id_text').html(result.user_id);
			$('#user_name_text').html(result.name);
			$('#user_tel_text').html(result.tel);
			$('#user_email_text').html(result.email);
		},
		error : function(XMLHttpRequest, textStatus, errorThrown) {
			alert('There was an error.');
		}
	});	
}

Dropdown Menu

출처 - Dropdown Menu

		<ol class="lnb" id="documenter_nav">
			<li><a class="current" href="<c:url value='/index.cmx'/>">홈페이지</a></li>
			<li><a href="<c:url value='/info.cmx'/>">소개</a></li>
			<li><a href="#using_retina_graphics">매뉴얼</a></li>
			<li><a href="#creating_galleries">회원가입</a></li>
			<li><a href="#last_words">결제하기</a></li>
			<li><a href="#template_elements">관리자 모드</a>
				<ol class="sub01" style="display:none;">
					<li><a href="#template_elements_columns">사용자 현황</a>
					<li><a href="#template_elements_lists">포인트 사용현황</a>
					<li><a href="#template_elements_on_off_toggle.">세부 설정</a>
				</ol>
			</li>
		</ol>

javascript

<script type="text/javascript">  
$(function(){  
 $("ol.sub").hide();  
 $("ol.lnb li").hover(function(){  
  $("ol:not(:animated)",this).slideDown("fast");  
 },  
 function(){  
  $("ol",this).slideUp("fast");  
 })
});  
</script>

반복문 each

<div class="grid1_wrap" data-last="true" style="position: relative; height: 300px;">
	<div class="grid1"
		style="position: absolute; left: 0px; top: 0px; -webkit-transition: -webkit-transform; transition: -webkit-transform; -webkit-transform: translate3d(0px, 0px, 0px);">
		<div class="grid1_inner" data-template="text/0">
			<ul class="uio_text">

			</ul>
		</div>
		
		<div id="rowDumy" style="display: none">
			<li id="row_user" class="ut_item" style="height: 80px">
				<a href="javascript:void(0);" 
					class="ut_a" data-clk="cont1">
					<span class="user_list_info"></span>
					<span id="user_status" style="color: red; font-weight: bold;"></span>
					<br/><span class="reg_date" style="display: none;">입사일자 : </span>
				</a>
			</li>
		</div>
	</div>
</div>

javascript

function getUserList(user_status) {
	//
	try {
		$.ajax({
			type: 'POST',
			url: '<c:url value="/json.cmx"/>',
			dataType: 'json',
			data: {
				cmd : 'user_data',
				subcmd : 'list',
				dept_id : ${dept_info.id}
			},
			success: function(result)
			{
				$('.grid1_wrap').height(result.data.list.length * 82);
				
				$.each(result.data.list, function(index, data)
				{
					var row = $('#row_user').clone().attr('id','user_id_' + data.id)
					row.find('.ut_a').attr('user_id',data.id).attr('user_name', data.user_name);
					row.find('.ut_a').attr('href', "javascript:goItemList("+data.id+",'"+data.user_name+"');");
					row.appendTo('.uio_text');
					
					row.find('.user_list_info').html(data.user_name);
					if (data.delete_yn == 2) {
						row.find('#user_status').html('퇴사');
					} else if (data.delete_yn == 3) {
						row.find('#user_status').html('출산휴가');
					}
					
					if (data.reg_date!=undefined) {
						var date=new Date(data.reg_date);
						row.find('.reg_date').html('입사일자 : ' + date.format("yyyy년 MM월 dd일 a/p hh시 mm분"));
					}
				});
			},
			error : function(XMLHttpRequest, textStatus, errorThrown) {
				alert('There was an error.');
			}
		});
	} catch(e) {
		alert(e);
	}
}

엘리먼트 each

		$( "li.ut_item" ).each(function( index ) {
			//console.log( index + ": " + $( this ).text() );
			$( this ).find('#btnSaveSurvey').show();
			$( this ).find('#btnSavePhoto').show();
		});

-