1

I have a jQuery script that appends the Instagram blockquote, but it doesn't work on the second append. The first time it gets appended, the blockquote converts to the iframe like it should, but if I try it again, it just stays a blockquote.

function appendInstagram($controls){
  var instagramURL = $('#js-instagram-url-edit').val();
  var instagramScript = '<script async defer src="//platform.instagram.com/en_US/embeds.js"><\/script>'
  var instagramHtml = $('<blockquote class="instagram-media" 
                         data-instgrm-captioned data-instgrm-version="7">
                           <div style="padding:8px;"> 
                             <a href="'+instagramURL+'" target="_blank"></a>
                           </div>
                         </blockquote>' + instagramScript);
  updateContent(instagramHtml, $controls);
}

The idea is when this function gets excecuted, the blockquote gets appended through updateContent()

hellomello
  • 8,219
  • 39
  • 151
  • 297

2 Answers2

2

i found out that instagram has this

window.instgrm.Embeds.process()

Which needed to be executed each time.

hellomello
  • 8,219
  • 39
  • 151
  • 297
0

The javascript tag you're appending won't be executed as you have it coded. I've mocked up something that should help:

<html>
<head><title>test</title>

<script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<script>
function appendInstagram($controls){
  var instagramURL = $("#url").val();

  var instagramHtml = '<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="7">' +
                            '<div style="padding:8px;"><a href="'+instagramURL+'" target="_blank"></a></div>' +
                        '</blockquote>'; // + instagramScript;

  $("#test").html(instagramHtml);
}

$(document).ready(function() {
    appendInstagram(null);

    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "https://platform.instagram.com/en_US/embeds.js";
    s.async = true;
    $("#test").append(s);
});
</script>
</head>
<body>
<div id="test">

</div>
<input type="text" id="url" value="https://www.instagram.com/p/BW52LY1FMdf/?taken-by=birminghamfencingclub_bfc" />

</body>
</html>

For more info, have a look here: How to Append <script></script> in javascript?

Poultry in Motion
  • 101
  • 6