How To Change href content dynamically on page load

Question

How To Change href content dynamically on page load

2.7k views Asked by Kishor Kulkarni At 25 June 2018 at 07:40

I want to run mp4 videos on web browser. For that i am using flow player and i want to change href content dynamically on page load. I have used below code.

<html><head>
<title>Wow! This is video</title>

<script src="http://releases.flowplayer.org/js/flowplayer-3.2.13.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {
        //var Filename = document.getElementById("<%=hdnFileName.ClientID%>").value;
        var Filename = "http://www.yahoo.com";

        $("a.mylink").attr("href", Filename);
    });
</script></head><body>


<!-- <a href="Video/Test.mp4" style="width: 500px; height: 400px;" id="A"></a>-->
<a href="Video/Test.mp4" style="width: 500px; height: 400px; margin: 10px; display: block" class="Test1" id="Test1"></a>
<script language="JavaScript" type="text/javascript">
    flowplayer("Test1", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf");
</script></body></html>

Here i will pass anchor tag value externally and i want to set it to anchor tag. But above code is not wotking. Can you please help?

Original Q&A

There are 2 answers

**Aayush Sharma** · Answer 1 · 2018-06-25T08:15:49+00:00

There are two ways that I know of to achieve what you want

1st: Do not set the href to attribute to anything in your HTML and then use js to set it

HTML Code :

<a style="width: 500px; height: 400px; margin: 10px; display: block" class="Test1" id="Test1"></a>

JS Code :

document.getElementById("Test1").setAttribute("href", Filename);

2nd: Create a new a Tag and replace the a tag with that

JS Code :

var Filename = "http://www.yahoo.com";
var aTag = document.createElement("a");
aTag.style.width = "500px";
aTag.style.height = "400px";
aTag.style.display = "block";
aTag.classList.add("Test1");
aTag.setAttribute("href", Filename);
aTag.id = "Test1";
document.getElementById("Test1").replaceWith(aTag)

**Abhighyaa Jain** · Answer 2 · 2018-06-25T08:39:21+00:00

The working code:

<html>
<head>
<title>Wow! This is video</title>

<script src="http://releases.flowplayer.org/js/flowplayer-3.2.13.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

</head><body>


<!-- <a href="Video/Test.mp4" style="width: 500px; height: 400px;" id="A"></a>-->
<a href="Test.mp4" style="width: 500px; height: 400px; margin: 10px; display: block" class="Test1" id="Test1"></a>
<script language="JavaScript" type="text/javascript">
  file = "http://techslides.com/demos/sample-videos/small.mp4";//any sample file you want
  $("a").attr("href",file);
  flowplayer("Test1", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf"); 
</script></body></html>

Simply you might be wondering why this works and not yours. So here is the reason.

Two big mistakes what you are doing:

mylink? its nowhere. better if you use $("#Test1") or $(".Test1")
You are loading the script when the document is ready. Which means if you debug your code or view the page source you will find that your href is updated one, but it plays the old video only. To correct it, you need to set the attribute without the ready function. Still it doesn't work because if you write it at the top, it will be overwritten by the actual href attribute.
Yahoo.com is not a mp4 video. The attribute you provide make sure is a video.

TechQA.

How To Change href content dynamically on page load

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in JQUERY-PLUGINS

Related Questions in FLOWPLAYER

Popular Questions

Popular Tags

Trending Questions