How to refresh the page with an audio tag based on browser after click of
hyperlink
I have a requirement where one can see an image or play an audio
(CAPTCHA).I added the div tag around the image and audio and with click of
hyperlink they do change the display of the div but the changes (div) get
lost when page gets redisplayed.
Technology used: Java, JSP, javascript
There is a
section in the jsp which needs to
a) display an image(default) or
b) play an audio when requested
The "src" for both image and audio is a servlet.
<tr>
<td> </td>
<td> <div id="audioPlayerContainer" style="display:none"> </div>
</td>
</tr>
<tr>
<td> </td>
<td><div id="imageContainer">
<img src='MyServlet?mode=image&ts=<%=Math.random()%>' width="100"
height="100"/>
</div>
</td>
</tr>
section in the jsp where links to alternate between requesting image or
audio are present
<a href="#" onclick="switchMode('audio');">Play audio</a> // OR
<a href="#" onclick="switchMode('image');> Show image</a>
javascript on click of link
function switchMode(modeType){
if (modeType=="audio"){
var uri = '/MyServlet?mode=audio&ts='+new Date().getTime();
document.getElementById('audioPlayerContainer').style.display ="block";
document.getElementById('imageContainer').style.display ="none";
//logic to determine the browser type and browser verion- embed tag
or audio
document.getElementById("audioPlayerContainer").innerHTML=
"<embed src='"+uri+"' autostart='true' loop='false' height='100'
width='100'/>";
}else if (modeType=="image"){
document.getElementById("audioPlayerContainer").style.display = "none";
document.getElementById('imageContainer').style.display ="block";
}
//page to reload with updated divs
//window.location.href=window.location.href;
//window.location.reload(0); //Both reloads page, state of div tags comes
bck to default
//document.forms[0].submit();//this doesnt even seem to work
}
`
The issue is dom injection is not working. On initial page load the image
gets displayed fine. However, once the "play audio" is clicked, the js
gets executed. But I dont see any audio player and on right clicking and
checking the "View source" the audioplayercontainer is still with
display:none . Thats the reason I tried adding reload/submit thinking that
maybe if page refreshes then it will load with updated divs.
No comments:
Post a Comment