[jQuery] :input 선택자 

폼 태그 내 모든 입력 관련 선택



출처 : http://api.jquery.com/input-selector/

Description: Selects all input, textarea, select and button elements.

  • version added: 1.0jQuery( ":input" )

The :input selector basically selects all form controls.

Additional Notes:

  • Because :input is a jQuery extension and not part of the CSS specification, queries using :input cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :input to select elements, first select the elements using a pure CSS selector, then use.filter(":input").

Example:

Finds all input elements.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
<style>
textarea { height:25px; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</form>
<div id="messages">
</div>
<script>
var allInputs = $(":input");
var formChildren = $("form > *");
$("#messages").text("Found " + allInputs.length + " inputs and the form has " +
formChildren.length + " children.");
// so it won't submit
$("form").submit(function () { return false; });
</script>
</body>
</html>


Posted by airlueos
,

[jQuery] XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin

jQuery로 서버에 ajax 요청할 경우 종종 보게 되는 Origin 문제

해결

1. 서버 - 헤더 정보를 셋팅하고 ResponseEntity 객체 리턴

@GET
@Path("/getUsers")
@Produces(MediaType.APPLICATION_JSON)
public ResponseEntity getUsers(@QueryParam("callback") String callback) {
    Set<User> list = null;
    list = userBo.getUsers();
    HttpHeaders headers = new HttpHeaders();
    headers.add("Access-Control-Allow-Origin", "*");
    headers.add("Access-Control-Allow-Methods", "GET, OPTIONS, POST");
    headers.add("Access-Control-Allow-Headers", "Content-Type");
return new ResponseEntity(list.toString(), headers, HttpStatus.OK);
}


2. 클라이언트 - chrome 인 경우 : 임시적 방법

(링크에 --disable-web-security 옵션 추가)


참고 : http://stackoverflow.com/questions/10718030/change-header-of-java-web-service-response-without-having-jackson-convert-it


'javascript' 카테고리의 다른 글

[jQuery] :input 선택자 (폼 태그 내 모든 입력 관련 선택)  (0) 2013.05.10
[jQuery] ajax prototype  (0) 2013.04.17
Posted by airlueos
,

[jQuery] ajax prototype

javascript 2013. 4. 17. 14:42

원래 Jquery 만 쓰는데 간혹 Prototype로 짜여진 소스들을 보면 대부분의 기능을 사용하지 못한다. 
Jquery와 Prototype는 그 사용방법이 다르며 가장 중요한 점은 서로 충돌이 일어난다는 것이다. 
라엘이는 AJAX를 써야만 했고 Prototype AJAX 코드를 찾아내었다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
     
   var url = '/proc/send_friend';
 
  
 
    var myAjax = new Ajax.Request(url,
 
        {
 
            method: 'post',
 
            parameters: {'m_friend_id':str},
 
            onSuccess: parse_result_sendfriend//,
 
            //onFailure: function() { alert('HTML을 받아오지 못했습니다.');}
 
        }
 
    );


콜백함수

1
2
3
4
function parse_result_sendfriend(result){
var dataobj = decodeURIComponent(result.responseText);
        alert(dataobj);
}


참고로 Jquery Ajax코드

1
2
3
4
5
6
7
8
9
$.ajax({
    type: 'post',
    url: '/proc/send_friend',
    data: 'm_friend_id='+str,
    contentType: "application/x-www-form-urlencoded; charset=utf-8",
    success: function(result) {
        parse_result_sendfriend(result);
    }
});


콜백함수는 prototype와 같다.


참고 : https://lael.be/314

Posted by airlueos
,