Including a Pinterest image hover widget following the completion of an Ajax load

I have implemented the Pinterest image hover widget on my website to allow users to easily pin images to their Pinterest accounts.

You can find the widget here. (Make sure to click the image hover radio button under button type to see the one I am using.)

While the Pinterest button works perfectly on other pages without AJAX content loading, I am facing an issue when trying to load content in a popup window via AJAX and include the Pinterest button with that content. I have attempted to delay loading the Pinterest code until after the AJAX request is complete, but have not had success so far. I have tried the following approach:

<script type="text/javascript">
jQuery(document).ajaxComplete(function() {
    (function(d){
     var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
     p.type = 'text/javascript';
     p.setAttribute('data-pin-hover', true);
     p.async = true;
     p.src = '//assets.pinterest.com/js/pinit.js';
     f.parentNode.insertBefore(p, f);
     }(document));
});
</script>

I have made sure that the Pinterest code is only loaded on this page using the method above after the AJAX request has inserted the additional content into the DOM. Despite trying various other methods found online, none of them have provided a solution. If anyone has successfully integrated the image hover widget with AJAX before, any advice would be greatly appreciated.

Thank you :)

javascriptajaxpinterest

Answer №1

I encountered a similar issue with the "Any Image" button type, but found a solution thanks to this informative blog post.

Instead of using the refreshPinterestButton() function, I opted to load the script initially like this:

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

Then, on subsequent ajax calls, I utilized the following code:

//remove and add pinterest js
pinJs = $('script[src*="assets.pinterest.com/js/pinit.js"]');
pinJs.remove();
js = document.createElement('script');
js.src = pinJs.attr('src');
js.type = 'text/javascript';
document.body.appendChild(js);

I hope this solution can assist others facing a similar predicament.

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

Best locations for placing files when integrating Javascript into Wordpress

I have been struggling to make JavaScript work and determine the correct location to place the files. After attempting various methods, I am now wondering what the most logical approach would be. Despite spending a week on this task, the lack of a tutoria ...

javascriptwordpress

Combining Two Tables Using jQuery

I am currently attempting to combine two tables into one using jQuery in the following manner: var table = document.createElement("table"); table.id = "mergedTable"; $("#mergedTable > tbody:last") .append($("#csvInfoTable2 > tbody").html()) ...

javascriptjqueryhtmlcsv

Selecting any of the bar chart labels will reveal just a two-day timeframe

My bar chart is behaving strangely - when I click on all labels, it only shows two days instead of updating as expected. I suspect it may be due to a bad implementation involving parsing. Can anyone provide assistance? I have created a minimum example on ...

javascriptangulartypescriptchart.js

Is it possible to invoke a computed property within the props of a child component in Vue.js?

In the context of my child and parent components, I have a boolean prop in the child component with a default value of false. When calling the child component within the parent component and setting it based on a computed function that returns a boolean va ...

javascriptvue.jsvuejs2vue-props

Display dynamic web content developed with JavaScript for public viewing

As a newcomer to the world of web development, I'm not sure if it's possible to achieve what I have in mind without using PHP. However, I'm willing to give it a shot. Currently, my webpage functions perfectly with JavaScript, HTML, and CSS, ...

javascripthtml

Leveraging the ReactJS Hook useState for detecting Key press events

As I am in the process of constructing a piano, I want it to showcase certain CSS styles when the user "presses" specific keyboard buttons (via keydown event) - even enabling the simultaneous clicking of multiple different buttons. Once the user releases t ...

javascriptcssreactjs

Get the npm distribution package without the need to actually install npm

Is there a way to obtain an npm package without the need for running npm view XXX ... or installing node/npm? Specifically, I am attempting this process on a Linux operating system. ~UPDATE~ I now understand that I should have provided more details about ...

javascriptnode.jsnpm

Best Placement for Socket.io Server in WebStorm Express Template

Trying to integrate socket.io into an express server generated by WebStorm. Should the setup of the server and socket.on events all be placed inside /bin/www, or is it better practice to create separate controllers like index and users pages? https://i.ss ...

javascriptnode.jsexpresssocket.iowebstorm

Ways to retrieve a repeater textbox using jQuery ajax

I need assistance with creating a RealTime Comment System using Asp.net Webforms, ajax, and jquery. I have a Repeater in which there is a TextBox and a Button. My goal is to insert data through ajax and jquery, however, the jquery ajax method is unable to ...

jqueryasp.netajaxrepeaterwebmethod

Excessive geolocation position responses in Angular 5

I am trying to implement an Angular 5 component that will continuously fetch my current location every 3 seconds if it has changed. Here is a snippet of my code: export class WorkComponent implements OnInit { constructor(private userService: UserService ...

javascriptangulartypescriptgeolocationangular5

Adding HTML and scripts to a page using PHP and JS

Currently, I am utilizing an ajax call to append a MVC partial view containing style sheets and script files to my php page. Unfortunately, it seems that the <script> tags are not being appended. After checking my HTTP request on the network, I can ...

javascriptphpjqueryhtmlajax

How can I incorporate a spinning cog from Font Awesome into a jQuery click event?

I am looking to incorporate a spinning font awesome cog while the data is being fetched and remove it once the process is complete. Here is the HTML snippet that needs to be inserted: <i class="fa fa-spin fa-cog"></i> And this is the accompa ...

javascriptjqueryfont-awesome

Expanding using CSS3 to ensure it doesn't take up previous space

Currently, I am working on an animation for my web application. More specifically, I am looking to scale certain elements using CSS3 with the scaleY(0.5) property. These elements are arranged in a vertical list, and I want to ensure that they do not take u ...

javascripthtmlcss

Techniques to dynamically insert database entries into my table using ajax

After acquiring the necessary information, I find myself faced with an empty table named categorytable. In order for the code below to function properly, I need to populate records in categoryList. What should I include in categoryList to retrieve data fro ...

javascriptc#jqueryajax

In Rails 3, you can utilize JavaScript to submit a form_tag remotely, however ensure that it submits as

I am trying to implement a form_tag in rails 3 that can be submitted using ajax instead of html through javascript. Despite setting the form to submit as javascript, it still submits as html when clicking the submit button. - form_tag({:controller => " ...

javascriptruby-on-railsajaxruby-on-rails-3forms

Plotting Data Points with Tags in React Native

After doing some research, I came across a few React Native packages that offer scatter plots such as react-native-scatter-chart, react-native-chart-kit, and react-native-chartjs. However, I am interested in finding something more customizable. I'm s ...

javascriptreactjsreact-nativeplotscatter-plot

In-line Vertical Ticker Display

I attempted to use vTicker, but I found that it does not function properly when used as an inline element. <h1> <div id="vticker"><ul>...</ul></div> Some other headline text </h1> My goal is to have the vertica ...

javascriptjquerycssvticker

Is it possible to move between textboxes using arrow keys in HTML?

Is there a way to navigate through textboxes using arrow keys in HTML without relying on jQuery? Possibly utilizing JavaScript, HTML, CSS, or another method? Thank you for your help! <body> <form> <input type="text"&g ...

javascripthtmlcss

Is there a way to append items to the main level of an array?

I am attempting to populate an array with objects in order to achieve the following structure: myobject1: Object: ItemInside: Object myobject2: Object ItemInside: Object myobject3: Object ItemInside: Object myobject4: Object ItemInside: Ob ...

javascriptarrays

Leverage information stored in an array within the HandsonTable Angular directive

Some of my columns in a HandsoneTable created using Angular directives are not rendering when I try to use an array as the data source with common array notation (name[0]). I'm unsure if this is supposed to work like this or if I am doing something wr ...

javascriptangularjshandsontable