Execute Javascript inside a partial view in ASP.NET MVC

Question

I use this JavaScript code inside the head tag in order to populate the divs with a browse button so that users can upload images (swfupload).

<head>
...
<script type="text/javascript">
    var swfu = function() {
        return new SWFUpload({
            // Backend Settings
            // settings go here...
            // Too long to display here
            // Debug Settings
            debug: false
        });
    }
    window.onload = swfu;
</script>
</head>

....

<div id="swfu_container" style="margin: 0px 10px;">
    <div>
    <span id="spanButtonPlaceholder"></span>
</div>
<div id="divFileProgressContainer" style="height: 75px;"></div>
<div id="thumbnails"></div>
</div>

This works well, but the problem is when I try to put this code inside of a partial view. So far, I haven't be able to get this to work.

Is there anyone more experienced to the rescue?

Thank you

What do you try to put into the partial? The second half of the HTML (everything inside 'swfu_container')? — Dan Atkinson, Sep 18 '09 at 23:05
I write window.onload = swfu (in the script, inside the head tag) in order to get everything inside 'swfu_container' (the part that's in the partial). The problem, I think, is that when the page is loaded, the partial is not there yet! I believe the solution is in the get the script to execute only when the partial is loaded. Thanks! — Fabio Milheiro, Sep 18 '09 at 23:58

score 3 · Accepted Answer · answered Nov 16 '09 at 13:46

3

You can put your function like this:

<%= Ajax.ActionLink("YourAction",new AjaxOptions{ OnSuccess="swfu", UpdateTargetId = "spanButtonPlaceholder" }) %>

so your swfu function will be called if your update is successfull

answered Nov 16 '09 at 13:46

Gregoire

24,219
6
46
73

1

Sorry for the delay, your answer has solved this problem. Thanks Gregoire! – Fabio Milheiro Oct 13 '10 at 17:28

score 2 · Answer 2 · answered Sep 19 '09 at 01:00

2

The point of window.onload is to execute the given function once the page has finished... loading. That said, you should consider moving the onload to the bottom of the body. And I'm not the worlds biggest fan of keeping scripts in the head. :)

answered Sep 19 '09 at 01:00

Dan Atkinson

11,391
14
81
114

I see your point about keeping the script in the bottom of the body. The problem is that the partial is only loaded after the user has done some action. So, onload in the head or in the the bottom of the body, doesn't do the trick. I tried putting this code (both the script and the HTML) in the partial itself, but it doesn't work. I need the script to run and populate the divs only when the partial appears in the screen. How do we do that?? – Fabio Milheiro Sep 19 '09 at 14:19

score 1 · Answer 3 · answered Nov 16 '09 at 13:37

Partial views are rendered with Microsoft Ajax which does not evaluate JavaScript code. I would suggest looking at not using partial views in this case or look at other view engines like Spark....or put all required javascript in your parent view which kinda makes your code a bit sloppy

Execute Javascript inside a partial view in ASP.NET MVC

3 Answers3

Linked