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/

댓글(0)

jQuery 특정 객체가 화면에 보이는지 여부 확인

Open API/Jquery|2016.11.17 11:32



종종 해당 객체가 보여지고있는지 여부에 따라 어떤 액션을 취해야할 경우가 있습니다.


아래와 같이 체크 합니다.


if($(selector).is(":visible"))
{
    alert("노출되고있음.");
}else{
    alert("숨겨져있음.");
}


댓글(0)

jQuery Formatnumber , 콤마처리

Open API/Jquery|2016.11.17 11:31



gitgub Url :  https://github.com/customd/jquery-number



숫자형 처리를 위한 플러그인으로 주요 처리 포맷은 아래와 같습니다.


정수 형


$.number( 5020.2364 ); // Outputs 5,020  


소수점 둘째 자리 까지


 $.number( 5020.2364, 2 ); // Outputs: 5,020.24




상세 옵션에 대해서는 


https://github.com/customd/jquery-number


댓글(0)

jQuery Select Box Option 동적 추가 , 이동, 삭제 , 복사

Open API/Jquery|2016.11.17 11:29




Select box 간 Option 값 이동, 삭제 , 추가 하는 샘플코드 입니다.


Test Url : http://www.uhoon.co.kr/test/5237.html



<!DOCTYPE html>
<html>
<head>
    <title>append option / remove option</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
</head>
<body>
    <table>
        <tr>
            <td>
                <select id="sel" name="sel" style="WIDTH: 245px; HEIGHT: 240px;" size="20" multiple>
                    <option value="1" >1</option>
                    <option value="2" >2</option>
                    <option value="3" >3</option>
                    <option value="4" >4</option>
                    <option value="5" >5</option>
                    <option value="6" >6</option>
                    <option value="7" >7</option>
                    <option value="8" >8</option>
                    <option value="9" >9</option>
                    <option value="10" >10</option>
                </select>
                 
 
                 
 
                <input type="button" value="Delete" id="btnRemoveLeft"/>
                <input type="button" value="Selected Value " id="getValue"/>
                <input type="button" value="All Value " id="getSelectedValue"/>
                 
 
                 
 
                <input type="text" id="addOption"  style="width:183px;"/>
                <input type="button" value="Add" id="btnAdd"/>
            </td>
            <td>
                <input type="button" value="Move=>" id="btnMoveRight"/>
 
                <input type="button" value="<=Move" id="btnMoveLeft"/>
 
                <input type="button" value="Copy=>" id="btnCopyLeft"/>
 
                <input type="button" value="<=Copy" id="btnCopyLeft2"/>
 
            </td>
            <td>
                <select id="sel2" name="sel2" style="WIDTH: 245px; HEIGHT: 240px;" size="20" multiple>
                </select>
                 
 
                 
 
                <input type="button" value="Delete" id="btnRemoveRight"/>
                <input type="button" value="Selected Value " id="getValue2"/>
                <input type="button" value="All Value" id="getSelectedValue2"/>
                 
 
                 
 
                <input type="text" id="addOption2"  style="width:183px;"/>
                <input type="button" value="Add" id="btnAdd2"/>
            </td>
        </tr>
    </table>
</body>
 
    <script type="text/javascript">
    <!--
        $(function(){
            $("#btnRemoveLeft").on("click",function(){
                $('#sel option:selected').each( function() {
                    $(this).remove();
                });
            });
 
            $("#btnRemoveRight").on("click",function(){
                $('#sel2 option:selected').each( function() {
                    $(this).remove();
                });
            });
 
            $("#btnMoveRight").on("click",function(){
                $('#sel option:selected').each( function() {
                    $(this).remove().appendTo('#sel2');
                });
            });
 
            $("#btnMoveLeft").on("click",function(){
                $('#sel2 option:selected').each( function() {
                    $(this).remove().appendTo('#sel');
                });
            });
 
            $("#getValue").on("click",function(){
                var values = "";
                $('#sel option').each( function() {
                    values= values + "/" + $(this).val();
                });
                alert(values);
            });
 
            $("#getValue2").on("click",function(){
                var values = "";
                $('#sel2 option').each( function() {
                    values= values + "/" + $(this).val();
                });
                alert(values);
            });
 
            $("#getSelectedValue").on("click",function(){
                var values = "";
                $('#sel option:selected').each( function() {
                    values= values + "/" + $(this).val();
                });
                alert(values);
            });
 
            $("#getSelectedValue2").on("click",function(){
                var values = "";
                $('#sel2 option:selected').each( function() {
                    values= values + "/" + $(this).val();
                });
                alert(values);
            });
 
            $("#btnCopyLeft").on("click",function(){
                $('#sel option:selected').each( function() {
                    $(this).clone().appendTo('#sel2');
                });
            });
 
            $("#btnCopyLeft2").on("click",function(){
                $('#sel2 option:selected').each( function() {
                    $(this).clone().appendTo('#sel');
                });
            });
 
            $("#btnAdd").on("click",function(){
                if($('#sel').find("[value='"+$('#addOption').val().replace('"','\'')+"']").length == 0)
                {
                    $('#sel').append('<option value="'+$('#addOption').val().replace('"','\'')+'">'+$('#addOption').val()+"</option>");
                }else{
                    alert("있어요.");
                }
            });
 
            $("#btnAdd2").on("click",function(){
                if($('#sel2').find("[value='"+$('#addOption2').val().replace('"','\'')+"']").length == 0)
                {
                    $('#sel2').append('<option value="'+$('#addOption2').val().replace('"','\'')+'">'+$('#addOption2').val()+"</option>");
                }else{
                    alert("있어요.");
                }
            });
        });
 
        $(window).load(function(e){
 
        });
 
    //-->
    </script>
