'Javascript'에 해당되는 글 4건

  1. 2014.04.24 jquery validation에서 validation method에 많은 파라미터 보낼때 by 파이팅야
  2. 2014.04.18 jquery validation depends by 파이팅야
  3. 2014.04.17 jquery loading image by 파이팅야
  4. 2014.04.07 (dialog 바깥쪽) click 시 jquery dialog 닫기 by 파이팅야

jquery validation에서 validation method에 많은 파라미터 보낼때

Javascript 2014. 4. 24. 17:57

날짜값이 N만큼 차이 나는지 확인하는 validation method 추가 시

(첫번째 parameter값인 'param[0]'에 에러메시지의 '{0}'값이 있어야 함)

// Validation Method

jQuery.validator.addMethod("datetimeDiffOver", function(value, element, param) {

        var startDate = $(param[1]).datetimepicker('getDate');

        var endDate = $(param[2]).datetimepicker('getDate');

        var diffDays = Math.ceil((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24)) - 1;

        return diffDays <= param[0];

}, '검색 기간을 {0}일이하로 설정해 주시기 바랍니다.');

 

// Validator

var searchValidator= $("#frmSearch").validate({

        rules: {

               searchStart : {

                       datetimeDiffOver : [30, '#txtSearchStart', '#txtSearchEnd']

               }

        }

});


Posted by 파이팅야
,

jquery validation depends

Javascript 2014. 4. 18. 16:42


아래 코드 처럼 사용하지 말고

// validation method 추가

jQuery.validator.addMethod("guid", function(value, element, param) {

        var searchVal = $.trim($(element).val());

       

        if ($(param).val() == "Guid" && searchVal != "") {

               var re = /^(\{){0,1}[0-9a-fA-F]{8}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{12}(\}){0,1}$/;

               return re.test(searchVal);

        }

        return true;

}, 'GUID 형식에 맞게 입력해주세요.');


// 검색용 Validator

var searchValidator= $("#frmSearch").validate({

        rules: {

               searchValue : {

                       maxlength: 50,

                       guid : "#sltSearchType"

               }

        }

});



아래 코드처럼 사용해야 'guid' validation method의 재 사용성이 커진다.

// validation method 추가

jQuery.validator.addMethod("guid", function(value, element, param) {

        var searchVal = $.trim($(element).val());

        var re = /^(\{){0,1}[0-9a-fA-F]{8}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{12}(\}){0,1}$/;

        return re.test(searchVal);

}, 'GUID 형식에 맞게 입력해주세요.');


// 검색용 Validator

var searchValidator= $("#frmSearch").validate({

        rules: {

               searchValue : {

                       maxlength: 50,

                       guid : {

// param : [1, 'a']    // param값 셑팅 시 사용

                              depends : function(element) {

                                      // 검색조건이 guid이고 검색내용이 있는경우 GUID가 유효한지 확인

                                      return $("#sltSearchType").val() == "Guid"

                                             && $.trim($(element).val()) != "";

                              }

                       }

               }

        }

});


참고 URL

http://jqueryvalidation.org/validate#rules

Posted by 파이팅야
,

jquery loading image

Javascript 2014. 4. 17. 17:31

AJAX event 순서가 https://api.jquery.com/Ajax_Events/ 와 같으니

$(document).ready(function() {

        // loading image <body>에 추가

        $('img')

               .attr("id", "loading")

               .attr("src", "resources/images/loading_image.gif")

               .css("position", "absolute")

               .css("left", "47%")    // 50%로하고 margin-xxx값 넣거나 걍 left,top값 적당 비율로 넣기

               .css("top", "47%")  // body,screen,window 등 기준에 따라서 중간 위치값이 달라질듯

               //.css("margin-left", "-17px") // [image width / 2]

               //.css("margin-top", "-17px") // [image width / 2]

               .css("display", "none")

               .fadeTo(0, 0.7) // for opacity filter

               .appendTo("body");

});


모든 ajax에 적용 시

$(document).ajaxSend(function() {

        $("#loading").show();

});

$( document ).ajaxComplete(function() {

        $( "#loading" ).hide();

});


특정 ajax만 적용 시

// 서버 목록 조회 후 tab 추가

$.ajax({

        url: "server/list",

        beforeSend : function () {

               $("#loading").show();

        },

        complete : function() {

               $( "#loading" ).hide();

        },

});



AJAX event 순서

  • ajaxStart (Global Event)
    This event is triggered if an Ajax request is started and no other Ajax requests are currently running.
    • beforeSend (Local Event)
      This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be.)
    • ajaxSend (Global Event)
      This global event is also triggered before the request is run.
    • success (Local Event)
      This event is only called if the request was successful (no errors from the server, no errors with the data).
    • ajaxSuccess (Global Event)
      This event is also only called if the request was successful.
    • error (Local Event)
      This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request).
    • ajaxError (Global Event)
      This global event behaves the same as the local error event.
    • complete (Local Event)
      This event is called regardless of if the request was successful, or not. You will always receive a complete callback, even for synchronous requests.
    • ajaxComplete (Global Event)
      This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.
  • ajaxStop (Global Event)
    This global event is triggered if there are no more Ajax requests being processed.

사용 예


Posted by 파이팅야
,

(dialog 바깥쪽) click 시 jquery dialog 닫기

Javascript 2014. 4. 7. 11:37

modal인 경우

$(document).ready(function() {

    $("#dialog").dialog({

        bgiframe: true,

        autoOpen: false,

        height: 100,

        modal: true,

        open: function() {

        $('.ui-widget-overlay').off('click');

        $('.ui-widget-overlay').on('click', function() {

                $('#dialog').dialog('close');

            })

        }

    });

});


modal이 아닌 경우

// id가 btnServiceList button 클릭 시 divServiceList dialog 보여줄때

$(document).ready(function() {

$("#divServiceList").dialog(

    { modal: false },

    {open : function() {

        $('body').off("click");

        $('body').on("click", function(e){

            if($('#divServiceList').dialog('isOpen')

                       && !$(e.target).closest('#btnServiceList').length

                       && !$(e.target).is('.ui-dialog, a')

                       && !$(e.target).closest('.ui-dialog').length

                       ){

                        $('#divServiceList').dialog('close');

            }

        });

    }},

    {close : function() {

        $('body').off("click");

    }}

);

}


Posted by 파이팅야
,
◀ 이전페이지 1 다음페이지 ▶

티스토리툴바