비동기 방식인 ajax를 통해 php의 db에 있는 데이터를 불러와 html에 뿌려주는 작업을 하는도중

ajax의 결과로 나온 html 요소가 정상 작동하지 않았다.

 

그 이유는 처음에 html 화면이 출력할때는 각각의 요소에 이벤트가 바인딩되었지만 

ajax로 새로 생겨난 html은 이벤트 바인딩이 안 되었던것....

 

[script - ajax]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 점포 전체 검색
  function search_store(){
    $.ajax({
      type : 'POST',
      url : 'http://192.168.0.2:80/cube2/pass/search',
      data : {
        value:"1"
      },
      success : function(result){
        $('ul').html(result);
      },
      error : function(xtr,status,error){
        alert(xtr +":"+status+":"+error);
      }
    });
  }
  

[script - 이벤트 바인딩]

1
2
3
4
$(document).on("click", '.at_l ul li', function(event) {
    var target = $(this);
    location.href ="ip주소?idx="+target.attr('id');
}); 
  

[html/php]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<article class="at_2">
    <ul>
    <?php
        while($row=$result->fetch_array(MYSQLI_ASSOC)){
            if(strlen($row["pTitle"])>15){ 
            $title=str_replace($row["pTitle"],mb_substr($row["pTitle"],0,8,"UTF8")."...",$row["pTitle"]); //title이 8을 넘어서면 ...표시
            }
            $NO = $row['idx'];
            echo "
                <li id=".$NO.">
                    <img src = '/cube/image_store/".$row['pImage']."' />
                    <h3><span>[등록날짜]</span><span class='date'>&nbsp;2018.03.30&nbsp;</span><span class='seller'>".$row['pSeller']."</span></h3>
                    <p>".$row['pTitle']."<p> 
                </li>
                ";
        }   
    ?>
    </ul>
</article>
 
  

 

'웹 프로그래밍 > HTML,CSS,JS' 카테고리의 다른 글

openlayers 5 기본기(지도 생성, 마커/팝업 생성)  (1) 2019.07.23
브이월드(opanlayers 3) 지도 + WMS(상권 지도) + 다음 로드뷰  (0) 2019.07.12
동적으로 생성된 파일첨부 데이터 ajax로 보내기 + php  (0) 2019.07.08
+버튼 클릭시 파일첨부 폼 동적 생성하기  (0) 2019.06.26
HTML AJAX post 사용 방법 (feat. Flask API Server[Python])  (0) 2019.05.20

[html]

 
1
2
3
4
5
6
7
8
9
10
11
<div class="image">
    <div class="image_title">
        이미지 첨부(최대 10개)
    </div>
    <div class="image_swiper">
        <div class="image_div_0">
            <label for ="image_plus_0"></label>
            <input type="file" id="image_plus_0">
        </div>
    </div>
</div>
  
적당한 + 이미지가 없어서 달력 이미지로 버튼 구현

 

[script]

 

index 는 전역변수.. 파일 첨부에 고유 번호 부여 하기 위해 필요

 

//중요//

보통 아래와 같은 형식으로 사용하는데

$(선택자).on('change/click 등', function(){

       함수 내용...

});

 

html이 처음 생성될때 기존에 있는 폼들만 이벤트 바인딩을 하고 동적으로 생성된 폼들은 이벤트 바인딩이 되어있지 않다. 그래서 위와 같이 작성하면 동적으로 생성된 기능들은 실행되지 않는다. 이에 대한 해결 방법으로는 다음과 같다.

