Search code examples
highchartshighslide

Using Ajax for maincontentText in Highslide (in Highcharts)

First, thanks for the help!

Basically, I'm using Highslide in Highcharts to display some pictures when someone clicks on a datapoint in a line graph. Below is the code: 

hs.htmlExpand(null, 
                {                       
                    pageOrigin: 
                    {
                        x: this.pageX,
                        y: this.pageY
                    },

                    headingText: "<p style='margin: 0 auto;'> Weight: " + this.y,

                    maincontentText: "<p class='pictures'></p>" +
                        $.ajax
                ({
                    type: "post",
                    url: "pictures.php",
                    data: 
                    {
                        "date" : this.Pictures
                    },
                    success: function(result)
                    {
                        $('.pictures').html(result); 
                    }
                }),

                    width: 700, 

                    height: 600
                });

Right now, Highslide correctly displays the pictures, but it also outputs "[Object object]" at the end of the Highslide pop-out. If I change my php page to just "echo 'test';", it displays the word "test" and then the [Object object].

Any ideas on how to get rid of this [Object object] piece?

Thanks!

Solution

  • Your ajax appears to be returning a json object. You will need to parse that object to format the result you want to display, or return HTML instead...

    Edit::

    on second thought, it seems more like an issue with how your are specifying the main content.

    Using the + at the end of your HTML for the main content, you are including the ajax call as content.

    I would specify the html element in your maincontent, but remove the ajax to a onAfterExpand call instead.

    http://highslide.com/ref/hs.Expander.prototype.onAfterExpand