title: Rendering jGallery as PartialView not working when using ajax
body: <p>I´m using <a href="http://jgallery.jakubkowalczyk.pl/" rel="nofollow">jGallery</a> to render my images.  I show all my images on page load and that works very well using jGallery.  I render my gallery as a <strong><em>PartialView</em></strong>.  I´m also using <a href="http://demos.telerik.com/kendo-ui/web/upload/index.html" rel="nofollow">Kendo UI</a> for my file uploader.  My goal is to use the uploader to add images to my collection and then upon success refresh my jGallery grid.</p>
  
  <p>The problem I´m facing is, that, whenever file is uploaded, I call my controller to get all the images from database using <strong><em>AJAX</em></strong>, but the <strong><em>jGallery</em></strong> doesn't render at all.  All it does is render the markup without any script working.  </p>
  
  <p>How can I use <strong><em>PartialView</em></strong> with <strong><em>AJAX</em></strong>, and still use jGallery script within the <strong><em>PartialView</em></strong>?  (I hope this question makes any sense)</p>
  
  <p><strong>My Index.cshtml and my controller action:</strong></p>
  
  <pre><code>public ActionResult Index()
  {
      IEnumerable&lt;Image&gt; images = _imageModel.GetAllImages();
  
      return View(new ImageViewModel(images));
  }
  </code></pre>
  
  <p><strong>Index.cshtml</strong></p>
  
  <pre><code>//stuff abbreviated
  &lt;div id="ImageSection"&gt;
      @{
          Html.RenderPartial("LoadImages", Model);
      }
  &lt;/div&gt;
  //stuff abbreviated
  &lt;div&gt;
      @(Html.Kendo().Upload()
            .Enable(true)
            .Name("files")
            .Async(a =&gt; a
              .Save("Save", "Image")
              .Remove("Remove", "Image")
              .AutoUpload(true)
            )
            .Events(e =&gt; e.Success("onImageUploadSuccess"))
            )
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>My onImageUploadSuccess query and my controller action:</strong> </p>
  
  <pre><code>function onImageUploadSuccess(e) {
  $.ajax({
      type: "POST",
      dataType: "html",
      url: 'Image/LoadImages/',
      success: function (data) {
          $("#ImageSection").html(data);
      },
      error: function (data) {
          //TODO: error
      }
  });
  }
  </code></pre>
  
  <p><strong>Controller action</strong></p>
  
  <pre><code>public ActionResult LoadImages()
  {
      IEnumerable&lt;Image&gt; images = _imageModel.GetAllImages();
  
      return PartialView(new ImageViewModel(images));
  }
  </code></pre>
  
  <p><strong>LoadImages.cshtml</strong></p>
  
  <pre><code>@model WebPage.ViewModels.ImageViewModel
  
  @if (Model != null)
  {
      &lt;div style="padding: 0px 0; width: 100%; margin: 0 auto; height: auto;"&gt;
          &lt;div id="gallery"&gt;
              @foreach (var cat in Model.Categories)
              {
                  string cat1 = cat;
                  &lt;div class="album" data-jgallery-album-title="@cat1"&gt;
                      &lt;h1&gt;@cat1&lt;/h1&gt;
                      @foreach (var image in Model.Images.Where(w =&gt; w.Category.Name.Equals(cat1)))
                      {
                          &lt;a href="@Url.Action("GetImageData", "Image", new { id = image.Id })"&gt;
                              &lt;img src="@Url.Action("GetImageData", "Image", new { id = image.Id })" alt="@image.Description"
                              data-jgallery-bg-color="@image.BackgrColor" data-jgallery-text-color="@image.TextColor" /&gt;
                          &lt;/a&gt;
                      }
                  &lt;/div&gt;
              }
          &lt;/div&gt;
      &lt;/div&gt;
  }
  </code></pre>
  
  <p><strong>This is onDocumentReady</strong></p>
  
  <pre><code>jQuery(document).ready(function ($) {
  $('#gallery').jGallery({
      mode: 'standard', // [ full-screen, standard, slider ]
      width: '100%', // (only for standard or slider mode)
      height: '600px', // (only for standard or slider mode)
      autostartAtImage: 1,
      autostartAtAlbum: 1,
      canResize: true,
      backgroundColor: '#000',
      textColor: '#fff',
      thumbnails: true,
      thumbnailsFullScreen: true,
      thumbType: 'image', // [ image | square | number ]
      thumbnailsPosition: 'top', // [ top | bottom | left | right ]
      reloadThumbnails: true, //Reload thumbnails when function jGallery() is called again for the same item
      thumbWidth: 100, //px
      thumbHeight: 100, //px
      thumbWidthOnFullScreen: 100, //px
      thumbHeightOnFullScreen: 100, //px
      canMinimalizeThumbnails: true,
      transition: 'moveToBottom_moveFromTop', // http://jgallery.jakubkowalczyk.pl/customize
      transitionWaveDirection: 'forward', // [ forward | backward ]
      transitionCols: 1,
      transitionRows: 5,
      showTimingFunction: 'linear', // [ linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) ]
      hideTimingFunction: 'linear', // [ linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) ]
      transitionDuration: '0.5s',
      zoomSize: 'original', // [ fit | original | fill ] (only for full-screen or standard mode)
      title: true,
      slideshow: true,
      slideshowAutostart: false,
      slideshowCanRandom: true,
      slideshowRandom: false,
      slideshowRandomAutostart: false,
      slideshowInterval: '8s',
      preloadAll: false,
      disabledOnIE8AndOlder: true,
      initGallery: function () {
      },
      showPhoto: function () {
      },
      beforeLoadPhoto: function () {
      },
      afterLoadPhoto: function () {
      },
      showGallery: function () {
      },
      closeGallery: function () {
      }
  });
  
  });
  </code></pre>