In one of my View pages I have a asp.net mvc PartialView. The PartialView contains some javascript (and jquery). In my asp.net main View I load the PartialView using ajax, within a div tag, in way given below. That is, from controller I return PartialView("_DonorEdit") and in my main page I use javascript to replace the content of the div tag with the PartialView response.

<div class="content" id="content">
    @{Html.RenderPartial("_DonorEdit");}   
</div>

Everything works fine except the javascript contained in the partialView (_DonorEdit). Thus the question boils down to - How do I have javascript embedded in an div tag and still get it working correctly.

regards, Nirvan.

Edit: This problem occurs only when the partial view is returned from the ajax call. In the above code, if I directly include the PartialView (on non-ajax request), then the javascript works properly. But if I later replace the content of div using ajax request, the javascript included in PartialView does not work. The embedded javascript simply does not appear along with the Partial View. So there seems to be some other reason, why the javascript embedded in Partial View does not get passed to browser after the ajax request success.

Edit2: The part of my javascript code

<script type=...>
//Date Picker. This works. I get Calendar popup as expected

$(document).ready(function () {
    $("#Donor_BirthDate").datepicker({
        dateFormat: "dd-mm-yy",
        changeMonth: true,
        changeYear: true,
        yearRange: "-75:+0"
    });

    $("#Donor_DateLastDonated").datepicker({
        dateFormat: "dd-mm-yy",
        changeMonth: true,
        changeYear: true,
        yearRange: "-20:+1"
    });
});


//Dropdown handler. Does not make it in my final View.

function residenceStateChanged(e) {
    var url = '@Url.Action("_GetCities", "DropDown")';
    var cmbResidenceCityId = $('#ResidenceCityId').data('tDropDownList');
    cmbResidenceCityId.loader.showBusy();

    $.ajax({
        type: 'GET',
        url: url,
        data: { StateId: e.value, AddSelectOption: true, SelectOption: 'Select' },
        traditional: true,
        success: function (resp, textStatus, jqXHR) {
            cmbResidenceCityId.dataBind(resp);
            cmbResidenceCityId.select(0);
            cmbResidenceCityId.trigger.change();
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert(jqXHR.responseText);
        },
        complete: function () {
            cmbResidenceCityId.loader.hideBusy();
        }
    });
}

....//Some other code omitted. Does not make it in final view.
</script>
link|improve this question

56% accept rate
What does the javascript look like? – Gísli Konráð Sep 6 '11 at 11:44
can you explicitly define what exactly doesn't work? what part of javascript doesn't work after the renderpartial ? – 3nigma Sep 6 '11 at 11:46
@Gisli, There are some dropdown menus in my Partial View. To handle for events like onchange for these dropdowns, I have some javascript code which is the code in question (ie not working because it gets included in div tag). Since, the Partial View gets included in a number of Main Pages, I have this javascript code embedded in the included file (Partial View), instead of replicating it in all my Main Views. – Nirvan Sep 6 '11 at 12:46
Are the javascript functions wrapped in a jQuery document.ready() function or something similar, because document.ready() will have fired long before you load your partial. – Tom Styles Sep 6 '11 at 13:07
@Tom, Infact it is the other way. The JQuery code included in the document.ready() works properly. But the other functions defined outside of jquery document.ready() simply doesn't appear in the Page. This is where I get reference error ("function xxx is not defined"). Shall I paste my javascript code here in my question? – Nirvan Sep 6 '11 at 13:14
show 2 more comments
feedback

2 Answers

I believe your problem is related to this one:

Calling a jQuery function inside html return from an AJAX call

Take a look and see if it helps.

link|improve this answer
At first I thought this would solve the problem, so I tried setting datatype to "html". But I still get MissingReference (in chrome), stating that the the javascript function is not available. – Nirvan Sep 6 '11 at 15:44
Can you see the JavaScript function in the code using Firebug? Can you inspect the HTML that's returned from the AJAX call (again, using Firebug and the Net tab)? If the function isn't actually being returned from your AJAX call, something is wrong with the partial View. – Garrett Vlieger Sep 6 '11 at 18:34
I used fiddler to check what response comes from the server. The javascript functions defined in PartialView come as a part of response from the server. So the server code is fine and it returns correct response. The problem is that when I Inspect the html in the rendered View, I don't see these functions. The partial view is part of a Telerik Modal Window. I hope it is not because of telerik window that this problem appears (ideally it shouldn't be). So in short, response contains the embedded javascript, but the rendered html does not have it. – Nirvan Sep 7 '11 at 4:24
feedback

Call the javascript function in your ajax success part

link|improve this answer
There are some functions which are event based. I cannot simply call the javascript function. These functions get executed whenever some event like onchange occurs in one of my dropdowns. – Nirvan Sep 6 '11 at 12:49
Depending on what your javascript is looking for the OnSuccess usually works. You can also try including the script in $(document).ready of you partial. – CrazyCoderz Sep 6 '11 at 15:48
feedback

Your Answer

 
or
required, but never shown

Not the answer you're looking for? Browse other questions tagged or ask your own question.