.net mvc load partialview that contains jquery

Question

Hi i'm new at mvc and web develop; I'd like to do something like this

Then when you click in edit,the page will load something like.

I'm using ajax to do this but the problem is that when i click on edit the ajax don't use any of my scripts, i mean the date time picker script is not working, or any other javascript.

Mi code is like this

My principal view:

<div id="Estudiantes del tutor">
            </br>
            <table style="margin-left:auto; margin-right:auto;">
                <tr>
                    <th>Código</th>
                    <th>Estudiante</th>
                    <th></th>
                </tr>
                <% foreach (var item in Model.Hijos) { %>
                    <tr>
                        <td>
                            <%: Html.Encode(item.PersonaNaturalId.ToString("D8")) %>
                        </td>
                        <td>
                            <%: Html.Encode(item.Nombre +" "+item.ApellidoPaterno+ " "+ item.ApellidoMaterno) %>
                        </td>
                        <td>
                            <%: Html.ActionLink("Editar", "EditarEstudiante", new { tutorId = Model.TutorBE.PersonaNaturalId ,estudianteId = item.PersonaNaturalId }) %>
                              |
                            <%: Ajax.ActionLink("Editar", "EditarEstudiante", new { tutorId = Model.TutorBE.PersonaNaturalId ,estudianteId = item.PersonaNaturalId }, new AjaxOptions { UpdateTargetId = "DatosEstudiante"})%>
                        </td>
                    </tr>
                <% } %>
            </table>
    </div>
    <br/>
    <br/>
    <br/>
    <div id="DatosEstudiante">

    </div>

And my partial view looks like:

    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/SiteHeinrich.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.8.8.custom.min.js" type="text/javascript"></script>
    <link href="../../Content/blitzer/jquery-ui-1.8.8.custom.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/VocacionalSite.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
    <script src="../../Scripts/MicrosoftMvcValidation.debug.js" type="text/javascript"></script>

<br /> <%= Html.ValidationSummary("Por favor corrija los errores e intente de nuevo.")%> <%using (Html.BeginForm())  { %> <%: Html.ValidationSummary(true) %> <div id="DatosGenerales">
    <fieldset style="margin-left: auto; margin-right: auto;">
        <legend>Datos generales del estudiante</legend>
        <div id="Nombres del estudiante">
            <div id="Nombre" style="float: left; margin-left: auto; margin-right: auto; width: 250px;">
                <%: Html.Label("Nombres: ") %>
                <br />
                <%: Html.TextBox("Nombres", Model.Estudiante.Nombre, Model.Estudiante.Nombre != null ? new {@readonly ="readonly"} : null )%>
                <%: Html.ValidationMessage("Nombres","*") %>
            </div>
            <div id="ApellidoPaterno" style="float: left; margin-left: auto; margin-right: auto;
                width: 250px;">
                <%: Html.Label("Apellido paterno: ") %>
                <br />
                <%: Html.TextBox("ApellidoPaterno", Model.Estudiante.ApellidoPaterno, Model.Estudiante.ApellidoPaterno != null ? new { @readonly = "readonly" } : null)%>
                <%: Html.ValidationMessage("ApellidoPaterno","*")%>
            </div>
            <div id="ApellidoMaterno" style="float: left; margin-left: auto; margin-right: auto;
                width: 250px;">
                <%: Html.Label("Apellido materno: ") %>
                <br />
                <%: Html.TextBox("ApellidoMaterno", Model.Estudiante.ApellidoMaterno, Model.Estudiante.ApellidoMaterno != null ? new { @readonly = "readonly" } : null)%>
                <%: Html.ValidationMessage("ApellidoMaterno", "*")%>
            </div>
        </div>
        <br />
        <div id="Otros datos generales" style="clear: both;">
            <br />
            <script>
                $(function () {
                    $("#datepicker").datepicker();
                });     </script>



<div class="demo">

<p>Date: <input type="text" id="datepicker"></p>

</div><!-- End demo -->



<div class="demo-description" style="display: none; "> <p>The datepicker is tied to a standard form input field.  Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay.  Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p> </div><!-- End demo-description -->
        </div>
    </fieldset> </div>

Answer 1

I would use jQuery's ready() function to run your script.

So pull this out of your partial view

<script>
 $(function () 
 {
    $("#datepicker").datepicker();
 });     
</script>

and add this to your principal view. It will run after the page loads.

<script type="text/javascript">
   $(document).ready(function () 
   {
     $("#datepicker").datepicker();
   });   
</script>

Answer 2

jQuery's document.ready only fires once. After the DOM is ready. So none of your scripts will be executed. You can take a look at using something like livequery .