2014-02-20 1 views
0

그래서 저는 이미 Ajax를 사용하여 mongodb 데이터베이스에서 데이터를 가져 왔습니다. 데이터를 검색 할 수 있고 데이터베이스 변수를 자바 스크립트 변수에 성공적으로 저장할 수 있습니다.HTML 페이지에 ajax 요소 래핑

첫 번째로 원하는 것은 블록 내부의 HTML 페이지에 데이터를 다시 넣는 것입니다. Jquery를 사용하고 CSS 태그를 넣어야합니까? 데이터를 자바 스크립트 안에 전역 변수에 저장했습니다. 어떻게이 일을 할 수 있겠습니까?

둘째, 텍스트 요소가 포함 된 데이터가 많이 있고 문자열 길이가 다릅니다. 그렇다면 HTML 페이지에 입력하는 텍스트가 매번 캔버스 너비와 높이에 맞게 정렬되도록하는 방법은 무엇입니까? 캔버스 너비를 초과해서는 안됩니다. 어떻게이 일을 성취 할 수 있습니까?


그래서이 내 CSS 요소

#disp_prob_title{ 
      position: absolute; 
      display: none; 
      top: 450px; 
      left: 240px; 
      height: 150px; 
      width: 350px; 
     } 

이다 그리고 이것은 나의 JS 파일에 전역 변수 내가 그것을

setQuestion : function(titleString, bodyString, hintString){ 
       $("#disp_prob_title").append(this.qsName); 
     }, 

this.qsName를 추가 할 자바 스크립트 기능입니다 로그에서 문자열을 올바르게 검색합니다. 그러나 내 HTML 페이지에 텍스트가 표시되지 않습니다. 또한 CSS 요소 내에서 글꼴 크기와 색상을 어떻게 변경합니까?

감사합니다.

+0

CSS 태그 란 무엇입니까? 의미는 무엇입니까? 데이터를 스타일 시트에 넣으시겠습니까? 아니면 무엇을 넣으시겠습니까? – idmean

+0

예. 혼란을 드려 죄송합니다. 나는 여전히 웹 프로그래밍의 용어에 익숙하지 않다. 예 HTML 페이지에 데이터를 표시하고 싶다. 이벤트가 트리거 될 때마다 새 데이터가 데이터베이스에서 검색되고 html 페이지에 새 데이터를 표시하려고합니다. – Htlcs

답변

0

"CSS 태그 넣기"의 의미를 모르십니까? 당신은 "content"와 같은 id에 콘텐츠를 가지고 싶다면 jQuery add, append, appendTo 등의 메소드를 사용하여 콘텐츠 블록에 콘텐츠를 추가하는 등 HTML 블록을 제공 할 수 있습니다.

$("#content").append("<div>some data here</div>"); 

은 지금까지 당신이 가진 것 등을 적당한 크기를 유지하기 위해 내용을 강제로 추가 : 사용자가 데이터를 가져하면 다음

<div id="content"></div> 

:

HTML 블록과 같을 것이다 어떤 스타일링을 콘텐츠 블록이나 당신이 그 블록에 추가하는 콘텐츠.

귀하의 질문은 약간 모호하므로 잘하면이 도움이 될까요? 그것은 지금 작동

+0

예. 나는 그것을 시도 할 것이다. 그리고 충분히 명확하지 않은 것을 유감스럽게 생각합니다. 간단히 말해 데이터베이스에서 얻은 데이터를 기본 HTML 페이지에 표시하고 싶습니다. 특정 이벤트가 트리거 될 때마다 새 데이터가 데이터베이스에서 검색됩니다. 그래서 짧은 시간에 내 이벤트가 트리거 될 때마다 HTML 페이지에이 업데이트 된 데이터를 표시하려고합니다. – Htlcs

+0

위의 함수에서 alert/console.log를 표시 할 수 있습니까? 또는 그 지점에서 소스에 중단 점을 추가하십시오. 그 기능을 수행하고 있습니까? –

+0

그래, 내가 함수 안에 경고 상자를 넣어 그것은 나타납니다.그래서 나는 그것이 그 기능에 도달했다는 것을 확신합니다. 또한 내 메인 그릴 기능을 넣어려고했지만 여전히 아무것도 표시됩니다. – Htlcs

0

, 나는

#disp_prob_title{ 
      position: absolute; 
      width: 30%; 
      top: 250px; 
      left: 150px; 
      margin-left: auto; 
      margin-right: auto; 
      text-align: center; 
     } 

여러분의 도움에 감사드립니다로 스타일을 변경했다!

관련 문제