$(document).on("change/click", '선택', function(event)

 

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
//버튼 DIV 변수
    var index = 0;
 
    //이미지 추가 버튼 클릭시
    $(document).on("change", '.at_2 input[type=file]', function(event) {
 
        var target = $(this)[0];
        
 
        if(target != null){
            //------------------이미지 확장자 검사 시작--------------------------------//
            var fileNM = $(this).val();
 
            var ext = fileNM.slice(fileNM.lastIndexOf(".") + 1).toLowerCase();
 
            if (!(ext == "gif" || ext == "jpg" || ext == "png")) {
                alert("이미지파일 (.jpg, .png, .gif ) 만 업로드 가능합니다.");
                return false;
            }
            //------------------이미지 확장자 검사 종료--------------------------------//
            // 상위 요소
            var img_div = $(this).parent();
 
            var fileList = target.files ;
        
            // 파일리더기 생성
            var reader = new FileReader();
            
            // 파일 위치 읽기
            reader.readAsDataURL(fileList [0]);
            
            //로드 한 후 이미지 요소 설정(스타일,url)
            reader.onload = function  (e) {
 
                // 이미지 미리보기
                img_div.children('label').css('background','url('+ e.target.result +') center no-repeat').css('background-size','105px 105px');
                
            };
 
            // 이미지 파일 첨부 버튼 추가 하기
            // 새로운 div 생성
            var div = document.createElement('div');
 
            index++;
 
            // 새로운 div의 className 지정
            div.className = 'image_div_'+index+'';
 
            div.innerHTML = '<label for ="image_plus_'+index+'"></label>\<input type="file" id="image_plus_'+index+'">';
            
            // 추가
            $('.image_swiper').append(div);
 
            
            // 테스트
            //alert($(this).parent().attr('class'));
            //alert(index);
            //$(this).parent().attr('class')
        }else{
            alert("이미지 없음");
        }
    });
 
  

[css]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.image_swiper div{
  display: inline-block;
  width: 105px;
  height: 105px;
  z-index: 1;
}
.image_swiper div input[type=file]{
  display: none;
}
.image_swiper div label{
  display: inline-block;
  width: 105px;
  height: 105px;
  background: url("../images/icon/calendar_1.png") #9fd1ff no-repeat center;
  z-index: 0;
}
//주석/ 버튼 클릭시 배경 색상 
.image_swiper div label:hover{
  background: url("../images/icon/calendar_1.png") #0084ff no-repeat center;
}
 
  

html 화면
크롬 검사 화면(html화면에서 마우스 우클릭 -> 검)

'웹 프로그래밍 > HTML,CSS,JS' 카테고리의 다른 글

openlayers 5 기본기(지도 생성, 마커/팝업 생성)  (1) 2019.07.23
브이월드(opanlayers 3) 지도 + WMS(상권 지도) + 다음 로드뷰  (0) 2019.07.12
동적으로 생성된 파일첨부 데이터 ajax로 보내기 + php  (0) 2019.07.08
동적으로 생성된 요소에 이벤트 바인딩  (0) 2019.06.26
HTML AJAX post 사용 방법 (feat. Flask API Server[Python])  (0) 2019.05.20

[html]

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
<!DOCTYPE html>
<html>
        <script type=text/javascript src="{{url_for('static', filename='jQuery.js') }}"></script>
        <script>
        function test(){
                var text_data = $('#SensorID').val();
                $.ajax({
                        type : 'POST',                                  <!--[GET / POST] 둘중 하나 선택-->
                        url : 'http://192.168.0.2:5000/request',
                        data : {
                               SensorID:text_data                       <!--{key : "value"}-->
                        },
                        dataType : 'JSON',
                        success : function(result){
                                alert("result = "+ result);
                        },
                        error : function(xtr,status,error){
                                alert(xtr +":"+status+":"+error);
                        }
                });
        }
        </script>
        <body>
                <p>검색하고자 하는 아이템을 입력하세요.</p>
                <input type = "text" name="SensorID" id="SensorID"/>
                <input type = "button" value = "데이터 요청" onclick="test()"/>
        </body>
</html>
  

[Flask API Server]

1
2
3
4
5
6
7
8
9
10
@app.route('/request', methods =['POST'])
def query():
    value = request.form['SensorID']
    sql = "select esnData from ESensorTable where esnSensorId ='"+value+"'"
    curs.execute(sql)
    data_list=curs.fetchall()       
    data= data_list[0]              
    jsondata=json.dumps(data[0])   <!--json문법으로 바꿔준다.-->
    
    return jsondata
  

'웹 프로그래밍 > HTML,CSS,JS' 카테고리의 다른 글

openlayers 5 기본기(지도 생성, 마커/팝업 생성)  (1) 2019.07.23
브이월드(opanlayers 3) 지도 + WMS(상권 지도) + 다음 로드뷰  (0) 2019.07.12
동적으로 생성된 파일첨부 데이터 ajax로 보내기 + php  (0) 2019.07.08
동적으로 생성된 요소에 이벤트 바인딩  (0) 2019.06.26
+버튼 클릭시 파일첨부 폼 동적 생성하기  (0) 2019.06.26

+ Recent posts

티스토리툴바