Refreshing Facebook comments does not occur when using FB.XFBML.parse()

My JavaScript photo gallery dynamically loads images from an API onto the page when users click on a thumbnail. I want users to be able to leave Facebook comments on each image, so I've included a Facebook comments element on the page containing the gallery.

<div class="fb-comments" data-href="" data-num-posts="10" data-width="480"></div>

When the page initially loads and the gallery is populated, I set the data-href attribute of the comments element to the URL of the first image (e.g. ). If a user clicks on a different thumbnail, I update the attribute to reflect the URL of the selected image.

fbComments.attr('data-href', data.link + index);
FB.XFBML.parse();

I've read that using FB.XFBML.parse(); should refresh the Facebook comments. I added a comment to one image and then clicked on a thumbnail for a different image without a comment, but my initial comment is still visible. Any ideas on why this might be happening?

I've double-checked that the FB object is logged correctly in my JavaScript file and is available when called. The click event in my JS does update the data-href attribute appropriately. When I manually set a different data-href in the fb-comments element, the comments display correctly.

javascriptajaxfacebookfacebook-comments

Answer №1

My recommendation is to completely eliminate the existing comments box from the DOM, then add a new HTML element with the correct data-href attribute, and finally invoke the FB.XFBML.parse method.

Additionally, remember to specify the location for parsing, as shown below:

FB.XFBML.parse(document.getElementById("specific-container"));

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

Partial view fails to render correctly through AJAX request

Having trouble with integrating PartialViews and Ajax. My goal is to have a search feature based on category selection and display the result list in a PartialView. The issue I'm facing is that when I click on the search button, it renders the same p ...

jqueryajaxasp.net-mvc-4

What is the best way to erase the contents of a pop-up window?

Whenever I click on an event in the calendar, a popup window appears displaying textboxes and a list of items. The issue arises when I close the popup after selecting an event with items in the list; the same items show up for other events without refreshi ...

javascriptasp.net-mvcjson

JavaScript validation for a form dynamically generated within a table

NOTE: Utilizing Foundation 6 along with the Abide Form Validation. I'm currently working on implementing automatic form validation for a website. The approach I've taken involves creating a table (using the jQuery Datatables library) with multip ...

javascriptjqueryformsvalidationdatatables

Delete a div when a button is clicked through JavaScript

I'm having an issue with a form I created that duplicates itself - I can't seem to get the 'x' button to remove the corresponding div as needed. I have placed both buttons outside of the div like this: <button type="button" id="cro ...

javascriptjqueryhtmlcss

What is the best way to eliminate the border on Material UI's DatePicker component?

Check out this code snippet for implementing a datepicker component: import React, { Fragment, useState } from "react"; import { KeyboardDatePicker, MuiPickersUtilsProvider } from "@material-ui/pickers"; import DateFnsUtils from &qu ...

javascriptreactjsdatepickermaterial-ui

The backend API does not receive the correct value from the checkbox

I'm having an issue with my registration page in ReactJS. There is a checkbox field called isadult. After clicking on the Register button and saving the data to a MongoDB database, the value of isadult shows up as [Object object] instead of True or Fa ...

javascriptreactjsaxios

Implementing AJAX mysqli interaction in PHP following the MVC design pattern

Today I'm encountering yet another AJAX-related error. I am in the process of developing a user registration system using AJAX and PHP, following MVC architecture. Previously, I successfully built a login system without AJAX that functions flawlessl ...

javascriptphpjqueryajaxmysqli

Enhancing Web Forms with PHP and AJAX Javascript

Currently, I'm working on implementing a "stream" feature that allows users to input their status. So far, I have successfully set it up, but my goal is to enable users to see their new status without having to refresh the page. I understand that uti ...

phpjavascriptsqlajax

Perform CRUD operations using Node.js

I am working on making AJAX calls in NodeJS to an endpoint. Up until now, I have successfully made "get" requests using: http.get('url', (res) => ....) Now, I want to explore making "post, put, and delete" requests. For example, I would lik ...

node.jsajaxrequestfunction-calls

Having trouble uploading images using ReactJS on the web platform

I am currently in the process of developing a portfolio website using react js, but I'm experiencing an issue where the image I intended to display is not showing up on the live site. Despite thoroughly checking my code, I can't seem to identify ...

javascripthtmlcssreactjs

JavaScript and jQuery - Struggling to retrieve checkbox values

In my dynamically generated (ASP) photo gallery, I have multiple checkboxes. Each checkbox is labeled as 'photos' and contains a unique photo ID in its value attribute. Here's an example of how the checkboxes are structured: <form name=" ...

javascriptjquerycheckbox

What is the reason for the React component being rendered four times?

My React component is fetching data from Firestore and storing it in the items array. However, I am encountering an issue where the menus variable contains three empty arrays that are being rendered on the page. Initially, I used an async function to fetc ...

javascriptarraysreactjsuse-effectuse-state

Update the WooCommerce shopping cart page automatically upon product removal

After trying to solve the issue of refreshing the cart page in WooCommerce when a product is removed, I came across this helpful question on Stack Overflow: Refresh the page after product remove from cart Woocommerce. Following the provided code snippet th ...

javascriptphpwordpresswoocommerce

Guidelines for populating data with an array

I have the following array: const dataArr = [[15, 14, 5], [16, 10, 2], [17, 6, 13], [18, 4, 8], [19, 7, 4]]; Now, I am populating another array using the above data as shown below: for (let i=0; i<dataArr.length; i++){ newData.push(dataArr[i]); ...

javascripthighcharts

Utilizing a TinyMCE editor within a text area and implementing a posting form through ajax

I am currently using tinyMCE in my textareas and submitting my form through AJAX. However, I am facing an issue where the value in the textarea is not being recorded when I try to save it. This is my text area: <textarea class="form-control" name="cont ...

javascriptjqueryajaxlaraveltextarea

Sending data through anchor tag in ajax code within CodeIgniter

success: function (data) { if (data.length > 0) { $('#search_result').empty(); $.each(data, function (key, value) { $('#search_result').append("<tr> ...

phpajaxcodeigniterurl

What is the process for exporting a plugin from dayjs() in JavaScript?

Currently, I have incorporated the plugin isToday() to enhance the capabilities of dayjs(). Nevertheless, I am uncertain about how to export isToday() in order to utilize it across other files. import isToday from "dayjs/plugin/isToday"; expor ...

javascriptreactjstypescriptdayjs

How come my useEffect still contains outdated data?

I have encountered an issue with my useEffect in a React component. Despite having all the necessary dependencies, the state does not update after the useEffect completes. It always displays the previous render. Below is the code snippet of the hook: exp ...

javascriptreactjsreact-hooks

The issue of objects within objects consistently yielding undefined when using $.each

Maybe it sounds a bit silly, but I am dealing with this status JavaScript object containing other objects (output of console.log(status)): {1: {…}, 2: {…}, 10: {…}} 1: error: true __proto__: Object 2: validated: false value: 0 wh ...

javascriptjqueryobjectjavascript-objectseach

How can I retrieve one distinct document for each group based on a shared property value in MongoDB?

I have a database collection set up in MongoDB with a schema like this: var personSchema = new mongoose.Schema({ _id: ObjectId, name: String, // ... alias: String }; (I am using mongoose, but the details are not important). Because I retrieve pe ...

javascriptnode.jsmongodbfiltermongoose