Transform Font Using jQuery .html Function

After implementing the jQuery .html function, I noticed a strange change in the font of the div. Can anyone help me identify why this is happening? Is there an error in my code?

Your assistance is greatly appreciated.

$.ajax({
    type: "POST",
    url: '/_backend/forum/like_post.php',
    data: 'postID=' + postID,
    success: function(data){
        $(".btn-like-post[data-post-id='" + postID + "']").html( "<i class='fa fa-heart'> Liked (" + likedByNow + ")" );
        $(".btn-like-post[data-post-id='" + postID + "']").attr("class", "btn btn-dark-pink");
        $(".btn-like-post[data-post-id='" + postID + "']").attr("title", data );
    }
});

UPDATE
Before:
After: http://prntscr.com/g2r5jx

UPDATE

CSS Styles 

.btn-dark-pink, .btn-dark-pink:hover, .btn-dark-pink:focus {
    background: #c43063;
    color: white;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.btn-pink, .btn-pink:hover, .btn-pink:focus {
    background: #f94a86;
    color: white;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
javascriptjquerycss

Answer №1

Make sure to close your <i> tag properly

Your code should resemble this:

$.ajax({
    type: "POST",
    url: '/_backend/forum/like_post.php',
    data: 'postID=' + postID,
    success: function(data){
        $(".btn-like-post[data-post-id='" + postID + "']").html( "<i class='fa fa-heart'> Liked (" + likedByNow + ")</i>" );
        $(".btn-like-post[data-post-id='" + postID + "']").attr("class", "btn btn-dark-pink");
        $(".btn-like-post[data-post-id='" + postID + "']").attr("title", data );
    }
});

Alternatively, you can enhance it like this:

$.ajax({
    type: "POST",
    url: '/_backend/forum/like_post.php',
    data: 'postID=' + postID,
    success: function(data) {

        $(".btn-like-post[data-post-id='"+ postID +"']")
          .html( "<i class='fa fa-heart'> Liked (" + likedByNow + ")</i>" )
          .attr({
            "class": "btn btn-dark-pink",
            "title": data
          });

    }
});

Quick Tip:
Avoid using postID directly in the success function because it may cause confusion if multiple requests are made simultaneously. Retrieve the exact postID from the response like data.postID instead.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Easily retrieving row values from a Repeater with jQuery

A challenge I'm facing involves a jQuery function that triggers on the onchange event of a textbox. The goal is to validate the user input in the textbox against the values in a datatable displayed by a repeater. While I managed to retrieve the textbo ...

jqueryhtmlasp.netrepeatergetelementbyid

A directive containing a template

I'm facing a unique challenge where I have to nest a template inside another template within my directive. The issue arises because AngularJS doesn't recognize ng-repeat code inside attributes. In an ideal scenario, here is how I envision my cod ...

javascriptangularjs

Placing a piece of code within a table without any empty spaces

When including a preformatted code fragment with multiple lines and indentation, the HTML element to use is <pre>. However, I've noticed that when I place this within a table, the browser automatically adds a blank line before and after the code ...

htmlcsslayout

What is the method to retrieve the class name of an element when the div is created as '<div id 'one' class="element one"></div>'?

I have three elements named one, two, and three, declared as seen below: <div id =container> <div id 'one' class="element one"></div> <div id 'two' class="element two"></div> < ...

javascripthtmljquerycss

Retrieve information from both the client and server sides within NextJS

Looking to integrate a third-party API for data fetching in certain components within my NextJS project. The goal is to have the server pre-render these components with the API for optimal SEO benefits, but also enable client-side fetching of component pro ...

javascriptreactjswebnext.jsseo

The background image within Bootstrap theme layouts appears to be missing from both the styles and divs

Encountering a peculiar dilemma here. Attempted to apply a background image to a custom style in order to override/extend a bootstrap column style. Additionally, tried embedding a style directly in the div attribute. Strangely, neither method seems to be e ...

htmlcssbootstrap-4

Problem arising post jQuery update from version 1.11.1 to 3.3.1 - Popup malfunction

I had been using jQuery 1.11.1 and jQuery Mobile 1.4.5 without any issues. However, after upgrading to jQuery 3.3.1, I encountered a problem with popups. The following error is displayed when attempting to open a popup by clicking a button that calls the p ...

javascriptjqueryhtmljquery-mobile

Does adding the Angular bootstrap script at the end of the body tag impact webpage speed more than using ng-app on the body tag?

In the past, we had placed ng-app on the body tag which led to problems with dependency injection when multiple modules were being used on the same webpage. This required module creators to be aware of the existing app and inject their app into it. We are ...

javascriptjqueryhtmlangularjstwitter-bootstrap

Display Image Based on Commencement Date and Conclusion Date

I am in need of some specific guidance as I have found myself overwhelmed and confused with my attempts so far. Hopefully, someone can provide the help I require. In my case, I have a collection of images each assigned certain start and end dates for disp ...

javascriptjqueryxmlajax

CSS's mysterious world of inline elements

I am in the process of trying to make a certain element, time, appear inline using CSS. The HTML Code is: <nav class="vertical"> <ul> <li><a href="#">Home Page</a></li> <li><a hre ...

css

Is it possible for the editor to detect and recognize the hyperlink?

I am working on a project that involves using an html editor such as freetextbox or ckeditor. My question is, is it possible for the editor to recognize a link after it has been pasted into the editor? For example, if I copy and paste the following link: ...

jqueryasp.net.netckeditorfreetextbox

Retrieve the current domain name (server name) within a Shiny application

I am managing 3 servers - alpha, beta, and gamma. The goal is to deploy my Shiny code from the alpha server to the gamma server. However, I encounter a challenge. In my ui.R file, I reference another site called start using href = 'https://alpha.com/ ...

javascripthtmlshinyshiny-server

What is the process of comparing one regular expression against another in JavaScript?

I'm looking to check for matches between two regular expressions. To achieve this, I use the .test method on each one. If either of them returns true, I consider them a match. const regexify = (str) => new RegExp( '^' + str ...

javascriptnode.jsregexalgorithm

What are some tips for integrating Bluebird into Angular frameworks?

I attempted to integrate Angular with Bluebird promises: Here is the HTML code snippet: <body ng-app="HelloApp"> <div ng-controller="HomeController">{{name}} {{also}}</div> </body> The corresponding JavaScr ...

javascriptangularjspromisebluebirdangular-promise

Setting the distance between marks on a material-ui slider is a handy customization feature to

I have customized a material-ui slider with some custom CSS and it is contained within a div of small width, requiring overflowX. How can I maintain a 5px margin between each mark on the slider? Check out the demo here https://i.sstatic.net/bxiXE.png Th ...

javascripthtmlcssreactjsmaterial-ui

How to neatly present comma-separated values from a MySQL database using PHP in table format

I am a complete beginner and I need help displaying comma separated values from a database in tabular form. Refer to the image link below to see how the data is structured with commas: I would like to present it in a tabular format on an HTML/PHP page as ...

javascriptphphtmlmysqltabular

Convert a two-column layout on the web into a single-column layout for mobile devices, featuring dynamic

Is there a way to style this diagram with CSS that will work on IE11 and all major browsers? It seems like Flexbox doesn't support dynamic height. Do I need separate left and right columns for larger viewports and no columns for smaller viewports? ...

javascripthtmlcssgridflexbox

Constructing an interactive table from a JSON dataset using Node.js and Express

Just starting out with Node.JS here! I'm currently working on creating a page with multiple tables and information using NodeJS. However, I've hit a roadblock when trying to display the result of an SQL query in an HTML table. Right now, I'm ...

javascripthtmlmysqlnode.jsexpress

Transform the JavaScript function to a Node.js module

My function serves as an abstract factory for creating JavaScript objects. Here is the code: var $class = function(definition) { var constructor = definition.constructor; var parent = definition.Extends; if (parent) { var F = function ...

javascriptnode.jsrewriting

Utilizing an Async API call from a separate page and passing it as a component input

I recently set up an asynchronous API fetch in one of my .JS files and then invoked it from another JS file to output the result using console.log. (Is there a more efficient method for achieving this?) Now, my aim is to utilize the fields of the response ...

javascriptreactjsfetch