Question

I have a public SHOUTcast on my site and I’ve setup a widget so that members can see info like the currently playing track, the name of the show, etc. What I want is a way to refresh the part of a page the widget is in, as opposed to the whole page. (I would use an iframe, but because we use member selected skins, the CSS in the iframe wouldn’t match up with the rest of the page.)

How do I go about doing this? AJAX maybe?

My knowledge of AJAX is very rusty, so if you could be so kind as to walk me through it, it’d be much appreciated.

Code for the widget:

<div class='ipsBox table_wrap'>

    <table class='ipb_table' cellspacing='1'>

        <tbody>

            <tr>

                <td class='row2'>Status:</td>
                <td class='row2'><font color='#33ff00'>Online</font></td>

            </tr>

            <tr>

                <td class='row2'>Show:</td>
                <td class='row2'>$servertitle</td>

            </tr>

            <tr>

                <td class='row2'>Listeners:</td>
                <td class='row2'>$currentlisteners / $maxlisteners</td>

            </tr>

            <tr>

                <td class='row2'>Now Playing:</td>
                <td class='row2'><marquee width='200'scrolldelay='1' scrollamount='4'>$song[0]</marquee></td>

            </tr>

            <tr>

                <td class='row2'>Tune In:</font></td>

                <td class='row2'>       

                    <a href='http://xxx.xxx.xx.xx:xxxx/listen.pls'><img src='public/shoutcast/icons/winamp.png'/></a>
                    <a href='http://xxx.xxx.xx.xx:xxxx/listen.pls'><img src='public/shoutcast/icons/foobar.png'/></a>
                    <a href='http://xxx.xxx.xx.xx:xxxx/playlist.asx'><img src='public/shoutcast/icons/wmp.png'/></a>
                    <a href='http://xxx.xxx.xx.xx:xxxx/listen.pls'><img src='public/shoutcast/icons/itunes.png'/></a>
                    <a href='http://xxx.xxx.xx.xx:xxxx/listen.pls'><img src='public/shoutcast/icons/vlc.png'/></a>
                    <a href='http://xxx.xxx.xx.xx:xxxx/listen.pls'><img src='public/shoutcast/icons/mm.png'/></a>

                </td>

            </tr>

        </tbody>

    </table>

Answer 1

1. Send an AJAX request.
2. Receive the response.
3. Prepare the html that you want your <div> to be replaced with.
4. Use element.innerHTML to replace the <div> content.