jquery 함수가 실행되는 동안 로딩 이미지를 표시합니다.

저는 Spring MVC Java 웹 애플리케이션에서 작업하고 있습니다. 응용 프로그램에는 JSP 페이지가 포함되어 있습니다. DB 페이지의 데이터를 표시하는 테이블이 있습니다. 데이터는 클래스에 속한 텍스트 입력에서 재생됩니다. 다음을 수행하는 스크립트를 구현했습니다. - 테이블에서 텍스트 입력을 선택하십시오. - 텍스트 입력의 데이터로 스팬을 만듭니다. - 숨 깁니다 텍스트 입력jquery 함수가 실행되는 동안 로딩 이미지를 표시합니다.

function editableInput() { 
$('.editable').each(function() { 
var input = $(this); 
input.before("<span class='spanEditable'>" + input.val() + "</span>"); 
input.hide(); 
}); 
}

나중에 라디오 입력에서 행을 선택하면 행에 대한 텍스트 입력을 표시하는 스크립트를 사용합니다. 행을 선택하면 행을 선택하지 않은 상태에서 CRUD 작업을 허용하는 멋진 테이블을 만들기 위해 텍스트 입력을 사용하지 않고 일반 텍스트처럼 모든 테이블 내용을 표시합니다.

내가 겪고있는 문제는 : 페이지가로드 될 때 스크립트가 완료된 후 텍스트 입력의 모든 데이터와 함께 모든 테이블 행이 처음에 만들어진 것처럼 표시됩니다. 모든 데이터는 기간에 표시됩니다. 모든 물건이로드 될 때까지 이것은 매우 나빠 보인다.

editableInput() 함수가 완료 될 때까지 어떻게로드 GIF를 사용할 수 있습니까? 나는 AJAX 호출을 사용 경우 내가 로딩 GIF를 추가하는 방법을 알고,하지만이 난`함수를 호출하는 방법입니다

$(document).ready(function() { 
editableInput();)};

출처

2012-09-09 Adrian Bob

어떻게 입력에 처음 데이터를 채우는됩니다

이 예제를 시도해보세요? 자바 또는 브라우저에서? – TheVillageIdiot

컨트롤러에서 ArrayList를 보내고 JSP 페이지의 루프를 사용하여 테이블의 입력을 목록의 데이터로 채 웁니다. –

당신은 jQuery BlockUI Plugin (v2)

출처

2012-09-09 15:49:24

감사합니다,이 작동하지만 전체 페이지를 해제하려면 싶지 않아, 난 그냥 테이블 div 숨기기, 내가 쓴 함수를 실행할 때까지로드 및 .gif 이미지를 표시하는 동안 테이블까지 제대로로드되었습니다 –

http://www.malsup.com/jquery/block/#element에서보세요 –

답변을 주셔서 감사합니다, 이것이 효과가 있지만, 나는 그 모습이 마음에 들지 않습니다. 정말하고 싶습니다. 잘 알려진 ajax-loading.gif 이미지를 사용하십시오. –

실험 수를 잘 수행 할 수 있습니다 오히려 원유하지만 작동하지만이 하나를 시도하십시오. 페이지를 사용하여 다른 사업부로 테이블을 포장로드에 :

는

$("table#table1").wrap("<div id='dvWrapp' style='background-color:#000;'/>");

다음 editableInput 호출을 완료 한 후 그냥 랩을 해제 : 래퍼 DIV로드 이미지 또는 일부를 표시하는

$("table#table1").unwrap();

당신은 스타일을 설정할 수 있습니다 메시지. http://jsfiddle.net/amantur/FkjkR/

출처

2012-09-09 15:54:49 TheVillageIdiot

으로 실험 해 볼 수 있습니다. 제가 제안한 첫 번째 줄을 시도해 보았습니다.이 것은 다음과 같습니다. -in hmtl 코드는 배경이있는 div로 테이블을 래핑합니다. 스타일

이지만 표는 여전히 표시됩니다. –

div 용 CSS로 작업해야했습니다. 그러나 당신을 위해 blockUI가 잘 작동하기 때문에 좋습니다. – TheVillageIdiot

div가 CSS에서 어떻게 변경되어 테이블이 보이지 않습니까? blockui 작동하지만 작은 로딩 - gif –

jquery 함수가 실행되는 동안 로딩 이미지를 표시합니다.

답변

관련 문제