Include JavaScript and Ajax in partial views? RSS

• • Reply
  

  luisvilla

  Member

  8 Points

  7 Posts

  Include JavaScript and Ajax in partial views?

  Mar 25, 2012 05:26 PM|LINK

  Hello friends
  
  I have a partial view which contain JavaScript and Ajax, but does not run JavaScript code when change item in the DropDownLis whit id "University"

  my partial view ("_Campus"):

  @model RolesMVC3.Areas.Superusuario.Models.CampusViewModel
  <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
  <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
  <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
             <script type="text/javascript">
                 $(document).ready(function () {
                     $("#University").change(function () {
                         var idDept = $(this).val();
                         $.getJSON("Office/GetCityList", { id: idDept },
                  function (myData) {
                      var select = $("#city");
                      select.empty();
                      select.append($('<option/>', {
                          value: 0,
                          text: "-- select city --"
                      }));
                      $.each(myData, function (index, itemData) {
                          select.append($('<option/>', {
                              value: itemData.Value,
                              text: itemData.Text
                          }));
                      });
                  });
                     });
                 });
  </script>
  
    @using (Html.BeginForm())
    {
         @Html.DropDownListFor(model => model.IdUniversity,
                     new SelectList(ViewBag.IdUniversity as System.Collections.IEnumerable, "IdUniversity", "Name"),
          "-- select university --", new { id = "University" })
  
          @Html.DropDownListFor(model => model.City,
          new SelectList(Enumerable.Empty<SelectListItem>(), "IdCity", "NameCity"), "-- select city --",
          new { id = "city" })
    }

  the parent view:

  @model RolesMVC3.Models.OFFICE
  
  @{
      ViewBag.Title = "Create";
  }
  
  <h2>OFFICE</h2>
  
  <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
  <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
  
  
  @using (Html.BeginForm()) {
      @Html.ValidationSummary(true)
      <fieldset>
          <legend>OFFICE</legend>
  
          <fieldset>
           @Html.Partial("_Campus")
          </fieldset>
  
       
          <div class="editor-label">
              @Html.LabelFor(model => model.AddressOffice)
          </div>
          <div class="editor-field">
              @Html.EditorFor(model => model.AddressOffice)
              @Html.ValidationMessageFor(model => model.AddressOffice)
          </div>
  
         
  
          <p>
              <input type="submit" value="Create" />
          </p>
      </fieldset>
  }
  
  <div>
      @Html.ActionLink("Back to List", "Index")
  </div>

  how I do to run JavaScript code? Please help me! :D

  • Edited by luisvilla on Mar 25, 2012 06:01 PM
  • Edited by luisvilla on Mar 25, 2012 07:36 PM
• • Reply
  

  thaicarrot

  Contributor

  5426 Points

  1507 Posts

  Re: Include JavaScript and Ajax in partial views?

  Mar 25, 2012 06:17 PM|LINK

  luisvilla

  luisvilla

   

              <script type="text/javascript">

                  (function($)){

                      $("#University").change(function ()

  {                        var idDept = $(this).val();

                          $.getJSON("Office/GetCityList", { id: idDept },

                   function (myData) {

                       var select = $("#city");

                       select.empty();

                       select.append($('<option/>', {

                           value: 0,

                           text: "-- select city --"

                      }));

                      $.each(myData, function (index, itemData) {

                           select.append($('<option/>', {

                               value: itemData.Value,

                               text: itemData.Text

                           }));

                      });

                   });

                     });

                 }(jQuery));

  </script>

  Best Regards
  Weera
  
  
  • Edited by thaicarrot on Mar 25, 2012 06:18 PM
• • Reply
  

  luisvilla

  Member

  8 Points

  7 Posts

  Re: Include JavaScript and Ajax in partial views?

  Mar 25, 2012 07:10 PM|LINK

  In the line

  $.each(myData, function (index, itemData)

  "index" is the action name in te controller "Office"?

• • Reply
  

  kshyju

  Member

  134 Points

  39 Posts

  Re: Include JavaScript and Ajax in partial views?

  Mar 25, 2012 07:30 PM|LINK

  You mentioned that no javascript is running when you click on "Create" button. But i dont see any code here which is boounded to the click event of the create button. What javascript code is supposed to run ? Did you check whethere there is some script errors in your page ? User firebug to see what error it is

  Please mark the replies as answers if they help.
  
  My flarack profile
• • Reply
  

  luisvilla

  Member

  8 Points

  7 Posts

  Re: Include JavaScript and Ajax in partial views?

  Mar 25, 2012 07:34 PM|LINK

  Sorry, the  javascript code does not run when I change of item in the DropDownList with id "University"

• • Reply
  

  luisvilla

  Member

  8 Points

  7 Posts

  Re: Include JavaScript and Ajax in partial views?

  Mar 25, 2012 07:34 PM|LINK

  Sorry, the  javascript code does not run when I change of item in the DropDownList with id "University"

• • Reply
  

  imteyazahmad...

  Member

  286 Points

  131 Posts

  Re: Include JavaScript and Ajax in partial views?

  Mar 26, 2012 05:11 AM|LINK

  try to avoid two @Html.Beginform(),i.e one is in your main view,and other is on your partial view. Remove form from your partial view,and test it agian.

  I.Ahmad