Guide on connecting JavaScript to a Font Awesome icon

Question

Guide on connecting JavaScript to a Font Awesome icon

I added a fontawesome icon to my HTML as a button and now I want to use JavaScript to trigger it AJAX style

<a href="#"><i id="heart" class="jam jam-heart-f"></i> Like</a>

Below is the JavaScript code I attempted to use to trigger it, but I haven't encountered any errors. My goal is to post the 'like' attempt to a PHP page called like.php in order to add the link to a database.

$(document).ready(function()
{

$('body').on("click",'#heart',function()
{
    var videoId = "<?php echo $video_id; ?>";


    var A=$(this).attr("id");
    var B=A.split("like");
    var messageID=B[1];
    var C=parseInt($("#likeCount"+messageID).html());


       $.ajax({
    method: 'POST',
    url: 'like.php',
    data: {videoId: videoId},
    cache: false,
        success: function(result){
            likeInfo = JSON.parse(result);
                    $("#likeCount1").html("Likes:" + likeInfo.likeCount);

            //document.getElementById("likeCount1").value = likeInfo.likeCount;
            //$("#likeCount1").html(likeCount);
        }

        }); 



    }


});

Despite setting #heart as the target in JS using the id="heart" with the font awesome icon, it doesn't seem to be triggered. Any suggestions on how I can solve this issue?

javascript css button font-awesome

Answer 1

Answer №1

Don't forget to include the closing parenthesis and semicolon in your $('body').on... statement

Here's a corrected version:

$(document).ready(function()
{

    $('body').on("click",'#heart',function()
    {
        var videoId = "<?php echo $video_id; ?>";


        var A=$(this).attr("id");
        var B=A.split("like");
        var messageID=B[1];
        var C=parseInt($("#likeCount"+messageID).html());


           $.ajax({
        method: 'POST',
        url: 'like.php',
        data: {videoId: videoId},
        cache: false,
            success: function(result){
                likeInfo = JSON.parse(result);
                        $("#likeCount1").html("Likes:" + likeInfo.likeCount);

            //document.getElementById("likeCount1").value = likeInfo.likeCount;
            //$("#likeCount1").html(likeCount);
            }
        }); 
    });
});

Answer 2

Don't forget to include the closing parenthesis and semicolon in your $('body').on... statement

Here's a corrected version:

$(document).ready(function()
{

    $('body').on("click",'#heart',function()
    {
        var videoId = "<?php echo $video_id; ?>";


        var A=$(this).attr("id");
        var B=A.split("like");
        var messageID=B[1];
        var C=parseInt($("#likeCount"+messageID).html());


           $.ajax({
        method: 'POST',
        url: 'like.php',
        data: {videoId: videoId},
        cache: false,
            success: function(result){
                likeInfo = JSON.parse(result);
                        $("#likeCount1").html("Likes:" + likeInfo.likeCount);

            //document.getElementById("likeCount1").value = likeInfo.likeCount;
            //$("#likeCount1").html(likeCount);
            }
        }); 
    });
});

Answer 3

Answer №2

Your code successfully triggers the post-request, however, there seems to be an issue with closing your functions and scopes properly.

I tested it out on this JSFiddle link for reference.

Here is the revised code snippet to ensure compatibility with StackOverflow:

$(document).ready(function() {

      $('body').on("click", '#heart', function() {
          var videoId = "<?php echo $video_id; ?>";

          var A = $(this).attr("id");
          var B = A.split("like");
          var messageID = B[1];
          var C = parseInt($("#likeCount" + messageID).html());

          $.ajax({
            method: 'POST',
            url: 'like.php',
            data: {
              videoId: videoId
            },
            cache: false,
            success: function(result) {
              likeInfo = JSON.parse(result);
              $("#likeCount1").html("Likes:" + likeInfo.likeCount);
            }
          });
      });
});

Furthermore, there appears to be a syntax error indicated as

Uncaught SyntaxError: missing ) after argument list

in your JavaScript console. Please check the network tab to monitor outgoing requests for accurate data transmission by clicking the heart button.

We recommend using an advanced js editor such as VS Code for error detection before running the code. It's a free, lightweight, and comprehensive tool for developers.

Answer 4

Your code successfully triggers the post-request, however, there seems to be an issue with closing your functions and scopes properly.

I tested it out on this JSFiddle link for reference.

Here is the revised code snippet to ensure compatibility with StackOverflow:

$(document).ready(function() {

      $('body').on("click", '#heart', function() {
          var videoId = "<?php echo $video_id; ?>";

          var A = $(this).attr("id");
          var B = A.split("like");
          var messageID = B[1];
          var C = parseInt($("#likeCount" + messageID).html());

          $.ajax({
            method: 'POST',
            url: 'like.php',
            data: {
              videoId: videoId
            },
            cache: false,
            success: function(result) {
              likeInfo = JSON.parse(result);
              $("#likeCount1").html("Likes:" + likeInfo.likeCount);
            }
          });
      });
});

Furthermore, there appears to be a syntax error indicated as

Uncaught SyntaxError: missing ) after argument list

in your JavaScript console. Please check the network tab to monitor outgoing requests for accurate data transmission by clicking the heart button.

We recommend using an advanced js editor such as VS Code for error detection before running the code. It's a free, lightweight, and comprehensive tool for developers.

Guide on connecting JavaScript to a Font Awesome icon

Answer №1

Answer №2

Similar questions

Steps for eliminating the chat value from an array tab in React

Capture Your Scene with Three.js

Angular, perplexed by the output displayed in the console

Effortlessly apply CSS styles to multiple cached jQuery variables without redundancy

Is there a specific perl regular expression that can accurately identify a javascript associative array?

Increase the size of the SVG area

Legend alignment issue in Firefox disrupting Flexbox functionality

Navigating through the browser history will allow you to view the

The database powered by Postgresql performs flawlessly when it comes to updating data with accurate code execution. However, there seems to be an

What is the significance of AngularJS in crafting Single Page Applications?

What is the best way to establish a connection between a client and MongoDB

"Click-to-Submit Button Triggering Error Notification before Redirecting to New Page

The transparency of the navigation menu is perplexing to me. I am unclear as to the reasoning behind it. I desire a

Ways to insert a gap underneath every line

HTML - Image is only partially visible

Issue with JQuery mobile: dynamically inserted popup fails to appear

Embed API requests using JavaScript's Axios library to ensure the correct promise is returned

Does GIF animation operate on the same thread as JavaScript in all popular web browsers?

Wordpress causing Jquery to malfunction; PHP function not executing

Freemarker substitute & and &ampersand;