jQuery 여러개의 Class가 적용된 객체 선택하기

Open API/Jquery|2018.11.29 10:50

How can I select an element with multiple classes in jQuery?

- without space.

여러개의 클래스가 지정된 객체를 선택하고자 할 때.. 어떻게 해야할까

- 띄어쓰기 없이 해야함.

<span class="a b c">multiple classes</span>


$(".a.b.c").trigger("click")




댓글()

중국에서 Google map 실행이 안되는 경우 해결 방법

Open API/Google|2018.10.23 14:42

중국내에서 Google map 실행이 안되는 경우 해결 방법


원인은 https 접속이 안되기 때문이고 

이 문제는 Google map FAQ에서 해결 방법을 제시해주고 있습니다.



아래 내용은 Google Map FAQ의 일부 발췌한 내용입니다.


Google Maps Platform products are served within China from the domain maps.google.cn. This domain does not support https. When making requests to Google Maps Platform products from China, please replace https://maps.googleapis.com with http://maps.google.cn.



중국에서 https://maps.googleapis.com 접속이 정상적으로 이뤄지지 않기 때문에


http 통신을 해야하고 중국내에서 이용할 수있는 도메인은 http://maps.google.cn 


아래와 같이 Google Map API javascript 파일 참조시에 도메인을 변경해줍니다.



<script src="http://maps.google.cn/maps/api/js?key=YOUR_API_KEY"
type="text/javascript">
</script>



내용이 변경될 수 있기 때문에 Google Map FAQ 링크를 함께 남깁니다.


https://developers.google.com/maps/faq#china_ws_access

댓글()

팝업 프린트 후 창 자동 닫기

Open API/그 외|2018.09.14 11:05

modal 팝업 , 일반 팝업 , 레이어 팝업 등등..온갖 팝업이 난무하는데


프린트하기가 너무 힘든 상황 통합으로 사용하기 위해서 방법을 찾아봤습니다.


어떤 경우 어떤 브라우저 버전에서는 


window.print() 후 window.close() 하면 


프린트 창이 뜨기도 전에 창이 닫히는 상황이 발생하기도하고..


포인트는 출력 후 onfocus 되었을때 창을 닫는다는 것.


최종 적으로는 아래 글에서 내용을 찾아서 처리했습니다.


여러 상황에 히스토리를 갖고 수정방법이 나열되어있습니다.


https://code-examples.net/en/q/6294d6


var content = "Hello";


newWin= window.open();

newWin.document.open();

newWin.document.write(content);

newWin.document.close();

setTimeout(function(){

	newWin.print();

	newWin.onfocus=function(){ newWin.close();}

},500);




태그 : onfucus, 닫기, 팝업

댓글()

ip 주소로 국가 조회하는 방법 about.ip2c.org API

Open API/그 외|2018.08.30 17:08

아이피주소로 국가 조회하기


서비스하는 내용이 국가별로 제한되는 부분이라


DB를 구축하자니 그 업데이트관리가 문제이고


API가 있지 않을까 해서 구글링을 통해 알게된 사이트입니다.



https://about.ip2c.org



Request : 


https://ip2c.org/8.8.8.8


Response : 


1;US;USA;United States


; 로 구분자가 지정되어있으며


0 : WRONG INPUT , 1 : NORMAL , 2 : UNKNOWN 


US : ISO 국가코드 








아래 내용은 about.ip2c.org 사이트에서 발췌한 INPUT/OUTPUT 설명입니다.

 
==== Accepted inputs: ============================================================

You can use http or https.

https://ip2c.org/XXX.XXX.XXX.XXX
or
https://ip2c.org/?ip=XXX.XXX.XXX.XXX
|
+ standard IPv4 from 0.0.0.0 to 255.255.255.255
+ e.g. we take your IP:
    |
    + URL looks like this:  https://ip2c.org/128.134.3.161
    |                       or
    |                       https://ip2c.org/?ip=128.134.3.161
    |
    + resulting string is:  1;KR;KOR;Korea Republic of


https://ip2c.org/XXXXXXXXXX
or
https://ip2c.org/?dec=XXXXXXXXXX
|
+ decimal number from 0 to 4294967295 (MAX_INT)
+ faster than ?ip= option, less server-side processing
+ to convert IPv4 to decimal you only need to know this:
    |
    + (IPv4) A.B.C.D == A*256^3 + B*256^2 + C*256 + D (decimal)
    + e.g.   5.6.7.8 == 5*256^3 + 6*256^2 + 7*256 + 8
                     == 5*16777216 + 6*65536 + 7*256 + 8
                     == 83886080 + 393216 + 1792 + 8
                     == 84281096


