JQuery function fails when content loaded from Ajax form

Question

I have a problem with an image that I am applying a custom jquery function against. Consider the following block of code.

<% Dim sUniqueIdent As String = Now.Ticks.ToString%>

<div id="chart<%: sUniqueIdent %>"></div>

<script type="text/javascript">
   $(document).ready(function () {
      bindLinksForChart<%: sUniqueIdent %>();
   });

   function bindLinksForChart<%:sUniqueIdent %>(){
      $('div#chart<%: sUniqueIdent %>').chartLinks({
          charturl: '<%: Model.ChartPath %>', 
          uniqueident: '<%: sUniqueIdent %>', 
          height: '<%: Model.Height%>',
          width: '<%: Model.Width%>'        
      });
   }
</script>

I have this embedded (deep) into some jQuery tabs, I use a unique identifier as there are a number of these charts.

the chartlinks function loads the image inside the div with a div of links floating over top that become visible when the user mouses over.

This works fine until I reload something on one of the tabs using an Ajax form. when the form loads, it loads all the content correctly however it fails to load the image and floating links (provided by the chartlinks function)

Here is the form

<% Using Ajax.BeginForm("Tab", New With {
    .controller = "Content"},
New AjaxOptions With {
    .UpdateTargetId = "chartDiv", 
    .InsertionMode = InsertionMode.Replace, 
    .OnSuccess = "bindLinksForChart<%:sUniqueIdent%>"})

<input type="submit" id="UpdateChart" value="Update Chart" /></p>

<%End Using%>

Any assistance would be greatly appreciated

ps. chartDiv is the div that contains the partial view

Answer 1

Hi. Could you elaborate a bit on where you declare the unique identifier and what you mean by reload something on one of the tabs?

I haven't tried this out but still give this a shot.

<% Dim sUniqueIdent As String = System.Guid.NewGuid()%>

<div id="<%: sUniqueIdent %>" class="chart"></div>

<script type="text/javascript">
   $(document).ready(function () {
      bindLinksForChart("<%: sUniqueIdent %>");
   });

   function bindLinksForChart(indentifier){
      $('.chart').chartLinks({
          charturl: '<%: Model.ChartPath %>', 
          uniqueident: identifier, 
          height: '<%: Model.Height%>',
          width: '<%: Model.Width%>'        
      });
   }
</script>

This will allow you to have one java script function instead of a different function for every div that you have. Then you can change your Ajax form code to:

<% Using Ajax.BeginForm("Tab", New With {
    .controller = "Content"},
New AjaxOptions With {
    .UpdateTargetId = "chartDiv", 
    .InsertionMode = InsertionMode.Replace, 
    .OnSuccess = "bindLinksForChart(" + sUniqueIdent + ")"})

<input type="submit" id="UpdateChart" value="Update Chart" /></p>

<%End Using%>