</html>

댓글(0)

jQuery FadeIn , FadeOut 을 이용한 간단한 메인 배너 이미지 노출

Open API/Jquery|2016.11.17 11:15



FadeIn , FadeOut 을 이용한 간단한 이미지 노출.

하나가 사라지며 하나가 보여지는 그런... 

워낙 플러그인들이 잘 나와있지만

간단한걸 굳이 서치해서 적용하기 귀찮아서 가볍게 쓰기위해 만들었습니다.


사용법 

: 이미지에 "main_img" class를 추가.


* html

<div class="main_img"></div>
<div class="main_img" style="display:none;"></div>
<div class="main_img" style="display:none;"></div>
 
<!-- 별도 버튼등이 있는 경우...안써도 됨. -->
<ul id="main_bar">
    <li>
        <a href="Javascript:fnMain_image(0);"><img id="main_bar1" src="/images/main/bar_on.jpg" ></a>
    </li>
    <li>
        <a href="Javascript:fnMain_image(1);"><img id="main_bar2" src="/images/main/bar_off.jpg" ></a>
    </li>
    <li>
        <a href="Javascript:fnMain_image(2);"><img id="main_bar3" src="/images/main/bar_off.jpg" ></a>
    </li>
</ul>


* JS

<script type="text/javascript">
<!--
    // 메인 롤링 s
    var main_img = 0;
 
    function fnMain_image(img_num)
    {
        if (img_num == 0 || img_num)
        {
            main_img = img_num;
        }else{
            main_img = parseInt(main_img) + 1;
 
            if( main_img > $(".main_img").length -1 )
            {
                main_img = 0;
            }
        }
 
        for (i=0;i < $(".main_img").length ; i++)
        {
            $(".main_img").eq(i).fadeOut('slow');
        //  $("#main_bar > li:eq("+i+") > a > img").attr("src","/images/main/bar_off.jpg");
        }
 
        $(".main_img").eq(main_img).fadeIn('slow');
        //$("#main_bar > li:eq("+main_img+")  > a > img").attr("src","/images/main/bar_on.jpg");
    }
 
    setInterval(function(){ fnMain_image(); }, 3000);
    // 메인 롤링 e
//-->
</script>


댓글(0)

jQuery woothemes FlexSlider - 슬라이더

Open API/Jquery|2016.11.17 11:11



플러그인 형태로 쉽게 이용할 수 있는 슬라이더 입니다.



Plugin Url : http://source.woothemes.com/flexslider/


download :  woothemes-FlexSlider-version-2.2.2-0-gce5441b.zip


License : MIT License




사용 샘플 코드 


Step 1.

<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>

Step 2.

<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
  </ul>
</div>



Step 3.

<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>



Step 3.


옵션 : 상세 설명 https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties

namespace: "flex-",             //{NEW} String: Prefix string attached to the class of every element generated by the plugin
selector: ".slides > li",       //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
animation: "fade",              //String: Select your animation type, "fade" or "slide"
easing: "swing",               //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
direction: "horizontal",        //String: Select the sliding direction, "horizontal" or "vertical"
reverse: false,                 //{NEW} Boolean: Reverse the animation direction
animationLoop: true,             //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
smoothHeight: false,            //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode  
startAt: 0,                     //Integer: The slide that the slider should start on. Array notation (0 = first slide)
slideshow: true,                //Boolean: Animate slider automatically
slideshowSpeed: 7000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
animationSpeed: 600,            //Integer: Set the speed of animations, in milliseconds
initDelay: 0,                   //{NEW} Integer: Set an initialization delay, in milliseconds
randomize: false,               //Boolean: Randomize slide order
  
