ajax 호출 후 이미지 업데이트

클릭하면 아약스로 이미지를 회전하고 새 이미지를 저장합니다. 모든 것은 페이지 새로 고침없이입니다. 그리고 문제는 오래된 이미지가 새로 고쳐지지 않고 새로 고쳐진 이미지를 넣지 않는다는 것입니다.

또한 새 이미지는 이전 이미지와 같은 이름입니다.

질문

내 질문은 새로 고침 페이지없이 폴더에서 IMG을 업데이트하는 방법은? 클릭 클래스 slika-rotiraj 후에 만.

HTML :

<div class="slika"> 
    <div class="slika-obrisi"></div> 
    <div class="slika-rotiraj"></div> 
    <img src="uploads/87b6f334f30717343acd69f3962142a0_542ad975e424d.jpg" /> 
</div>

SCRIPT :

$(document).on("click", ".slika-rotiraj", function() { 
    var slika = $(this).next("img").attr("src"); 
    var slika1 = $(this).parent(); 
    var slika2 = $(this).next("img"); 
    $(this).next("img").attr("src", slika); 
    $.ajax({ 
     type: "POST", 
     url: "rotiraj.php", 
     data: { 
      slika: slika 
     }, 
     success: function(data) { 

     } 
    }); 
});

출처

2014-09-30 Nebojsa Sapic

는 이미지가 서버 측를 변경되었음을 의미하고 방금 이미지의 새로운 상태를 가져 오도록 img 태그를 강제 하시겠습니까? 간단하게이 작업을 수행해야 src 설정 :

success: function(data) { 
    // which is your image? "slika2"? 
    // it's not really obvious, so I'll assume that for now 
    $(slika2).attr('src', slika); 
}

을이 이미지를 새로 고침하지 않는 경우, 당신은 "캐시 브레이커"를 추가 할 수 있습니다 다시 요청을하도록 강요합니다. 이 같은 간단한 :이 아무것도에 영향을주지 않습니다

success: function(data) { 
    $(slika2).attr('src', slika + '?' + new Date().getTime()); 
}

, 그냥 무해 URL을 변경하고 서버에서 요청을 다시 브라우저를 강제 것이다.

출처

2014-09-30 16:42:46 David

답변을 주셔서 감사합니다. 날짜가있는이 버튼은 첫 번째 클릭에서만 작동하며 이미지는 90도 회전합니다. , 그래서 그것은 처음으로 내 이미지를 보여 주지만, 다음 회전에서, 표시되지 않습니다 –

@ NebojsaSapic : 조금 디버깅 마십시오. 구체적으로 어디에서 실패합니까? 코드에서 두 번째 클릭 이벤트가 전혀 호출되지 않습니까? AJAX 요청이 작성 되었습니까? 서버의 응답은 무엇입니까? 이 코드 라인이 전혀 도달 했습니까?새 요청의 의도와 다른 URL이 있습니까? 구체적으로 기재하십시오. – David

폴더에 이미지가 있기 때문에 내가 날짜를 추가하면 실패가 발생하고 두 번째로 회전을 클릭하면 PHP가 스트림을 열지 못했습니다? + 새 Date(). 이름에 –

하는 태그에게 ID를 부여하고 'SRC'의 값을 설정의 성공의 함수 내에서 속성 아약스 전화.

HTML

<div class="slika"> 
    <div class="slika-obrisi"></div> 
    <div class="slika-rotiraj"></div> 
    <img id="myimage" src="uploads/87b6f334f30717343acd69f3962142a0_542ad975e424d.jpg" /> 
</div>

JS : 그렇지

$('.slika img').attr('src', 'new path to image');

: 이미지가 항상 같은 이름이 있으면

$(document).on("click", ".slika-rotiraj", function() { 
    var slika = $(this).next("img").attr("src"); 
    var slika1 = $(this).parent(); 
    var slika2 = $(this).next("img"); 
    $(this).next("img").attr("src", slika); 
    $.ajax({ 
     type: "POST", 
     url: "rotiraj.php", 
     data: { 
      slika: slika 
     }, 
     success: function(data) { 
      $("#myimage").attr('src', data); 
     } 
    }); 
});

출처

2014-09-30 16:40:25 thiag0

감사합니다, 고맙지 만 작동하지 않습니다. 이미지를 새로 고치지 않습니다. –

@NebojsaSapic PHP 스크립트 (rotiraj.php)에서 무엇을 반환합니까? 귀하의 질문에 그것을 추가 할 수 있습니까? – thiag0

이런 식으로 뭔가를 시도

$('.slika img').attr('src', 'new path to image' + '?_=' + new Date().getTime());

출처

2014-09-30 16:41:00 Ragnar

덕분에 데이비드의 답변과 같은 문제가 발생했습니다 –

'? _ ='을 (를) 사용해 보셨습니까? – Ragnar

ajax 호출 후 이미지 업데이트

답변

관련 문제