When one of my chart's point is clicked, I use highslide to open a window as a "pop up" containing a table with data specific to that point. Everything work here.
Now inside my highslide window, I have a onclick event on an icon to show/hide export options. My problem is that the onclick event only fires for the first point I click on, if I close the pop up window and click on another point, my window is loaded but the onclick event doesn't fire at all.
Here is what I have on my onclick event that only fires the first time: onclick=$('#formatsLI').toggle('slow');
I have tried the following things:
- I have replaced the content of my onclick event with show/hide functions instead of toggle, same problem.
- When I replace it with alert('Hello'), the event fires well everytime.
- I load the same table in other pages without using highslide and it works perfectly.
- I had the same problem loading the page with the jQuery "dialog" object and the solution was to append the dialog object to the calling page.
So I am wondering if it is possible to also append the highslide window to the calling page and if yes how ??
Here is how I load the highslide window :
Code: Select all
$.ajax({
type: "POST",
url:urlAjx,
data: data,
async: true,
success: function(reponse){
hs.htmlExpand(null, {
pageOrigin: {
x: e.pageX || e.clientX,
y: e.pageY || e.clientY
},
maincontentText: reponse,
resizable: true,
align: 'center',
modal: true,
preserveContent: true,
contentId: 'highslide-html-content',
objectType: 'ajax'
});
},
error:function(reponse){
console.log('error');
console.log(reponse);
}
});
Code: Select all
<span class='glyphicon glyphicon-export' id='exporter' title='Exporter' onclick=$('#formatsLI').toggle('slow')>
<ul id="formatsLI" style="display:none">
<a onClick ="$('#sortableTable').tableExport({type:'excel',escape:'false'});">
<img src="scripts/export/icons/xls.png" width="24px" title="Excel"></img>XLS</a>
<a onClick ="$('#sortableTable').tableExport({type:'xml',escape:'true'});">
<img src="scripts/export/icons/xml.png" width="24px" title="XML"></img>XML</a>
<a onClick ="$('#sortableTable').tableExport({type:'csv',escape:'false'});">
<img src="scripts/export/icons/csv.png" width="24px" title="CSV"></img>CSV</a>
<a onClick ="$('#sortableTable').tableExport({type:'sql'});">
<img src="scripts/export/icons/sql.png" width="24px" title="SQL"></img>SQL</a>
</ul>
</span>
Thank you for your time.