how does this code work

[J. Kevin Robbins]

I found some code on SO that does what I want, but I don't understand how it works. Background: I have an iframe which will display a chart (JFreeChart) generated by a servlet. The user enters a date range which goes to another servlet which gets the dataset and puts it in the session. The chart generator grabs that dataset and creates the chart. I needed to refresh the iframe so it would build a new chart when the parameters are entered or new parameters are entered.

This may not be the best way to do things, but after two days of struggling with JFreeChart, this is what I came up with, based on the examples in their developer guide.

The first solution suggested was this:

$('#imgiframe').attr(src, $('#imgiframe').attr(src))

In other words, setting the src attribute to itself to force a refresh. This didn't work for me. This does work:

 $('#imgiframe').attr('src', function(i, val) {
          return val;
        });

But I don't understand how it works. If I leave out the "i" parameter, it doesn't work. So what is "i" and where does "val" get a value from?

[Bear Bibeault]

OK, that's a weird one and not one of the browser vagaries that I've seen. You can set a breakpoint in the function to see what's bing passed to it (if anything) as the 2nd param.

And here's where I offer an alternative: nothing made me happier than when I stopped trying to do charting on the server and moved it to the client. You may find that switching to a client-side charting package such as HighCharts causes you to pull out less hair.

[J. Kevin Robbins]

It's called from the success function of an Ajax call. I tested it and "i" is zero (a default value?), and val is the src url of the iframe, but I don't know how it's getting that.

It's a weird one alright. It works, but I hate not knowing why it works.

[Eric Pascarello]

J. Kevin Robbins wrote:It's called from the success function of an Ajax call.

There is no Ajax call!


Read the documentation for .attr( attributeName, function ) http://api.jquery.com/attr/#attr-attributeName-function

[Bear Bibeault]

Eric beat me to it.

It still doesn't solve the issue of why the first form didn't work for you, but I prefer the 2nd form in any case because it does not rely upon repetition of the selector (a vector for introducing errors).

[Aside: I'd still recommend looking into client-side charting. There are lots of advantages, including interactivity, simplification if the code, and elimination of the iframe.]

[J. Kevin Robbins]

Eric Pascarello wrote:
There is no Ajax call!

Sorry, I was trying to keep the code to a minimum since it was that one line that puzzled me.

$('#daterangesubmit').on('click', function () {
    $.ajax({
      url: '/mfgweb/DdmDeepCam',
      type: 'post',
      datatype: 'html',
      data: {
        action: 'chart',
        fromdate: $('#fromdatehdn').val(),
        fromtime: $('#fromtime').val(),
        todate: $('#todatehdn').val(),
        totime: $('#totime').val()
      },
      error: function (jqXHR, textStatus, errorThrown) {
        console.log('submit click failed');
        console.log('status is ' + textStatus);
        console.log('error is ' + errorThrown);
      },
      success: function (results) {
        $('#imgiframe').show();        
        $('#imgiframe').attr('src', function(i, val) {
          console.log("i is " + i);
          console.log("val is " + val);
          return val;
        });
      }
    });
  });

[J. Kevin Robbins]

Bear Bibeault wrote:
[Aside: I'd still recommend looking into client-side charting. There are lots of advantages, including interactivity, simplification if the code, and elimination of the iframe.]

I never heard of HighCharts. I'm going to look at it. Thanks for that tip.