// Usability features
pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: false,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
useCSS: true,                   //{NEW} Boolean: Slider will use CSS3 transitions if available
touch: true,                    //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
video: false,                   //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
  
// Primary Controls
controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
prevText: "Previous",           //String: Set the text for the "previous" directionNav item
nextText: "Next",               //String: Set the text for the "next" directionNav item
  
// Secondary Navigation
keyboard: true,                 //Boolean: Allow slider navigating via keyboard left/right keys
multipleKeyboard: false,        //{NEW} Boolean: Allow keyboard navigation to affect multiple sliders. Default behavior cuts out keyboard navigation with more than one slider present.
mousewheel: false,              //{UPDATED} Boolean: Requires jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) - Allows slider navigating via mousewheel
pausePlay: false,               //Boolean: Create pause/play dynamic element
pauseText: 'Pause',             //String: Set the text for the "pause" pausePlay item
playText: 'Play',               //String: Set the text for the "play" pausePlay item
  
// Special properties
controlsContainer: "",          //{UPDATED} Selector: USE CLASS SELECTOR. Declare which container the navigation elements should be appended too. Default container is the FlexSlider element. Example use would be ".flexslider-container". Property is ignored if given element is not found.
manualControls: "",             //Selector: Declare custom control navigation. Examples would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
sync: "",                       //{NEW} Selector: Mirror the actions performed on this slider with another slider. Use with care.
asNavFor: "",                   //{NEW} Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider
  
// Carousel Options
itemWidth: 0,                   //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
itemMargin: 0,                  //{NEW} Integer: Margin between carousel items.
minItems: 0,                    //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
maxItems: 0,                    //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
move: 0,                        //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
                                 
// Callback API
start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
end: function(){},              //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
added: function(){},            //{NEW} Callback: function(slider) - Fires after a slide is added
removed: function(){}           //{NEW} Callback: function(slider) - Fires after a slide is removed


댓글(0)

jQuery Org Chart - 조직도 그리기

Open API/Jquery|2016.11.17 11:05




Jquery 를 이용한 조직도 그리기 PlugIn 입니다.


Test Url : http://www.uhoon.co.kr/test/3551/3551.html


Plugin Url : http://th3silverlining.com/2011/12/01/jquery-org-chart-a-plugin-for-visualising-data-in-a-tree-like-structure/




댓글(0)

jQuery Slider Bar / 슬라이더 바 3종 샘플

Open API/Jquery|2016.11.17 11:03



슬라이더 바 샘플입니다.


Jquery UI 사이트의 Slider bar 중 사용빈도 수가 높은 샘플을 정리해보았습니다.


Test Url : http://www.uhoon.co.kr/test/3377.html


참고 Url : http://jqueryui.com/slider/



1. 최대/최소값을 지정하는 슬라이더 바


2. 구간을 선택하는 슬라이더 바


3. 최대/최소 값중 증가값을 지정하는 슬라이더 바




<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>jQuery UI Slider</title>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
	<script src="//code.jquery.com/jquery-1.10.2.js"></script>
	<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
	<script>
		$(function() {
			$("#slider-range-max").slider({
				range: "max",
				min: 1,
				max: 10,
				value: 2,
				slide: function(event, ui) {
					$("#amount").val(ui.value);
				}
			});
			$("#amount").val($("#slider-range-max").slider("value"));


			$("#slider-range").slider({
				range: true,
				min: 0,
				max: 500,
				values: [75, 300],
				slide: function(event, ui) {
					$("#amount2").val("$" + ui.values[0] + " - $" + ui.values[1]);
				}
			});
			$("#amount2").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));

			$("#slider").slider({
				value:10,
				min: 0,
				max: 100,
				step: 10,
				slide: function( event, ui ) {
					$( "#amount3" ).val( "$" + ui.value );
				}
			});
			$( "#amount3" ).val( "$" + $( "#slider" ).slider( "value" ) );
		});
	</script>
</head>

<body>

	<p>
		<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
	</p>
	<div id="slider-range-max"></div>

	<p>
		<input type="text" id="amount2" readonly style="border:0; color:#f6931f; font-weight:bold;">
	</p>
	<div id="slider-range"></div>

	<p>
		<input type="text" id="amount3" readonly style="border:0; color:#f6931f; font-weight:bold;">
	</p>
	<div id="slider"></div>
</body>

</html>

댓글(0)

