Krystyna Krystyna - 6 months ago 15
HTML Question

How to display clicked on/off SVG icon from admin panel page and display result on a different page

I need further evolve my toggle on/off link icon that will change status by changing its background positions through classes using jquery.This link will be manipulated in a backend admin section by managers.

The jquery will also need to update the database and then reflect this chosen state/selection on a front end page for a user to see, but which cannot be changed from the user, because its just a marker to display to a user.

What I want to know, is how do I reflect this change in the front end page? Do I create another SVG background image in some default color, and then change this state through CSS from the database?

The jquery 'post' variable is pointing to a page to reflect the change (dont know how to do this in that page!), but I need to reflect this on different pages as well, not just one...

The back-end coding will be done with C#, I just need to create the foundations down for the jquery part in the front-end, but my knowledge is very limited.

I have supplied the code here with what I have so far, I just need to know with some further code, on how to reflect this change on the front-end page, because I dont know how.

I hope anyone can help me, because I am pretty desperate at this point..



$('.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

Server Sent Events Tutorial

Server-Sent Events - One Way Messaging A server-sent event is when a web page automatically gets updates from a server.

This was also possible before, but the web page would have to ask if any

updates were available. With server-sent events, the updates come automatically.

Examples: Facebook/Twitter updates, stock price updates, news feeds, sport results, etc.

**Basically the work flow would be like this **

  1. Admin changes the status of the icon from his page and database
  2. Now a another page with c# periodically queries Database and broadcasts the content with following format

    event: userNameOrId\n

    data: {"status": "1"}\n\n

  3. Now in the client side using javascript listen to it

OR

Another way is to use ajax long polling method Example

  (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

Comments