[JSP](javascript)popover(bootstrap) 비동기요청(ajax)로 title, content 가져오기

https://getbootstrap.com/docs/5.0/components/popovers/

 

html <a> 태그 예시

stata

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

javaScript 예시

dart

var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
  trigger: 'focus'
})

페이지 아래쪽 content 예시

 

실제 작성 코드

html 부분

xml

<td>
		<c:url value="/board/boardView.do" var="viewURL">
			<c:param name="what" value="$"></c:param>
		</c:url>
		<a class = 'poptitle' href="$" data-toggle="popover" >
		$
		</a>
</td>

javaScript

javascript

$(function () {
		$("#listBody a").hover(function(){
// 			초기화 후 토글
			let url = this.href;
			let retValue = null;
			$.ajax({
				url : url,
				dataType: "json",
				success:function(board){
					titleValue = board.bo_title;
					console.log($(this));
					retValue = board.bo_content;
				},
				// 비동기 요청은 순서가 없어서 
				// 동기요청으로 바꾸겠다. 이 밑으로 응답 데이터가 나오기 전에 보내지 않겠다. 
				async : false,
				cache : true,
				error:function(xhr, error, msg){
					console.log(xhr);
					console.log(error);
					console.log(msg);
				}
			});
			$(this).popover({
				html:true, content:retValue, title:titleValue
			}).popover('toggle').popover({});
		});
	})

실제 이렇게 비동기 요청으로 변수 titleValue를 가지고 올 필요가 없음.

이미 페이지 로딩 시 최초의 boardVO에서 bo_title을 가지고 옴

csharp

 
		<a class = 'poptitle' href="$" data-toggle="popover" >
		$

data-toggle 앞에 title=$만 작성해 주면 됨.

typescript

$(function () {
		$("#listBody a").hover(function(){
// 			초기화 후 토글
			let url = this.href;
			let retValue = null;
			let titleValue = null;
			$(this).popover({
				html:true, content:function({
					$.ajax({
						url : url,
						dataType: "json",
						success:function(board){
							titleValue = board.bo_title;
							console.log($(this));
							retValue = board.bo_content;
						},
						// 비동기 요청은 순서가 없어서 
						// 동기요청으로 바꾸겠다. 이 밑으로 응답 데이터가 나오기 전에 보내지 않겠다. 
						async : false,
						cache : true,
						error:function(xhr, error, msg){
							console.log(xhr);
							console.log(error);
							console.log(msg);
						}
					});
}), title:titleValue
			}).popover('toggle').popover({});
		});
	})

이렇게 작성했을 시 ajax로 불러온 값이 다음 클릭 시에 반영됨.

이유를 알 수가 없다. 비동기 방식이라고 해도 async를 주었기 때문에 content:function({}) 이후의 title 부분이 content의 function이 끝난 이후 적용되어야 하는것이 아닐까...

해결 방법은 처음에 올려 두었던 비동기로 값을 받아온 이후 popover함수를 호출하는것....

어떻게 script가 작동하는지 그에 대한 공부가 더 필요한 듯 하다.

 

Uploaded by Notion2Tistory v1.1.0

Notion2Tistory

https://api.jquery.com/jquery.ajax/#jQuery-ajax-url-settings

 

ajax - async, cache

jQuery.ajax() | jQuery API Documentation