Apart from AJAX and iframe, is there any other way to refresh part of a page?

Question

I'm using a third-party commenting plugin right now, All it provides is a piece of script as follows:

<div id="uyan_frame"></div>
<script type="text/javascript"
        id="UYScript"
        src="http://v1.uyan.cc/js/iframe.js?UYUserId=1674366" async="">
</script>

As it is not a live commenting plugin, I want to add a refresh button next to it to reload it manually to see the latest comments instead of reloading the whole page.(I know Disqus is a good commenting plugin, but as we target Chinese users, I have to use the current one).

As it's a third party plugin, I don't have too much control over it. And I also think iframe is a ugly way to achieve this partly refreshing thing. So, is there any other way to achieve this? Like every time I click on the refresh button, it will erase out all the HTML element this script generated, recreate this script tag, append it to the appropriate place, and run it again?

Answer 1

you do not have to use iframe as it is slow. What you can do is create a div or section and give it an id or class, then create a button that when is clicked will fetch a script and append the right html contents in the div or section you've created. To make it easier to understand the code would look something like this.

<section id="content"></section>
<button id="refresher"></button>
<script>

$('#refresher').click(function(){
    //Load your script like so
    $.getScript('url of the script you are trying to get', function(){...})

    //Load your content here
    $('#content').html('Current contents will be erased and will be replaced by whatever you placed here')

    //...or if you need ajax fetching 
    $.ajax({
      url: url,
      success: function(){
        $('#content').html('place your content here and this will erase old content')
      }
    });

})

</script>

Answer 2

I would ask 3rd party company how to refresh comments without refreshing the whole page. They did developed this, and they must have a way to refresh it easily.

For example, UYComment.refresh(document.getElementById('comment'))

You may also find this kind of solution by looking at their javascript code if you don't want to ask them.

You can go around by not using 3rd-party provided code, ie ajax to replace div, refreshing iframe, etc., but, based on my experience, it always make your code little messier.

Answer 3

Since you tagged jQuery, I'm assuming you're using it.

Try adding a click handler to your refresh button and then use .html() example: $('#uyan_frame').html('');

When you call .html, it should replace the element you called it on and it should recall any scripts in the string you pass in. Just as a disclaimer, this is not tested.