Dynamic javascript error

Question

I'm trying to make a dynamic javascript from code behind that would be added to the page and would enable thus a little jwplayer to open up, my code so far:

void playAudioFile(string path)
    {
        string script =
        @"    var div = document.getElementById('playerDiv');
              var audio = document.createElement('audio');
              audio.setAttribute('id', 'audioPlayer');
              div.appendChild(audio);

              jwplayer(""audioPlayer"").setup({
              file: 'http://ps.staging.be/webservice/MP3DownloadHandler.ashx?id='" + path +
              @"'&date=' + '<%=Encrypt.EncryptString(String.Format(""{0:dd/MM/yyyy}"",
              DateTime.UtcNow))%>',
              width: ""100%"",
              height: ""30"",
              type: 'mp3',
              stretching: ""uniform"",
              controlbar: 'bottom'
          });
    ";

    //Add the script to it's tags
    HtmlGenericControl playScript = new HtmlGenericControl("script");
    playScript.InnerHtml = script;
    //Add it on his place
    playerDiv.Controls.Add(playScript);

But this turns out to a "could not make contact with localhost:55323 does anyone know what mistake I make? + is there a better way? The purpose would be to display a player if a person clicked on an element on my website, and the players path would change on hand of the selected item. I'm kinda making a system like youtube if you want something to compare with.

Final Solution

string date = Encrypt.EncryptString(String.Format("{0:dd/MM/yyyy}", DateTime.UtcNow));
    string script =
    @"    var div = document.getElementById('ContentPlaceHolder1_playerDiv');
          var audio = document.createElement('audio');
          audio.setAttribute('id', 'audioPlayer');
          div.appendChild(audio);

          jwplayer(""audioPlayer"").setup({
              file: 'http://ps.staging.be/webservice/MP3DownloadHandler.ashx?id=" + path + @"&date=" + date + @"', 
              width: '100%',
              height: '30',
              type: 'mp3',
              stretching: 'uniform',
              controlbar: 'bottom'
          });
    ";

    //Add the script to it's tags
    HtmlGenericControl playScript = new HtmlGenericControl("script");
    playScript.InnerHtml = script;
    //Add it on his place
    playerDiv.Controls.Add(playScript);

This is really not a good way to do this. HTML and Javascript don't belong in the code-behind. And putting script blocks in it definitely won't work. You should look into making custom UserControls — CodingIntrigue
– CodingIntrigue, Commented Dec 17, 2013 at 11:11
Isn't the point of a usercontrol to get data from it to put it into the actual page? Rather then taking data from the actual page to update the UC? — Akorna
– Akorna, Commented Dec 17, 2013 at 12:36

DGibbs · Accepted Answer · 2013-12-17 11:22:02Z

2

You should be using ClientScript.RegisterStartupScript to do this:

Page.ClientScript.RegisterStartupScript(this.GetType(), "FooKey", script, true);

You have a code block inside the script, not sure why you don't build that string in code and then append it to the script:

string date = Encrypt.EncryptString(String.Format("{0:dd/MM/yyyy}", DateTime.UtcNow));
string script =
    @"    var div = document.getElementById('playerDiv');
          var audio = document.createElement('audio');
          audio.setAttribute('id', 'audioPlayer');
          div.appendChild(audio);
          jwplayer(""audioPlayer"").setup({
          file: 'http://ps.staging.be/webservice/MP3DownloadHandler.ashx?id='" + path +  @"'&date=" + date + ", width: '100%', height: '30',type: 'mp3', stretching: 'uniform',controlbar: 'bottom'});";

edited Dec 17, 2013 at 11:22

answered Dec 17, 2013 at 11:11

DGibbs

14.7k7 gold badges49 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

CodingIntrigue Over a year ago

Even this wont work. He's got a code block inside the script variable

DGibbs Over a year ago

Didn't see that - bit of an odd thing to do. Will edit

Akorna Over a year ago

I'd like it to be less-odd but I'm really bad at javascripting and I can't find anyone trying to do what I do to get a basic idea of what to do. It's as if except youtube, dailymotion and those sites no one even tries to make a collection of videos on their site that you can play one by one by clicking on them. Atleast not on mobile. The purpose of mine would be to be displayed on mobile devices

DGibbs Over a year ago

What you're trying to do isn't odd in and of itself. It was the embedding of a codeblock in the script when you could have quite easily just generated the string outside of the script in the code behind

Akorna Over a year ago

Sadly this still gives an error on the link-part of the script. And my link looks pretty odd if I inspect it later on in firefox: file: 'ps.staging.be/webservice/…' this is what it should be, except that he didn't pick the path as a completing string but he bracks it out, and I just can't fix that. I edited my post to the code that I have on this moment

|

Adil · Accepted Answer · 2013-12-17 11:14:03Z

1

You can not add scriptlet in the string and assign it to some controls InnerHtml. I would write javascript directly to aspx (html) side as I belive that is simple and more straight forward.

Change

+ '<%=Encrypt.EncryptString(String.Format(""{0:dd/MM/yyyy}"", DateTime.UtcNow))%>',

To

+ Encrypt.EncryptString(String.Format("{0:dd/MM/yyyy}", DateTime.UtcNow))

answered Dec 17, 2013 at 11:14

Adil

148k25 gold badges217 silver badges207 bronze badges

4 Comments

Akorna Over a year ago

Thing is, I'd love to do this in the innerHtml itself but the player shouldn't be displayed if firstly there wasn't an item selected and I don't know how to push forward an argument to the script if it's already in the innerhtml. And what you just suggested should do the trick but it still gives me an unexpected error.

Akorna Over a year ago

No error anymore, solved it with the answers above :) but what you gave did it too ^^

Akorna Over a year ago

And I don't have the reputation needed to up your answer anyway :(

Adil Over a year ago

No worries dear... I think you will get that reputation soon.

Collectives™ on Stack Overflow

Dynamic javascript error

2 Answers 2

9 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related