Adding Images Dynamically From jQuery

[Mathew]

I have a RadImageGallery that appears in a boostrap modal when a button is clicked. I want to load different sets of images based on the project that was selected.

 

<form id="form1" runat="server">
  <telerik:RadScriptManager runat="server" ID="RadScriptManager1" EnableEmbeddedjQuery="false" />
    <div class="col-lg-12">
      <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel2">
        <h2 class="Heading">Image Viewer</h2>
        <telerik:RadImageGallery RenderMode="Lightweight" runat="server" ID="ImageViewerGallery" Height="473px" DisplayAreaMode="Image">
          <Items></Items>
        </telerik:RadImageGallery>
      </telerik:RadAjaxPanel>
    </div>
</form>

In jQuery, whenever I call 

var imageGalleryItems = $find('<%=ImageViewerGallery.ClientID%>').get_items();

I get an error message "Cannot read property 'get_items' of null.

Any ideas?

[Peter Milchev]

Hello Mathew,

Most probably you are trying to access the ImageGallery before it is initialized. Please check if using the Sys.Application.Load event would fix the issue.

• https://stackoverflow.com/questions/3630341/sys-application-add-load-vs-document-ready-vs-pageload

<telerik:RadCodeBlock runat="server">
    <script>
        function pageLoadHandler() {

            var imageGalleryItems = $find('<%=ImageViewerGallery.ClientID%>').get_items();

            // Sys.Application.remove_load(pageLoadHandler);
        }
        Sys.Application.add_load(pageLoadHandler);

    </script>
</telerik:RadCodeBlock>

Regards,
Peter Milchev
Progress Telerik