CODEWITHSUNDEEP
javascript
user6179587
user6179587

Reputation: 11

Why is this script only working once? Replaces element only once, then never again

I've got a puzzle here and this may just be a limitation of JS but here's the code and it works ONCE. Then... never again. Not sure why.

It basically is replacing the TD content with code set up in each JS call. The initial table is setup to just open a stream channel from a device at an IP through the VLC plug in. When the page loads, the default code runs fine in the table.

Then when I click a button, it swaps out the proper code, the new stream fires off and then it never works again :(...

Doesn't seem like anything amazingly hard to process yet, I'm apparently missing something or perhaps some knowledge of limitations?

Thanks for any insight.

Blockquote

<table><tr><td id="TABLENAME">
<embed pluginspage="http://www.videolan.org"
            type="application/x-vlc-plugin"
            version="VideoLAN.VLCPlugin.2"
            id="srcVIDEO4"
            width="324"
            height="132"
            autoplay="yes" loop="no"
            target="rtsp://192.168.88.235:556/stream.sdp" />
</td></tr></table>

<script>
function display556VIDEO4(){
    var strVIDEO4 = '<embed pluginspage="http://www.videolan.org" \
            type="application\/x-vlc-plugin" \
            version="VideoLAN.VLCPlugin.2" \
            id="srcVIDEO4" \
            width="324" \
            height="132" \
            autoplay="yes" loop="no" \
            target="rtsp://192.168.88.235:556/stream.sdp" />';

    var tdElementVIDEO4 = document.getElementById('TABLENAME');
    var trElementVIDEO4 = tdElementVIDEO4.parentNode;
    trElementVIDEO4.removeChild(tdElementVIDEO4);
    trElementVIDEO4.innerHTML = strVIDEO4 + trElementVIDEO4.innerHTML;
}

function display557VIDEO4(){
    var strVIDEO4 = '<embed pluginspage="http://www.videolan.org" \
            type="application\/x-vlc-plugin" \
            version="VideoLAN.VLCPlugin.2" \
            id="srcVIDEO4" \
            width="324" \
            height="132" \
            autoplay="yes" loop="no" \
            target="rtsp://192.168.88.235:557/stream.sdp" />';
    var tdElementVIDEO4 = document.getElementById('TABLENAME');
    var trElementVIDEO4 = tdElementVIDEO4.parentNode;
    trElementVIDEO4.removeChild(tdElementVIDEO4);
    trElementVIDEO4.innerHTML = strVIDEO4 + trElementVIDEO4.innerHTML;
}

function display558VIDEO4(){
    var strVIDEO4 = '<embed pluginspage="http://www.videolan.org" \
            type="application\/x-vlc-plugin" \
            version="VideoLAN.VLCPlugin.2" \
            id="srcVIDEO4" \
            width="324" \
            height="132" \
            autoplay="yes" loop="no" \
            target="rtsp://192.168.88.235:558/stream.sdp" />';
    var tdElementVIDEO4 = document.getElementById('TABLENAME');
    var trElementVIDEO4 = tdElementVIDEO4.parentNode;
    trElementVIDEO4.removeChild(tdElementVIDEO4);
    trElementVIDEO4.innerHTML = strVIDEO4 + trElementVIDEO4.innerHTML;
}

function display559VIDEO4(){
    var strVIDEO4 = '<embed pluginspage="http://www.videolan.org" \
            type="application\/x-vlc-plugin" \
            version="VideoLAN.VLCPlugin.2" \
            id="srcVIDEO4" \
            width="324" \
            height="132" \
            autoplay="yes" loop="no" \
            target="rtsp://192.168.88.235:559/stream.sdp" />';
    var tdElementVIDEO4 = document.getElementById('TABLENAME');
    var trElementVIDEO4 = tdElementVIDEO4.parentNode;
    trElementVIDEO4.removeChild(tdElementVIDEO4);
    trElementVIDEO4.innerHTML = strVIDEO4 + trElementVIDEO4.innerHTML;
}

</script>
<button style="background-color:green" type="button" onclick="display556VIDEO4()">6</button>-
<button style="background-color:green" type="button" onclick="display557VIDEO4()">7</button>-
<button style="background-color:green" type="button" onclick="display558VIDEO4()">8</button>-
<button style="background-color:green" type="button" onclick="display559VIDEO4()">9</button><br/>

Blockquote

Upvotes: 1

Views: 62

Answers (2)

user6179587
user6179587

Reputation: 11

Found it!

I need to include the <TD id="TABLENAME">and closing </TD> in the var str declarations! When it was swapping out, it was removing the TDs. Put them back in and original code works great.

Thanks for debugging help!

Upvotes: 0

Shishir Arora
Shishir Arora

Reputation: 5923

function display558VIDEO4(){
    var strVIDEO4 = '<embed pluginspage="http://www.videolan.org" \
            type="application\/x-vlc-plugin" \
            version="VideoLAN.VLCPlugin.2" \
            id="srcVIDEO4" \
            width="324" \
            height="132" \
            autoplay="yes" loop="no" \
            target="rtsp://192.168.88.235:558/stream.sdp" />';
    var tdElementVIDEO4 = document.getElementById('TABLENAME');
    var trElementVIDEO4 = tdElementVIDEO4.parentNode;
    trElementVIDEO4.removeChild(tdElementVIDEO4);
    trElementVIDEO4.insertBefore(document.createRange().createContextualFragment(strVIDEO4),trElementVIDEO4.firstChild)

}

just use 

trElementVIDEO4.insertBefore(document.createRange().createContextualFragment(strVIDEO4),trElementVIDEO4.firstChild)

instead of 

trElementVIDEO4.innerHTML = strVIDEO4 + trElementVIDEO4.innerHTML;

in all ur scripts

also instead of placing click events in markup, keep them in javascript

instead of 

<button style="background-color:green" type="button" onclick="display556VIDEO4()">6</button>-
<button style="background-color:green" type="button" onclick="display557VIDEO4()">7</button>-
<button style="background-color:green" type="button" onclick="display558VIDEO4()">8</button>-
<button style="background-color:green" type="button" onclick="display559VIDEO4()">9</button><br/>

use 

 <button style="background-color:green" type="button" id= '556VIDEO4'>6</button>-
<button style="background-color:green" type="button" id= '557VIDEO4'>7</button>-
<button style="background-color:green" type="button" id= '558VIDEO4'>8</button>-
<button style="background-color:green" type="button" id= '559VIDEO4'>9</button><br/>

and in javascript place following code:

 document.addEventListener("click", function(e){
        if(e.target.tagName === 'BUTTON'){
        button = e.target;

        eval('display'+button.id+'()');//call display559VIDEO4()}
    });

Upvotes: 2

Related Questions