https://ip2c.org/s
or
https://ip2c.org/self
or
https://ip2c.org/?self
|
+ processes caller's IP
+ faster than ?dec= option but limited to one purpose - give info about yourself


Caution
Some clients (e.g. ASP) may have issues while trying to open a file over HTTP.
In that case a slash / preceding ?ip= is obligatory.
==== Possible outputs: ===========================================================

You can use http or https.

0;;;WRONG INPUT
|
+ your request has not been processed due to invalid syntax
    |
    + e.g. bad IPv4 like 300.400.abc.256
    + e.g. bad decimal like 2a3b4c or bigger than MAX_INT


1;CD;COD;COUNTRY
|
+ contains two-letter (ISO 3166) and three-letter country codes, and a full country name
+ country name may be multi-word and contain spaces
+ e.g. we take your IP:
    |
    + URL looks like this:  https://ip2c.org/128.134.3.161
    |                       or
    |                       https://ip2c.org/?ip=128.134.3.161
    |
    + resulting string is:  1;KR;KOR;Korea Republic of


2;;;UNKNOWN
|
+ given ip/dec not found in database or not yet physically assigned to any country


The first digit indicates status so you don't have to always parse the whole string.
Output is always semicolon delimited text/plain - you can pass it to any type of application.


태그 : API, IP, 국가조회

댓글()

[Google Map] Places search box 구글 자동완성을 이용한 위경도 값 가져오기

Open API/Google|2018.07.04 15:28

구글맵 위치정보를 활용한 

자동완성 기능을 적용시키는 샘플



구글의 정보는 정말 말로 할수없을 만큼 방대합니다.


그 중에서 맵데이터는 정말 놀라운데요.


기존에 장소(정확히는 도시별)별 위경도 값을 직접 데이터관리하던 부분을


구글 장소 검색 ( Places Search Box ) 기능으로 대체하게 되었습니다.


잘 구축된 API를 잘 가져다 쓰면 되기 때문에 참 편하죠.


자동완성의 반응속도도 빠르고 나름 직접 관리하는 것보다 정확하기 때문에 


여러모로 유용할것같습니다.


실제로 구현 하는 경우에는 가장 하단에 Js 참조할때 key 값을 입력해야합니다.


https://maps.googleapis.com/maps/api/js?key=여기에키값입력&libraries=places&callback=initAutocomplete

가져온 데이터에서 위경도 값을 읽어오는 부분은 
 

// place 에서 위경도 값을 읽어올 수 있음. 


▲  이라고 주석이 달린 부분을 참고하시면 될것같습니다.








◎ 실제로 구글 API의 Response값을 체크해서 데이터를 확인해보겠습니다. ( 크롬기준 )




1. 샘플 페이지를 열어서 F12를 눌러 개발자 도구를 실행하고 Network 탭으로 이동

그리고 키워드 검색을 통해 자동완성목록이 보여지는것을 확인.

그와 동시에 AutocompletionService.GetQueryPredictions 페이지를 호출하여 값을 가져옴.


(아래 이미지는 클릭하면 커집니다)




2. 목록 중 하나를 선택 했을 때 PlaceService.GetPlaceDetails 페이지를 호출하여 상세 정보를 가져옴.


(아래 이미지는 클릭하면 커집니다)



3. 해당 호출에 대한 Request


(아래 이미지는 클릭하면 커집니다)



4. 해당 호출에 대한 Response 데이터 , 이렇게 확인이 가능합니다.

실제로 Respons되는 데이터의 항목이 다양한데 이 또한 필요에 따라 활용이 가능할것같습니다.


(아래 이미지는 클릭하면 커집니다)





아래 코드의 99%는 


https://developers.google.com/maps/documentation/javascript/examples/places-searchbox


에서도 확인 하실 수 있습니다.



<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<title>Places Searchbox</title>
	<style>
		/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

		#map {
			height: 100%;
		}

		/* Optional: Makes the sample page fill the window. */

		html,
		body {
			height: 100%;
			margin: 0;
			padding: 0;
		}

		#description {
			font-family: Roboto;
			font-size: 15px;
			font-weight: 300;
		}

		#infowindow-content .title {
			font-weight: bold;
		}

		#infowindow-content {
			display: none;
		}

		#map #infowindow-content {
			display: inline;
		}

		.pac-card {
			margin: 10px 10px 0 0;
			border-radius: 2px 0 0 2px;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			outline: none;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
			background-color: #fff;
			font-family: Roboto;
		}

		#pac-container {
			padding-bottom: 12px;
			margin-right: 12px;
		}

		.pac-controls {
			display: inline-block;
			padding: 5px 11px;
		}

		.pac-controls label {
			font-family: Roboto;
			font-size: 13px;
			font-weight: 300;
		}

		#pac-input {
			background-color: #fff;
			font-family: Roboto;
			font-size: 15px;
			font-weight: 300;
			margin-left: 12px;
			padding: 0 11px 0 13px;
			text-overflow: ellipsis;
			width: 400px;
		}

		#pac-input:focus {
			border-color: #4d90fe;
		}

		#title {
			color: #fff;
			background-color: #4d90fe;
			font-size: 25px;
			font-weight: 500;
			padding: 6px 12px;
		}

		#target {
			width: 345px;
		}
	</style>
