Question

i have integrated in my system an external script to allow my users to receive credits after watched a video. After they clicked a link, a popup will load the video. After the video finished there is a callback “callback_on_conversion”. I need to hide the button but it’s not really easy. Reading the integration guide, i found:

“This asynchronous behavior has a limitation: The javascript code that
you can run in these callback functions may not use the document.write
function as that will not work. Instead, we recommend that for
creating/inserting new elements (e.g. fallback AdTags) in the page you
use DOM and jQuery.”

This is the actually script. Again, i don’t know how to hide the “a” link when video finished.

       <script src="http://iframe.sponsorpay.com/javascripts/widget/v1/widgets.js" charset="utf-8"> </script>
        <script type="text/javascript">

        var sp_object = new SPONSORPAY.Video.Iframe({
            api_host: 'iframe.sponsorpay.com',
            asset_host: 'iframe.sponsorpay.com',
            appid: 'xxxx',
            uid: 'demouser',
            width: '750',
            height: '750',
            display_format: 'bare_player',
            callback_on_start: function() { alert('Video Ready'); },
            callback_on_conversion: function() { alert('finished'); },
            callback_no_offers: function() { alert('No video avabile.'); }
        });

        sp_object.backgroundLoad();
</script>

<a href="#" id="showvideo" name="showvideo" class="showvideo" onClick="sp_object.showVideo()">Load</a>

What should i do to prevent code breaking? Thanks!

Answer 1

jQuery has LOTS of functions to manipulate the DOM tree. For instance, this selects the attribute with ID = ‘showvideo’ and removes it.

$('a#showvideo').remove();

Note that if there’s more than 1 such element, only the first will be taken, but you can also select using a class:

$('a.showvideo').remove();