js works inside the page but not in code behind

Question

Hi guys,

I have this function put in a MasterPage, which shows up an mp3 player:

<script type="text/javascript">
    $(document).ready(function() {
        var stageW = 500;
        var stageH = 216;
        var cacheBuster = Date.parse(new Date());

        var flashvars = {};
        var params = {};

        params.bgcolor = '#F6F6F6';
        params.allowfullscreen = 'true';


        flashvars.stageW = stageW;
        flashvars.stageH = stageH;

        flashvars.pathToFiles = '';

        flashvars.settingsPath = '../mp3player/mp3player_settings.xml';
        flashvars.xmlPath = '<%# getRestXmlPlayerUrl() %>';

        flashvars.keepSelected = 't';
        flashvars.selectedWindow = '4';
        flashvars.slideshow = 't';

        flashvars.imageWidth = '130';
        flashvars.imageHeight = '130';

        swfobject.embedSWF('swf/preview.swf?t=' + cacheBuster, 'myContent', stageW, stageH, '9.0.124', 'swf/expressInstall.swf', flashvars, params);
    }); 
    </script>

All works great. But, because i have some ajax on the page with update panel, the flash in not rendered when ajax requests occurs so i need to register this function and i've tried something like this:

protected void Page_PreRender(object sender, EventArgs e)
    {
    Type cstype = this.GetType();
    String csnameForPlayer = "applyStyleToMp3Player";
        if (!Page.ClientScript.IsClientScriptBlockRegistered(cstype, csnameForPlayer))
        {
            StringBuilder cstextForPlayer = new StringBuilder();
            cstextForPlayer.Append(" $(document).ready(function() { "
    + " var stageW = 500;"
    + " var stageH = 216;"
    + " var cacheBuster = Date.parse(new Date());"

    + " var flashvars = {};"
    + " var params = {};"

    + " params.bgcolor = '#F6F6F6';"
    + " params.allowfullscreen = 'true';"


    + " flashvars.stageW = stageW;"
    + " flashvars.stageH = stageH;"

    + " flashvars.pathToFiles = '';"

    + " flashvars.settingsPath = '../mp3player/mp3player_settings.xml';"
    + " flashvars.xmlPath = '<%# getRestXmlPlayerUrl() %>';"

    + " flashvars.keepSelected = 't';"
    + " flashvars.selectedWindow = '4';"
    + " flashvars.slideshow = 't';"

    + " flashvars.imageWidth = '130';"
    + " flashvars.imageHeight = '130';"

   + " swfobject.embedSWF('swf/preview.swf?t=' + cacheBuster, 'myContent', stageW, stageH, '9.0.124', 'swf/expressInstall.swf', flashvars, params);"
   + "});   ");
        ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), csnameForPlayer, cstextForPlayer.ToString(), true);
    }
}

Well, this does not work. The flash player does not appear any more, so, i assume that is something wrong in the cstextForPlayer.

I've spent over one hour to figure it out but i've failed.

Does anyone see the problem?

Thanks in advance.

Answer 1

I frankly don't know a lot about code-behind, but this line:

+ " flashvars.xmlPath = '<%# getRestXmlPlayerUrl() %>';"

...looks likely to be a problem. Shouldn't that be:

+ " flashvars.xmlPath = '" + getRestXmlPlayerUrl() + "';"

...or something?

Answer 2

<%# getRestXmlPlayerUrl() %> is the part that causes problems. When used in RegisterStartupScript it won't return any value but it will be hardcoded. Now instead of going through all the pain of mixing C# and javascript I would recommend you externalizing this script into a function, it's always better to use the right tools for the right thing:

function embedPlayer(xmlPath) {
    var stageW = 500;
    var stageH = 216;
    var cacheBuster = Date.parse(new Date());

    var flashvars = {};
    var params = {};

    params.bgcolor = '#F6F6F6';
    params.allowfullscreen = 'true';


    flashvars.stageW = stageW;
    flashvars.stageH = stageH;

    flashvars.pathToFiles = '';

    flashvars.settingsPath = '../mp3player/mp3player_settings.xml';
    flashvars.xmlPath = xmlPath;

    flashvars.keepSelected = 't';
    flashvars.selectedWindow = '4';
    flashvars.slideshow = 't';

    flashvars.imageWidth = '130';
    flashvars.imageHeight = '130';

    swfobject.embedSWF('swf/preview.swf?t=' + cacheBuster, 'myContent', stageW, stageH, '9.0.124', 'swf/expressInstall.swf', flashvars, params);
}

This would simplify your server side code to simply calling the previous function and passing it the xml path as argument:

string csnameForPlayer = "applyStyleToMp3Player";
if (!Page.ClientScript.IsClientScriptBlockRegistered(this.GetType(), csnameForPlayer))
{
    var script = string.Format("embedPlayer('{0}');", this.getRestXmlPlayerUrl());
    ScriptManager.RegisterStartupScript(
        this.Page, 
        this.Page.GetType(), 
        csnameForPlayer, 
        script, 
        true
    );
}