Gina
Posts: 1
Joined: Fri Jun 10, 2016 9:03 am

Onclick event inside the highslide window

Hello everyone,

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);	
			}
});
And here is the onclick event inside the loaded page :

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.

Return to “Highslide JS Usage”