AJAX를 사용하여 DIV 내용 추가 - 이전/다음

그래서 내가하려는 것은 AJAX를 사용하여 이미 (동일한 파일에서) 내용을로드 한 DIV에 HTML 문서의 내용을 추가하는 것입니다.AJAX를 사용하여 DIV 내용 추가 - 이전/다음

"이전"및 "다음"버튼을 클릭하면 이전 또는 다음 프로젝트가로드됩니다.

다음은 코드에 대한 설명입니다.

HTML

<div class="p-modal"> 
    <div id="p-controls"> 
     <a id="p-close" href="javascript:;">Close</a> 
    </div> 
    <div id="ajax"></div> 
</div>

jQuery를 (내가 #ajax에 내용을로드하고있어)은 "회사"섹션으로 이동

$(document).ready(function() { 
    $('.p-load').on('click', function(e) { 
    e.preventDefault(); 
    var href = $(this).attr('href'); 
    if ($('#ajax').is(':visible')) { 
     $('#ajax').css({ display:'block' }).animate({ height:'auto' }).empty(); 
    } 
    $('#ajax').css({ display:'block' }).animate({ height:'auto' },function() { 
     $('#ajax').html('<img id="loader" src="images/loading.gif" width="48" height="48">'); 
     $('#loader').css({ border:'none', position:'absolute', top:'50%', left:'50%', margin:'-24px 0 0 -24px', boxShadow:'none' }); 
     $('#ajax').load('includes/projects.html ' + href, function() { 
     $('#ajax').hide().fadeIn('slow'); 
     }); 
    }); 
    }); 
});

DEMO (- 그것은 각을로드하기 위해 노력 프로젝트를 개별적으로 열고 프로젝트를 닫을 때 개별적으로 프로젝트를 만들지 만 프로젝트 팝업 안에 "이전"및 "다음"트리거에서 위와 동일한 코드를 사용할 때는 아무 것도하지 않습니다.

도움을 주시면 대단히 감사하겠습니다.

출처

2014-12-06 Kevin Haag

PREV와 NEXT 버튼 링크에서 이벤트를 클릭한다고 생각합니다. 페이지로드 및 Ajax 완료 호출에서 확인하십시오. 그것은 작동, 나는 방화범이 끌려에서 테스트.

$('a.next,a.prev').on('click', function(e) { 
    e.preventDefault(); 
    var href = $(this).attr('href'); 
    if ($('#ajax').is(':visible')) { 
    $('#ajax').css({ display:'block' }).animate({ height:'auto' }).empty(); 
    } 
    $('#ajax').css({ display:'block' }).animate({ height:'auto' },function() { 
    $('#ajax').html('<img id="loader" src="images/loading.gif" width="48" height="48">'); 
    $('#loader').css({ border:'none', position:'absolute', top:'50%', left:'50%', margin:'-24px 0 0 -24px', boxShadow:'none' }); 
    $('#ajax').load('includes/projects.html ' + href, function() { 
     $('#ajax').hide().fadeIn('slow'); 
    }); 
    }); 
});

출처

2014-12-06 05:37:44 Dave

"페이지로드시"라는 의미를 알고 있지만 "아약스 전체 통화"를 설명 할 수 있습니까? 나는 AJAX –

와 슈퍼 멍청 아 .. 나는 EXPLORE PROJECT 버튼을 참조하십시오. 내가 firebug 콘솔에서이 코드를 삽입하고 다음 버튼을 클릭하면 이미지를로드하는 것을 보여주고 프로젝트 세부 정보가 포함 된 div가 표시됩니다. 그건 아약스 위치 GET http://the.gs/testlink/kevin/includes/projects.html 전화입니다. 그 아약스 전화를 찾아 완성해라. 이전 및 다음 버튼 작업을 수행하려면 이벤트 위에서 리 바인드하십시오. 다음은 아약스 성공 사례를 찾는 방법에 대한 답변입니다. http://stackoverflow.com/questions/21648356/jquery-ajax-beforesend-and-success-error-complete – Dave

좋아요, 올바른 방향으로 안내해주었습니다. 나는 .ajaxComplete() [link] (http://api.jquery.com/ajaxcomplete/)를 사용하고 그 호출에서 위에 제안한 코드를 사용했다. '$ (document) .ajaxComplete (function() { // Dave의 코드는 여기 )} ' –

이

$('document').on('click','.p-load' function(e) { 
// your code goes here. 

});

이유 같은 것을 시도 : .p-load 요소는 DOM의 부하에없는 동적으로로드됩니다. http://api.jquery.com/delegate/

내가 DOM로드에 존재 모달의 부모 elment를 사용하는 것을 선호 : 그래서

참조 JQuery와 대리자를 사용합니다. 그래서 나는 당신의 경우에 그것이 .p-modal

$('.p-modal').on('click','.p-load' function(e)

출처

2014-12-06 05:34:19

AJAX를 사용하여 DIV 내용 추가 - 이전/다음

답변

관련 문제