Using Ajax for maincontentText in Highslide (in Highcharts) - highcharts

Question

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!

Answer 1

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

Answer 2

Interestingly, I couldn't use this solution until I saw your other question because the usage of onAfterExpand is unclear and unusual for me.
So I found another working combination of Ajax, Highcharts and Highslide :)
Something like this inside plotOptions.spline.point.events:
click: function (e) {
var curobj = this;
$.ajax({
url: "/path/to/test.html",
dataType: "html",
success: function(data){
hs.htmlExpand(null, {
pageOrigin: {
x: e.pageX || e.clientX,
y: e.pageY || e.clientY
},
headingText: curobj.series.name,
maincontentText: data,
width: 300
});
}
});
}