Krystyna Krystyna - 6 months ago 20
Javascript Question

toggle switch status link icon

I have created a link with two states, which will be a default status of [verify=false] and secondary status [verified=true], and will be changed from a manager through an admin page. jquery will toggle this status using SVG icons and change its background position through CSS.

This link icon selection, will only display statically on multiple pages that this/that user has been verified or not by the manager. It is off [false] by default.

The toggling works great, which I am happy with this, but in the 'POST' variable, I am not sure how to get the unique ID for one( and for many in a page?) of the selection if its turned on and to reflect this back on multiple pages. I only need to do the frontend script for this, and then the backend dev will code in C# for the db.

I think I have the foundation layed out in my code, but 'what do I post' and how in an example page do I display this static icon selected from the admin??

I am not well versed with jquery, so I might need some heavy lifting with it. I will be using social icons just for experimenting with here..



$('.verify').click(function() {
var id = $(this).parents('div').attr('id');
$(this).toggleClass('verified');
$.post('#', {
'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: 84px 75px;
height: 38px;
width: 38px;
border: 1px solid #000;
}
.verify.verified {
background-position: 84px 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

Not sure, why you are using static ID_01. Replace this by id. Hope you want to do this.

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