jQuery 페이지 또는 객체에서 특정 키워드 강조하기

Open API/Jquery|2016.11.17 10:59


특정 페이지 또는 객체에서 키워드 찾는 함수..


1원짜리는 아니고...3원쯤의 가치가..;;



Test Url : http://www.uhoon.co.kr/test/3143.html



<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>KeyWord Highlights</title> 
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
    </head> 
    <script type="text/javascript">
    <!-- 
        $(document).ready(function(){
            fnKeyWordHighlights("p","감기");
        });
 
        function fnKeyWordHighlights(obj,keyword)
        {
            $(obj).each(function(){  
                $(this).html($(this).html().replace(eval("/"+keyword+"/gi"), "<span style='color:red;font-weight:bold;'>"+keyword+"</span>"));
            });
        } 
    //-->
    </script>
</head>
<body > 
    <p>나는 오늘 감기에 걸렸다. 지겨운 감기.. 너무 싫다.</p>
</body> 
</html>


댓글(0)

jQuery Star Rating Plugin - 별점 주기

Open API/Jquery|2016.11.16 10:38



별점 주기 플러그인입니다.


가끔 유용하게 사용하는 기능 쓸라면 코딩하기 귀찮은.....( _ _)..


Plugin Url : http://wbotelhos.com/raty


DownLoad : https://github.com/wbotelhos/raty


(기본 샘플외에도 많은 기능이 있습니다.)



Test Url : http://www.uhoon.co.kr/test/6979.html


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="Pragma" content="no-cache"/>
        <meta http-equiv="Expires" content="-1"/>
        <title>jQuery Raty - A Star Rating Plugin</title>
 
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript" src="/test/2979/js/jquery.raty.js"></script>
 
    </head>
    <body>
        <div id="star" ></div>
 
        <div style="padding-top:20px;">
            <label for="starRating">Value : </label><input type="text" id="starRating" value="3"/>
        </div>
 
        <div style="padding-top:20px;">
            <label for="displayStarRating">Value : </label><span id="displayStarRating" style="padding-left:20px;">3</span>
        </div>
    </body>
 
    <script type="text/javascript">
        $(function() {
            $('div#star').raty({
                score: 3
                ,path : "/test/2979/img"
                ,width : 200
                ,click: function(score, evt) {
                    $("#starRating").val(score);
                    $("#displayStarRating").html(score);
                }
            });
        });
    </script>
</html>

옵션


cancel      : false                                          // Creates a cancel button to cancel the rating.
cancelHint  : 'Cancel this rating!'                          // The cancel's button hint.
cancelOff   : 'cancel-off.png'                               // Icon used on active cancel.
cancelOn    : 'cancel-on.png'                                // Icon used inactive cancel.
cancelPlace : 'left'                                         // Cancel's button position.
click       : undefined                                      // Callback executed on rating click.
half        : false                                          // Enables half star selection.
halfShow    : true                                           // Enables half star display.
hints       : ['bad', 'poor', 'regular', 'good', 'gorgeous'] // Hints used on each star.
iconRange   : undefined                                      // Object list with position and icon on and off to do a mixed icons.
mouseout    : undefined                                      // Callback executed on mouseout.
mouseover   : undefined                                      // Callback executed on mouseover.
noRatedMsg  : 'Not rated yet!'                               // Hint for no rated elements when it's readOnly.
number      : 5                                              // Number of stars that will be presented.
numberMax   : 20                                             // Max of star the option number can creates.
path        : ''                                             // A global locate where the icon will be looked.
precision   : false                                          // Enables the selection of a precision score.
readOnly    : false                                          // Turns the rating read-only.
round       : { down: .25, full: .6, up: .76 }               // Included values attributes to do the score round math.
score       : undefined                                      // Initial rating.
scoreName   : 'score'                                        // Name of the hidden field that holds the score value.
single      : false                                          // Enables just a single star selection.
size        : 16                                             // The size of the icons that will be used.
space       : true                                           // Puts space between the icons.
starHalf    : 'star-half.png'                                // The name of the half star image.
starOff     : 'star-off.png'                                 // Name of the star image off.
starOn      : 'star-on.png'                                  // Name of the star image on.
target      : undefined                                      // Element selector where the score will be displayed.
targetFormat: '{score}'                                      // Template to interpolate the score in.
targetKeep  : false                                          // If the last rating value will be keeped after mouseout.
targetText  : ''                                             // Default text setted on target.
targetType  : 'hint'                                         // Option to choose if target will receive hint o 'score' type.
width       : undefined                                      // Manually adjust the width for the project.

댓글(0)