</head>

<body> <input id="pac-input" class="controls" type="text" placeholder="Search Box">
	<div id="map"></div>
	<script>
		// This example adds a search box to a map, using the Google Place Autocomplete
		// feature. People can enter geographical searches. The search box will return a
		// pick list containing a mix of places and predicted search terms.
		// This example requires the Places library. Include the libraries=places
		// parameter when you first load the API. For example:
		// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
		function initAutocomplete() {
			var map = new google.maps.Map(document.getElementById('map'), {
				center: {
					lat: -33.8688,
					lng: 151.2195
				},
				zoom: 13,
				mapTypeId: 'roadmap'
			});
			// Create the search box and link it to the UI element.
			var input = document.getElementById('pac-input');
			var searchBox = new google.maps.places.SearchBox(input);
			map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
			// Bias the SearchBox results towards current map's viewport.
			map.addListener('bounds_changed', function() {
				searchBox.setBounds(map.getBounds());
			});
			var markers = [];
			// Listen for the event fired when the user selects a prediction and retrieve
			// more details for that place.
			searchBox.addListener('places_changed', function() {
				var places = searchBox.getPlaces();
				if (places.length == 0) {
					return;
				}
				// Clear out the old markers.
				markers.forEach(function(marker) {
					marker.setMap(null);
				});
				markers = [];
				// For each place, get the icon, name and location.
				var bounds = new google.maps.LatLngBounds();
				places.forEach(function(place) {
					if (!place.geometry) {
						console.log("Returned place contains no geometry");
						return;
					}

                                        // place 에서 위경도 값을 읽어올 수 있음. 
					console.log(place.geometry.location.lat());
					console.log(place.geometry.location.lng());

					var icon = {
						url: place.icon,
						size: new google.maps.Size(71, 71),
						origin: new google.maps.Point(0, 0),
						anchor: new google.maps.Point(17, 34),
						scaledSize: new google.maps.Size(25, 25)
					};
					// Create a marker for each place.
					markers.push(new google.maps.Marker({
						map: map,
						icon: icon,
						title: place.name,
						position: place.geometry.location
					}));
					if (place.geometry.viewport) {
						// Only geocodes have viewport.
						bounds.union(place.geometry.viewport);
					} else {
						bounds.extend(place.geometry.location);
					}
				});
				map.fitBounds(bounds);
			});
		}
	</script>
	<script src="https://maps.googleapis.com/maps/api/js?key=&libraries=places&callback=initAutocomplete" async defer></script>
</body>

</html>


댓글()

Javascript , Data URL을 이용한 엑셀 파일 생성하기

Open API/그 외|2018.02.21 17:12





javascript 에서 테이블 구조의 html을 전달 받아 Excel 파일을 생성하는 함수 입니다.


기본적으로 서버에서 만들어진 내용을 다운받도록 하지만 

클라이언트 쪽에서 바로 xls 파일을 생성 할 수 있도록 하는 방법입니다.

기본문법 : data:[<mediatype>][;base64],<data>



    
function fnExcelReport(cont, fileName)
{
	var ua = window.navigator.userAgent;
         
	if ( (navigator.appName == 'Netscape' && ua.search('Trident') != -1) || (ua.indexOf("msie") != -1) )       // IE
	{
		newWin = window.open();
		newWin.document.open("txt/html","replace");
		newWin.document.write(cont);
		newWin.document.close();
		newWin.focus();
		newWin.document.execCommand("SaveAs", true, fileName + ".xls");
		newWin.close();
	}
	else   //other browser
	{
		var a = document.createElement('a');
		var data_type = 'data:application/vnd.ms-excel';
		a.href = data_type + ', ' + encodeURIComponent(cont);
		a.download = fileName+'.xls';
		a.click();
		e.preventDefault();
	}
}


상세 내용은 MDN 웹 Document 를 참조하세요.


링크 : https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

댓글()

jquery ajax 동기처리가 안되는 경우.. async 옵션이 적용 안될 때.

Open API/Jquery|2017.09.20 18:59

