jQuery Ajax를 사용하여 MySQL에서 가져온 토글 정보

Question

MySQL 데이터베이스의 재생 목록을 표시하고 있습니다. 재생 목록에는 필름이 포함되어 있습니다. 재생 목록을 클릭하면 재생 목록의 모든 영화를 표시하고 싶습니다. 재생 목록을 다시 클릭하면 필름을 뒤로 접기를 원합니다.

또한 데이터를 데이터베이스에서 다운로드하는 동안로드 아이콘을 표시하고 싶습니다. '필름이 올바르게 표시됩니다

$("body").on("click", ".plist", function(e) { 
    e.preventDefault(); 
    var clickedID = this.id.split("-"); 
    var pID = clickedID[1]; 
    //alert("Playlist clicked: " + pID); 
    var myData = 'plistToView='+ pID; 

    jQuery.ajax({ 
     type: "POST", 
     url: "response.php", 
     dataType:"text", 
     data:myData, 
     beforeSend: function(){ 
      $.get("preloader_JS.html", function (data) { 
       $("#loaderDiv-"+pID).append(data); 
      }); 
     }, 
     success:function(response){ 
      $("#loaderDiv-"+pID).hide() 
      $('#films-'+pID).hide().append(response).slideDown(); 
     }, 
     error:function (xhr, ajaxOptions, thrownError){ 
      alert(thrownError); 
     } 
    }); 
}); 

하지만 난 돈 : 여기

는 표시 재생 목록/영화의 HTML/PHP입니다 :

$i = 1; 
while($pList = mysqli_fetch_array($playlists)) 
{ 
    echo "<div class=\"plist\" id=\"plist-".$pList["id"]."\"> 
     Playlist ".$i.": ".$pList["title"]."</div>"; 
    echo "<div id=\"loaderDiv-".$pList["id"]."\"></div>"; 
    echo "<div id=\"films-".$pList["id"]."\"></div>"; 
    $i++; 
} 

여기 내가 현재 사용하고있는 스크립트입니다 재생 목록을 다시 클릭하면 다시 숨기는 방법을 알고 있습니다.

또한 첫 번째 정보를 표시 한 후 두 번째 재생 목록에서 로딩 아이콘 (preloader_JS.html)을 사용할 수 없습니다. (또한 매번 아이콘을 얻는 것은 의미가없는 것처럼 보입니다. 애프터맨은 같은 아이콘이므로 한 번만 가져 와서 동일한 '소스'에서 표시 할 수 있습니다. 실제로 어떻게 그 방법을 알 수는 없습니까?

어떤 도움을 유용 할 것이다 당신은 어떻게 든 상태를 저장해야

Answer 1

합니다. 현재 재생 목록 상태에 대한 정보를 저장했습니다 ($this.data('visible')) 및 정보 wh 현재 목록에있는 영화는 이미 ($this.data('downloaded'))에 다운로드되었습니다. 도움 주셔서 감사합니다!

$("body").on("click", ".plist", function(e) { 
    e.preventDefault(); 
    var clickedID = this.id.split("-"); 
    var pID = clickedID[1]; 
    //alert("Playlist clicked: " + DbNumberID); 
    var myData = 'plistToView='+ pID; 

    $this = $(this); 

    if($this.data('visible')){ 
     $this.data('visible',false); 
     $('#films-'+pID).slideUp(); 
    } else if ($this.data('downloaded') && (!$this.data('visible'))) 
    { 
     $this.data('visible',true); 
     $('#films-'+pID).slideDown(); 
    } 
    else 
    { 
     jQuery.ajax({ 
      type: "POST", 
      url: "response.php", 
      dataType:"text", 
      data:myData, 
      beforeSend: function(){ 
       $.get("preloader_JS.html", function (data) { 
        $("#loaderDiv-"+pID).append(data); 
       }); 
      }, 
      success:function(response){ 
       $("#loaderDiv-"+pID).hide(); 
       $this.data('visible',true); 
       $this.data('downloaded', true); 
       $('#films-'+pID).hide().append(response).slideDown(); 
      }, 
      error:function (xhr, ajaxOptions, thrownError){ 
       alert(thrownError); 
      } 
     }); 
    } 

: 여기

코드입니다

Answer 2

당신은 같은 것을 할 수 있습니다!. 난 내 자신에 내 문제를 해결하기 위해 관리 @ raam86에서 약간의 힌트 후

$("body").on("click", ".plist", function(e) { 
$this = $(this); 
if($this.data('visible')){ 
    $this.data('visible',false) 
    $this.hide(); 

success:function(response){ 
    $("#loaderDiv-"+pID).data('visible',true) 
     .... 
     }