如何顯示點擊從管理面板頁面和顯示結果開/關SVG圖標不同的頁面

Question

我需要進一步發展我的開/關鏈接圖標切換，將通過使用jquery.This鏈接通過類改變它的背景位置改變狀態上將由管理人員在後端管理部分操縱。

jquery還需要更新數據庫，然後在前端頁面上反映這個選定的狀態/選擇，供用戶查看，但不能從用戶更改，因爲它只是一個標記以顯示給用戶。

我想知道的，是我怎麼體現在前端頁面這種變化？我是否以某種默認顏色創建另一個SVG背景圖像，然後通過數據庫中的CSS更改此狀態？

jquery'post'變量指向一個頁面以反映更改（不知道如何在頁面中執行此操作！），但我需要在不同的頁面上反映這一點，而不僅僅是一個...

後端編碼將與C＃來完成，我只需要創建的基礎下在前端jQuery的一部分，但我的知識是非常有限的。

我提供了這裏是我到目前爲止，我只需要知道一些進一步的代碼，就如何反映前端頁變更的代碼，因爲我不知道怎麼辦。

我希望有人能幫助我，因爲我在這一點上很失望..

$('.verify').click(function() { 
 
    var id = $(this).parents('div').attr('id'); 
 
    $(this).toggleClass('verified'); 
 
    $.post('/yourUpdateUrl', { 
 
     'verified': $(this).hasClass('verified'), 
 
     'id': ID_01 
 
    }, 
 
    function(data) { 
 
     if (data.verified) { 
 
     $(this).toggleClass('verified'); 
 
     } 
 
    }); 
 
});

body { 
 
    background-color: #aaa; 
 
} 
 
.verify { 
 
    text-indent: -5000px; 
 
    display: block; 
 
    background-image: url('http://imgh.us/social_4.svg'); 
 
    background-position: 0px 0px; 
 
    height: 38px; 
 
    width: 38px; 
 
    border: 1px solid #000; 
 
} 
 
.verify.verified { 
 
    background-position: 0px 38px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
<div id="ID_01"> 
 
    <p> 
 
    <a href="#" class="verify">verify</a> 
 
    </p> 
 
</div>

Answer 1

Server Sent Events Tutorial

服務器發送的事件 - 單程消息 服務器發佈事件是當網頁自動從服務器獲取更新時。

這也可以過，但該網頁將不得不問，如果任何

更新可用。使用服務器發送的事件時，更新會自動進行。

例子：Facebook的/ Twitter的更新，股票價格更新，新聞，體育賽事結果等。

**基本工作流程是這樣的**

1. 管理員更改圖標，從他的網頁和數據庫

2. 狀態現在一個又一個頁面用C＃定期查詢數據庫和廣播 內容與以下格式

   事件：userNameOrId \ n

   數據：{ 「地位」： 「1」} \ n \ n

3. 現在在客戶端使用JavaScript聽它

OR

另一種方法是使用AJAX長輪詢方法 實施例

(function poll() { 
     setTimeout(function() { 
      $.ajax({ url: "yourpagename.aspx", success: function(data) { 
       //here data contains the value returned from db 
       //here check it with a if loop yes one color else one color 
       if (data.verified) { 
      $(this).addClass('verified'); 
      }else{ 
      $(this).removeClass('verified'); 
      } 
      }, dataType: "json", complete: poll }); 
     }, 30000); 
    })(); 

Check this w3schools Demo to see how it works Tutorial for long polling method