Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

Re-run an html <script> in React – Facebook api

I’m making a component in React that has Facebook data pulled from an API call. The API call returns and updates a list, which render() will then populate with tags that are supposed to be converted to actual images by a script from Facebook’s website. Something like this:

<a data-pin-do={'embedData'} href={'https://www.facebook.com/data/12345'} />

My html file includes this script, which I assume runs through the HTML code and converts the tags to something viewable.

<script async defer src="//assets.pinterest.com/js/pinit.js"></script>

However, the problem I’m running into is that the script only runs when the webpage initially loads, and then never again. Since I’m adding more tags in an API call and then updating the list via the props, it means I’m left with a bunch of tags that don’t get converted when the call returns.

I’ve inspected the React console & html and can confirm the tags are there, it’s just that the dynamically converted tags don’t show up as pins.

I’ve already tried using jquery and document.appendChild() to add/get the script in componentDidUpdate(), but it doesn’t seem to be working. Anybody have any clue how I can get around this?

Tags:

2

Answers


  1. 0

    If you look in your devtools you should see that when the html page loads this script it is just making a GET request to the script src (http://assets.pinterest.com/js/pinit.js). So, you should be able to recreate that behavior by making a simple http GET request to that url each time you need to rerun the script.

    Login or Signup to reply.
  2. 0

    Try using:a do-while in your script:

    var repeat = 0
Do { 
// Your code goes here
repeat = repeat + 1
} while(repeat <= 10)

    Note: replace 10 with times you want the script to repeat

    If you wan’t to add a rule to this (so it only runs when…) do:

    var repeat = 'yes'
Do { 
// Your code goes here
} while(repeat == 'yes')

    Now your code will only run when repeat is equal to yes

    In action 

    <a href="javascript:repeat = 'no'">Stop repeating</a>
<a href="javascript:repeat = 'yes'">Start repeating</a>
<script>
var repeat = 'yes'
Do { 
// Your code goes here
If(var1 == var2) { repeat = 'no' }
} while(repeat == 'yes')
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search