jQuery 객체 초기화

Open API/Jquery|2016. 10. 28. 10:17
반응형



Jquery에서 $('#폼').reset()  스크립트로는 초기화가 되지 않습니다..


지정객체 또는 반복문을 이용해서 초기화를 해야합니다.



폼 전체 초기화

$("form[name='폼네임']").each(function(){ 
    this.reset();
});

특정 객체 초기화

// 타입 : input , text , button 등..
$("form[name='폼네임']").find('타입').each(function() {       
   $(this).val("");
});


댓글()

jquery on 이벤트 핸들러

Open API/Jquery|2016. 10. 28. 10:12
반응형


jQuery on 이벤트 핸들러 사용방법



API  Link : http://api.jquery.com/on/


어쩌구 저쩌구 해서..


delegate , live , bind   =>  on 사용하시면 됩니다.



function myHandler(event) {
  alert(event.data.foo);
}
 
$(function() {
    $("p").on("click", {foo: "bar"}, myHandler)
});
<p>TEST</p>
$(function() {
    $("p").on("click", function(){
        alert( $(this).text() );
    });
});
 
<p>TEST</p>

댓글()

jQuery 에러 리포팅 , Ajax 디버깅 ( JS , ASP ) - 오류메시지 확인하기

Open API/Jquery|2016. 10. 28. 09:31
반응형



Jquery 를 이용한 에러 리포팅 소스


//Ajax 호출 함수. 예시.
function detailView()
{
     $.ajax({
          type: "POST",
          dataType: "xml",
          url: "xxx.asp",
          data: { mode : "DETAIL"},
          success: function(xmlRS){
              // 성공처리
          }
          ,error: function(xhr, ajaxOptions, thrownError){
               //에러처리
               fnSendErrorReport(xhr.responseText);
               alert("Detail Load Error");
          }
     });
}
// 에러 리포팅 함수.
function fnSendErrorReport(errorMsg)
{
     $.ajax({
          type: "POST",
          dataType: "text",
          url: "errorReport.asp",
          data: { mode : "ERRORREPORT", errorMsg : errorMsg }
     });
}
If mode = "ERRORREPORT" Then
     errorMsg = Request("errorMsg")
 
     MailBody = "domain : " & dom & " ("& Date() & " "  &hour(time) &":"& minute(time) &":"& second(time) &")" & vbCrlf
     MailBody = MailBody  & "error Msg : " & errorMsg " & vbCrlf
     If errorMsg<> "" Then
          cdoEmailResult = fnCdoEmailComponent("보낸", "받는", "", 업체명 & " Error Report ", MailBody,"")
     End If
End if



댓글()

jQuery SelectBox Option 값 초기화 및 수정 삭제

Open API/Jquery|2016. 10. 28. 09:16
반응형



jQuery 를 이용한 Select Box 값 초기화 및 수정 / 삭제 하는 기능 샘플 코드입니다.
 
//전부 삭제
 $("form[name='"+formId +  "'] select[name='"+objId+"'] option").remove();    
 
 
//하나 삭제
$('#ttt').children("[value='04']").remove();
 
 
//추가할때
$('#ttt').append('<option value="05">Split</option>');
 
 
// select box 초기화 하는 함수.
function fnResetSelectBox(formName,objId)
{
     $("form[name='"+formName+  "'] select[name='"+objId+"'] option").remove();   
     $("form[name='"+formName+  "'] select[name='"+objId+"']").append("<option value="">==SELECT==</option>");
}
 
 
//select box 기본 값 남기고 삭제 하기
function fnResetSelectBox(formName,objName )
{
    $("form[name='"+formName+"'] select[name='"+ objName +"'] option").not("[value='']").remove();
}
 
//특정 index로 값 설정하기
$('#selectBox option:eq(3)').attr('selected', 'selected')



댓글()

Jquery를 이용한 XML 데이터 파싱

Open API/Jquery|2016. 10. 28. 09:14
반응형



많은 부분의 Jquery UI API들이 대부분이런 형태로 XML 데이터를 파싱하여 배열에 넣고


UI를 생성하는 방식으로 처리되고 있는 것 같다.


XML 파일

<?xml version="1.0" encoding="utf-8" ?>
- <root>
    - <item>
         <no>번호</no>
         <title>제목</title>
         <type>타입</type>
      </item>
  </root>

Javascript 소스

$.ajax({
   type: "get"
  ,dataType: "xml"
  ,url: "xml파일 주소"
  ,success: function(xml){
      if($(xml).find("item").length > 0){ // null check
         $(xml).find("item").each(function(){ // item 수만큼 loop
            // item 요소 중 title 읽어오기.
            var title = $(this).find("title").text();
         });
      }
   }
   ,error: function(){ alert("xml error!!"); }
}); 


댓글()

jQuery 메뉴 바 샘플 코드

Open API/Jquery|2016. 10. 28. 09:10
반응형



간편하게 사용할 수 있는 메뉴 바 샘플 코드입니다.



 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title id='Description'>The sample demonstrates how to center the menu items.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getTheme();
                $("#jqxMenu").jqxMenu({ width: '50%', height: '30px', theme: theme });
             
                var centerItems = function () {
                    var firstItem = $($("#jqxMenu ul:first").children()[0]);
                    firstItem.css('margin-left', 0);
                    var width = 0;
                    var borderOffset = 2;
                    $.each($("#jqxMenu ul:first").children(), function () {
                        width += $(this).outerWidth(true) + borderOffset;
                    });
                    var menuWidth = $("#jqxMenu").outerWidth();
                    firstItem.css('margin-left', (menuWidth / 2 ) - (width / 2));
                }
                centerItems();
                $(window).resize(function () {
                    centerItems();
                });
            });
        </script>
           <div id='jqxMenu'>
                <ul>
                    <li>Booking 
                        <ul style='width: 250px;'>
                            <li><a href="#Financial">Booking</a></li>
                            <li><a href="#Education">Group Booking</a></li>
                        </ul>
</li>
                    <li>Basic Code
                        <ul style='width: 250px;'>
                            <li><a href="#Education">Nation Code</a></li>
                            <li><a href="#Financial">City Code</a></li> 
<li>Basic Code
<ul style='width: 250px;'>
<li><a href="#Education">Nation Code</a></li>
<li><a href="#Financial">City Code</a></li> 
</ul>
</li>
</ul>
                    </li>
                    <li>Event
                        <ul>
                            <li><a href="#PCProducts">Promotion</a></li> 
                            <li>Main Page Event Management
                                <ul style='width: 220px;'>
                                    <li><a href="#ConsumerPhoto">Tab</a></li>
                                    <li><a href="#Mobile">Event Hotel</a></li> 
<li>Basic Code
<ul style='width: 250px;'>
<li><a href="#Education">Nation Code</a></li>
<li><a href="#Financial">City Code</a></li> 
</ul>
</li>
                                </ul>
                            </li>
                            <li><a href="#">Event Image</a></li>
                        </ul> 
                    </li>
                </ul>
            </div>
 
    </div>
</body>
</html>


댓글()

Jquery 스터디

Open API/Jquery|2016. 10. 28. 09:07
반응형



http://api.jquery.com/


A 부터 Z 까지..  


공부하기..  


API 샘플코드 직접 코딩해보고 


이해하기 위한 약간의 추가 코딩으로 익히기 미션 수행 중..

댓글()