prototype 을 이용해 select box 채우기

-

간단한 예이다.

우선 ajax로 요청한 결과이다.(json type이다)

getAllRecords.htm?view=json
[code js]
{
 records:[
       { key1: "val11", key2 : "val21"},
       { key1: "val12", key2 : "val22"},
       { key1: "val13", key2 : "val23"},
       { key1: "val14", key2 : "val24"},
       { key1: "val15", key2 : "val25"}
 ]
}
[/code]

getItems.htm?view=json
[code js]
{
 records:[
        { key3:"val31"},
        { key3:"val31"},
        { key3:"val31"},
        { key3:"val31"}
 ]
}
[/code]

js파일 : foo.js
[code js]
function foo1(){
      new Ajax.Request('getAllRecodrds.htm?view=json',{
            method : 'get',
            onSuccess: function (transport) {
                  var mysel = $('mysel');
                  var res = transport.responseText.evalJSON();
                  res.records.each(function(r){
                        mysel.appendChild(
                              new Element('option',{'value':r.key2}).update(r.key1+' '+r.key2)
                  )});
            }
      );
}

function foo2(){
      new Ajax.Request('getItems.htm?view=json',{
            method : 'get',
            parameters : {key2: $('mysel').value},
            onSuccess: function (transport) {
                  var mysel2 = $('mysel2');
                  var res = transport.responseText.evalJSON();
                  mysel2.childElements().each(function(r){ r.remove()});
                  res.records.each(function(r){
                        mysel2.appendChild(
                              new Element('option',{'value':r.key3}).update(r.key3)
                  )});
            }
      );
}
[/code]

foot.html
[code html]
<html>
<head>
<script type="text/javascript" src="prototype/prototype.js"></script>
<script type="text/javascript" src="foo.js"></script>
<script type="text/javascript">
document.observe("dom:loaded", function(){
      foo1();
});
</script>
</head>
<body>
선택 : <select id="mysel" onchange="foo2()"></select>
아이템 : <select id="mysel2"></select>
</body>
</html>
[/code]

댓글

댓글 쓰기

이 블로그의 인기 게시물

C#에서 포인터 사용

-
훈스닷넷에 답글달고 정리 차원에서 남겨둔다. C#에서는 C에서 처럼 포인터를 사용할수가 있다. 빌드옵션에서 안전하지 않은 코드 check 해주고 다음과 같은 방법으로 한다.         static void Main(string[] args)         {             foo();         }         unsafe static void foo()         {             Int64 aa = 123456789;             Int64 bb = 123222;             IntPtr pt = new IntPtr(&aa);             IntPtr pt2 = new IntPtr(&bb);             Console.WriteLine(pt.ToString("x"));             Console.WriteLine(pt2.ToString("x"));             Int32 a = 1234231;             Int32 b = 154324;             IntPtr pt3 = new IntPtr(&a);             IntPtr pt4 = new IntPtr(&b);             Console.WriteLine(pt3.ToString("x"));             Console.WriteLine(pt4.ToString("x"));         } 확인해보면 Int64는 8바이트, Int32는 4바이트 만큼 주소가 증가했음을 알 수 있다.
자세한 내용 보기

WPF RichTextBox 와 Document의 바인딩

-
MVVM 패턴을 이용해서 View의 TextBox 등에 바인딩은 간단하게 <TextBox Text="{Binding mystring}"/> 이렇게 하면 된다. RichTextBox 도 마찬가지 일것 같지만, 해보면 안된다. 먼저 RichTextBox가 Content를 표현하는 구조를 알아야 되는데, 그건, 다음에 정리하고, 바인딩 하는 방법은 아래와 같다. 먼저 ViewModel 을  DependencyObject 를 상속고 DependencyProperty 를 정의해준다. public class MyViewModel : DependencyObject { public FlowDocument Document { get { return (FlowDocument)GetValue(DocumentProperty); } set { SetValue(DocumentProperty, value); } } public static readonly DependencyProperty DocumentProperty = DependencyProperty.Register("Document", typeof(FlowDocument), typeof(MyViewModel), new PropertyMetadata(OnDocumentChanged)); public void OnDocumentChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { } } 그 다음 View 의 code-behind 의 생성자에 InitializeComponent(); Binding b = new Binding("Document"); b.Source = richTextBox; b.Mode = BindingMode.OneWay; BindingOperations.SetB
자세한 내용 보기

WPF 이미지위에 라인 그리기(WPF DrawLine on exist Image)

-
WPF 기초가 부족해 삽질 한참 하다가 별것 아닌 방법으로 해결했다. 처음엔 Canvas위에 그릴려고 Canvas객체를 가져왔는데 WinForm 처럼 Graphics를 가져올수 없었다. 구글링해보면 제목은 WPF이고 Graphics를 가져와 그걸로 그리는 예제가 있어서 쉽게 끝날줄 알았는데, 한참 헤매었다. 답은 간단하다. 캔버스에서 이미지 다음에 객체를 추가하면 끝난다.(허무했다 ㅠ ) <Canvas Name="myCanvas">     <Image ImageSource="....."/>     <Line X1="10" Y1="10" X2="100" Y2="200" /> </Canvas> 동적으로 추가하는  코드도 마찬가지다  myCanvas.Children.Add( new Line{X1=10,Y1=10,X2=100,Y2=200} ); ViewModel로 바인딩해서 많은 선을 그렸었는데 역시 마찬가지로 이미지다음에 Template을 추가해 바인딩 해놓으면 쉽게 된다.
자세한 내용 보기