Using Ajax to create a Plot graphic with a flot selection

Using Ajax to create a Plot graphic with a flot selection

Hi all,

My first post to ask you if someone had ever met my problem. Here under the context :

1/ You have your main page index.php calling this function :

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery.flot.min.js" type="text/javascript"></script>
<script src="js/jquery.flot.stack.min.js" type="text/javascript"></script>
<script src="js/jquery.flot.selection.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
...

function loadGraphic( params ) {
    $.ajax({
      type: "POST",
      data: 'getGraphique=true' + params,
      url: "sales.php",
      success: function(reponse){
        if (reponse != '') {
                    $('#reportingSalesByDate').html(reponse);
        }
      }
    });
    $("#reportingSalesByDate").hide().fadeIn(1000).show();
});

2/ Then in the sales.php page, i generate an output string containing a dataTable + a wonderful graphic with the plot plugin BUT the flot.selection.js plugin doesn't work and is not take in account in the dom just created.

Here under my Ajax output :

$sOutput = '<table id="tableSalesByDate" class="display" border="0" cellspacing="0" cellpadding="0">'.chr(13);
.......dataTable content here...
$sOutput.= '</table>';

    $sOutput.= '
    <div class="clearer"></div>
    <h2 class="titre">Turnovers by date</h2>
    <div id="graphiqueSalesByDate" style="width:99%;height:200px;"></div>
    <script type="text/javascript">
    function showTooltip(x, y, contents) {
            $(\'<div id="tooltip">\' + contents + \'</div>\').css( {
                position: "absolute",
                display: "none",
                top: y + 5,
                left: x + 5,
                border: "1px solid #fdd",
                padding: "2px",
                "background-color": "#fee",
                opacity: 0.85
            }).appendTo("body").fadeIn(200);
    }
        $(function () {
            $("#tableSalesByDate").dataTable({...myoptions here...});
            var placeholder = $("#graphiqueSalesByDate");
            var data = ['.implode(",", $aGraphiqueSales).'];
            var options = { ...myoptions here...};
        $.plot(placeholder, data, options);
            placeholder.hide().fadeIn(1000).show();

        var previousPoint = null;
     
      // The plothover method works (it is defined in the native flot.min.js file)
        placeholder.bind("plothover", function (event, pos, item) {
        $("#x").text(pos.x.toFixed(2));
        if (item) {
          if (previousPoint != item.datapoint) {
            previousPoint = item.datapoint;
           
            $("#tooltip").remove();
            var x = item.datapoint[0].toFixed(),
                y = item.datapoint[1].toFixed();
           
            showTooltip(item.pageX, item.pageY,
                        item.series.label + " = " + y);
          }
        }
        else {
          $("#tooltip").remove();
          previousPoint = null;           
        }
        });
        // KO the plotselected doesn't launch any exception or error but is not take into account in my generated graphic. This method is defined in the jquery.flot.selection.js file !!
        placeholder.bind("plotselected", function (event, ranges) {
                $("#selection").text(ranges.xaxis.from.toFixed(1) + " to " + ranges.xaxis.to.toFixed(1));   
                plot = $.plot(placeholder, data,
                    $.extend(true, {}, options, {
                        xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
                    })
                );
        });
        });
    </script>'.chr(13);

echo utf8_encode($sOutput);
exit;


3/ My index page contains a great table with a pretty graphic BUT the graphic selection methods doesn't work ! And nothing appears in the error console....

I think that working with an Ajax call, defining inside the call file some other jquery elements (not defined in the main page) with specific plugins cause some defects and weird behaviours.

Any advices ?

Thxxxxxxxxxxx a lot !