jQuery ajax 옵션중에는 async 옵션이 있습니다.

이것은 기본적으로 ajax가 비동기 처리를 하지만 필요에 따라 동기 요청을 하기 위한 옵션이지만

최근 경험상 적용이 되지 않는 것이 확인되어 api 사이트를 확인해보니 

아래와 같은 내용이 확인이 됩니다.


크로스 도메인일 경우 데이터 타입이 jsonp라면 지원되지 않는다. 

위의 조건 외에도 1.8 버전 이후부터 지원되지 않음이라고 명시되어있고 

콜백 함수를 이용하도록 명시가 되어있으니 

1.8버전 혹은 최신 버전을 사용하는 경우 문제가 될 것같습니다.


그런데...되는 경우도 있고..안되는 경우도 있고...모호하네요.


확실하게 그냥 콜백 함수를 사용해야겠습니다.


 

  async (default: true)
  Type: Boolean
By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp"requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done().


http://api.jquery.com/jQuery.ajax/

댓글()

modal 팝업창에서 datepicker 사용 시 연도 월 Select box가 열리지 않는 문제 해결 방법

Open API/Jquery|2017.09.18 13:51


Bootstrap modal 팝업창에서 datepicker 사용 시 


changeMonth , changeYear 옵션을 true 로 사용할 경우 정상적으로 펼쳐지지 않고


바로 닫히는 버그가 있는데 꽤 오래된 상황임에도 업데이트가 되어지지 않고 있습니다.




하지만,  역시 스택오버플로우 


https://stackoverflow.com/questions/22050641/month-select-in-datepicker-inside-a-bootstrap-modal-wont-work-in-firefox


해결 방안을 제시해줍니다.


$('#modal').on('show', function () {
    $.fn.modal.Constructor.prototype.enforceFocus = function () { };
});




위와 같이 Show 혹은 modal 팝업 활성화 이후에

    $.fn.modal.Constructor.prototype.enforceFocus = function () { };

위와 같은 코딩을 실행해주면 정상적으로 연도 및 월 변경이 가능합니다.


댓글()

카카오링크 보내기 ( Kakao.Link )

Open API/kakao|2017.01.18 15:20



동적으로 바뀌는 내용의 카카오링크를 보내는 예제입니다.



카카오 Developers 페이지에서도 확인 하실 수 있습니다.

https://developers.kakao.com/docs/js



추가적인 함수들은 아래 링크에서 확인가능합니다.

https://developers.kakao.com/docs/js-reference#kakao_link



적용하기 위해서는 api 와 url 정보 변경이 필요합니다.


샘플 Url : http://www.uhoon.co.kr/dev/kakao/83.html



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width"/>
<title>KakaoLink Demo(Dynamic) - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<h3>카카오톡 앱이 설치되어 있는 모바일 기기라면 아래의 링크가 동작합니다.</h3>
<a id="kakao-link-btn" href="javascript:sendLink()">
<img src="//dev.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"/>
</a>
<script type='text/javascript'>
  //<![CDATA[
    // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('eb3c1b62b32108278b664b7fc35d5174');

    function sendLink() {
		Kakao.Link.sendTalkLink({
			label: '카카오톡 내보내기',
			webLink: {
				text:'http://dev.uhoon.co.kr',
				url:'dev.uhoon.co.kr'
			}
		});
    }
  //]]>
</script>

</body>
</html>


댓글()

카카오톡 개발자 등록 및 애플리케이션 등록

Open API/kakao|2017.01.18 15:14

카카오 API도 버전이 올라가며 많이 바뀌었네요.


밑바닥 부터 천천히 하나씩 짚어봐야겠습니다.


첫발을 내딛기 위해서는 등록부터..




▼  https://developers.kakao.com/


Kakao Developers에 로그인 합니다.





▼ https://developers.kakao.com/apps


내 애플리케이션 메뉴에서 앱 만들기를 선택합니다.





▼ 앱 이름을 적고 앱 만들기를 클릭



▼ 필요한 경우 앱 아이콘을 업로드 할수도 있습니다.





▼ 등록하면 인증키가 바로 발급됩니다.






▼ 키가 발급되었어도 플랫폼 등록을 해야 실제 사용이 가능합니다.






▼  당분간은 어플 사용할 계획이 없으므로 웹으로 등록해봅니다.




▼ 실제로 키가 유출되어도 플랫폼 등록이 안되어있게되면 인증 오류가 발생하므로 걱정없습니다..ㅎㅎ




이렇게하면 카카오 API를 이용할 준비가 되었습니다.


하나씩 이용해봐야겠습니다.

태그 : API, 카카오

댓글()