modal창 button 중복으로 눌리는 현상, 이거 해결하는데 정말 장난 아님

장장... 4시간 이것때문에 해맸는데, 와~ 별의별것 다 했는데, 안되다고 결국 찾음

정보를 저장하고 다시는 이런 오류로 해매지 않기 위해 기록합니다.

주문서 모달창을 만들어 띄운 후 찾을 띄운 후  저장버튼을 누르면 계속 데이터가 2개, 혹은 여러개가 저장되는 되는 현상이 발견되어, ajax 문제인지 모달 문제인지 정말 알기 힘든 상황에서...

이것저것 정말 많이 만져봤네요~

 

 

주문서의 저장버튼을 누르면... 허걱..

데이터가 중복으로 저장되는 현상....

결론부터 말하면, onclick 이벤트시 버튼을 잠궜다가, 성공하면 풀어주는 방식으로 해결했습니다.

settimeout도 사용해보고, 여러가지 써 봤지만, 안되서... 정말 4시간 이것때문에 고생... ㅠ.ㅠ

 

 // 주문서 저장버튼 실행	
	$("#orderSaveBtn").click( function() {
		
		    // 버튼 비활성화
		    var btn = $(this);
			if(btn.prop('disabled')) return false;
			btn.prop('disabled', true);
	
			   // 1차 grid 저장한다.
			   orderSaveGrid();	
			   
			   if( $("#order_CUST").val() == '')
				 {
				   alert("거래처는 필수항목입니다. 확인해주세요.");	
				   return;
				 }	
					
				const num =  $("#num").val();
				
				 console.log('num saveBtn 변화 관찰 : ' + $("#num").val()	);
					
				   
				   if(Number(num)!= 0 )  // 레코드 번호로 수정과 삽입을 구분함.
						  $("#SelectWork").val('update');  // 저장이 수정버튼의 역할을 함/ 파일 추가업로드시도 동작.
						else
							$("#SelectWork").val('insert');
						

				$.ajax({					
					url: "order_process.php",
					enctype: 'multipart/form-data',    // file을 서버에 전송하려면 이렇게 해야 함 주의										
					processData: false,    
					contentType: false,      
					cache: false,           
					timeout: 30000, 
					type: "post",		
					data: orderdata,			
					// dataType: 'json',
					success : function(data){									
						//성공했을때 동작해야될 코드
						
						console.log(data);
						// opener.location.reload();
						// window.close();			
						 if(Number(data)!==0 )     // 저장된  num 받아옴
							 $("#num").val(data); 							 
							 
							 // 신규로 하면 수정모드로 변경해 준다.
							 $("#SelectWork").val('update');  // 저장이 수정버튼의 역할을 함/ 파일 추가업로드시도 동작.
						 
							console.log('저장된 Num ' + $("#num").val()) ;
							
						     Toastify({
									text: "파일 저장 완료!",
									duration: 3000,
									close:true,
									gravity:"top",
									position: "center",
									backgroundColor: "#4fbe87",
								}).showToast();									
						
						btn.prop('disabled', false);

					}  ,
					error : function( jqxhr , status , error ){
						console.log( jqxhr , status , error );
								} 			      		
				   });

 

핵심은 

    // 버튼 눌렀을때 바로 비활성화
    var btn = $(this);
    if(btn.prop('disabled')) return false;
    btn.prop('disabled', true);

성공하면? 바로 풀어준다.

success : function(data){
//성공했을때 동작해야될 코드
  btn.prop('disabled', false);

이걸로 결국 해결됨.

 

 

정상적으로 하나만 저장되네요~ 

모달창... 어렵네요... 보기에는 좋은데....