In this Highcharts chart the objective is to offline export using a button external to the chart.
The problem that I have is that even thought I added the offline-exporting.js file to my application, if I'm not connected to the Internet when I click the Offline Export button I get an error saying it cannot access the URL export.highcharts.com.
How to fix this error and export offline?
HTML
<button id="exp" >Offline Export</button>
<div id="container" style="height: 400px; width: 500px"></div>
Javascript:
var settings =
{
"chart": {
"type":"line"
},
"xAxis": {
"endOnTick":true
},
"series":[
{"name":"series1","data":[[1,1200],[2,2200],[3,3200],[4,1800],[5,1500]]},
{"name":"series2","data":[[1,1050],[2,2050],[3,1650],[4,1450],[5,1350]]},
{"name":"series3","data":[[1,1250],[2,2250],[3,1850],[4,1650],[5,1550]]}]
}
var chart = $('#container').highcharts(settings);
$( "#exp" ).click(function() {
alert( "Handler for .click() called." );
var chart = $('#container').highcharts();
chart.exportChart({
type: 'image/png',
filename: 'theimage'
});
});
Try to using exportChartLocal()
$( "#exp" ).click(function() {
alert( "Handler for .click() called." );
var chart = $('#container').highcharts();
chart.exportChartLocal({
type: 'image/png',
filename: 'theimage'
});
});
Related
i have this dialog to show the file name when you click on the icon. When i first click it the dialog will be empty then i close it and reopen the dialog will show the name (via ajax). Then when i close the dialog again and click on a different file icon its showing the first file name. then when i close it again and reopen it, it will show the correct filename. Why is it doing this?
Here is my javascript
$('.edit').click(function(e){
e.preventDefault();
var auth = $(this).attr('id');
$.ajax({
type: 'POST',
url: 'ajax/edit_filename.php',
data: {auth:auth},
success: function(result){
filename = result;
}
});
$( "#dialog" ).dialog({
modal: true,
resizable: false,
title: 'Edit file name',
buttons: {
"Close": function() {
$(this).dialog("destroy");
$(this).dialog("cancel");
}
}
});
$('.ui-dialog-content').html('<input type="text" value="'+filename+'"/>');
});
i worked out what i did wrong, i was calling the dialog before i got the ajax response
here is the correct javascript incase this happens to you
$('.edit').click(function(e){
e.preventDefault();
var auth = $(this).attr('id');
$.ajax({
type: 'POST',
url: 'ajax/edit_filename.php',
data: {auth:auth},
cache: false,
success: function(result){
filename = result;
}
});
$.post( "ajax/edit_filename.php", { auth:auth })
.done(function( data ) {
$( "#dialog" ).dialog({
modal: true,
resizable: false,
title: 'Edit file name',
buttons: {
"Close": function() {
$(this).dialog("destroy");
$(this).dialog("cancel");
}
}
});
$('.ui-dialog-content').html('<input type="text" value="'+data+'"/>');
});
});
Im'trying here to bind vclick event on div in which is my gmap, so than on click (or touch) it changes page to my map page. But when i add to code
$map.vclick(function(){
$.mobile.changePage($('#map_directions'));
)};
gmap won't show and div is not clickable (i've tried with
$map.bind('vclick', function(e) {
$(event.target).trigger('touchstart');
$.mobile.changePage($('#map_directions'));
});
also
here's my code:
$(document).delegate('#info','pagecreate',function(){
var SelectedOptionClass = $('option:selected').attr('class');
$('div.ui-select').addClass(SelectedOptionClass);
$('#note_utilisateur').live('change', function(){
$('div.ui-select').removeClass(SelectedOptionClass);
SelectedOptionClass = $('option:selected').attr('class');
$('div.ui-select').addClass(SelectedOptionClass);
});
var $map = $("#info div:jqmData(role=place_map)");
$map.vclick(function(){
$.mobile.changePage($('#map_directions'));
)};
$map.gMap({
mapTypeControl: false,
zoomControl: false,
panControl: false,
scaleControl: false,
streetViewControl: false,
latitude:43.320204,
longitude:21.892635,
zoom: 15,
onComplete: function() {
$map.gMap('addMarker', {
latitude:43.320204,
longitude:21.892635,
title:'Gnezdo',
});
}
});
});
and html:
<div class="ui-block-b" id = "place_map" data-role ="place_map" style="width:150px";>
Loading map..
<div>
I think you should use the .on()-method like in the following example:
$( document ).on( "vclick", "#map", function() {
... do sth ...
});
This jquery ui dialog is filled with html and form values from an ajax call (works). I want to close or submit it and then reopen and reuse it just the same. I can close and reopen fine but it has the old values still there and then the new ones are added. It keeps adding the html values after each close and reopen. There are many questions about this on SO but I don't see a clear answer. I have tried close, empty, destroy but the combination isn't working the way I need it. Any ideas?
$("#StoreForm").dialog({
autoOpen:false,
width:500,
height:900,
modal:true,
buttons: {
OK: function() {
$('#StoreForm').dialog('close');
$(this).dialog('hide');
$(this).dialog('empty');
},
'Save': function() {
$(this).dialog('empty');
}
}
});
//additional code to click and open the dialog
$(".sel").unbind('click');
$(".sel").on("click", function(e){
e.preventDefault();
$("#StoreForm").dialog('open');
var valueSelected = $(this).closest('tr').children('td.item').text();
$.ajax({
url: 'query/categories.cfc',
dataType: 'json',
cache: false,
data: {method: 'getProductInfo',
queryFormat: 'column',
returnFormat: 'JSON',
productID: valueSelected
},
success: function(response, status, options){
$("#PROD_SUPER_ID").val(response.DATA.PROD_SUPER_ID[0]);
$("#color").val(response.DATA.COLOR_ATTRIB);
$("#SIZE_ATTRIB").val(response.DATA.SIZE_ATTRIB);
$("#price").val(response.DATA.PRICE);
var w = [];
w.push("<p>", response.DATA.ICON[0], "</p>", "<p>",
response.DATA.FULL_DESCRIPTION [0], "</p>")
$("#StoreForm").prepend(w.join(""));
What I found was you can close the dialog and empty the html and it will clear this type of dialog set-up. For reopening I nested the 2nd ajax call in the success response of the initial one..
//set up dialog with options
$("#StoreForm").dialog({
autoOpen: false,
width: 500,
height: 500,
modal: true,
buttons: {
Cancel: function(){
$('#StoreForm').dialog('close');
$('#StoreForm').html("");
},
//pop-up individual items
"Add to Cart": function(){
$.ajax({
url: $("#storeCart").attr('action'),
data: $("#storeCart").serializeArray(),
type: 'POST',
success: function(response){
var name = $( "#name" ),
email = $( "#email" ),
password = $( "#password" ),
allFields = $( [] ).add( name ).add( email ).add( password ),
tips = $( ".validateTips" );
if you have any questions please respond. Thanks
I've found here that to overwrite one of the autocomplete events. But can somebody please provide me with example how to do the same?
The appendTo option does indeed work as expected, and if you inspect at the DOM, the <ul> results element will be attached to the element. However, due to absolute positioning generated by jQueryUI, the list still appears directly under the <input>.
That said, you can override the internal _renderItem to directly append results to a completely different element, for example:
HTML
<input id="autocomplete"/>
<div class="test">Output goes here:<br/><ul></ul></div>
JavaScript
$('input').autocomplete({
search: function(event, ui) {
$('.test ul').empty();
},
source: ["something", "something-else"]
}).data('autocomplete')._renderItem = function(ul, item) {
return $('<li/>')
.data('item.autocomplete', item)
.append(item.value)
.appendTo($('.test ul'));
};
I have also created a demo to demonstrate this. Please note that the latest jQuery library has not had jQueryUI tested against it fully, so I am using the previous version which allows me to select to include jQueryUI directly with the jsFiddle options.
<div class="test">Output goes here:<br/></div>
<script>
$("input#autocomplete").autocomplete({
source: ["something", "something-else"],
appendTo: ".text",
position: { my: "left top", at: "left bottom", of: ".test" }
// other options here
});
</script>
I needed more control over where to put the data, so this is how I went about it:
$("#input").autocomplete({
minLength: 3,
source: [
"ActionScript",
"AppleScript",
"Asp"
],
response: function(event, ui) {
console.log(ui.content);
// put the content somewhere
},
open: function(event, ui) {
// close the widget
$(this).autocomplete('close');
}
});
hle's answer worked awesome for me and gives you more flexibility! Here is my test code that was modified by his answer:
$("#autocomplete").autocomplete({
minLength: 3,
source: ["something", "something-else"],
response: function(event, ui)
{
console.log(ui.content);
// put the content somewhere
},
open: function(event, ui)
{
// close the widget
$(this).autocomplete('close');
}
});
Although this question is pretty old but i got a pretty easy solution. No hack, nothing just in jQuery way:
Instead of autocomplete response function, just add response data in div on success
$(document).ready(function () {
$("#book-code-search").autocomplete({
minLength: 2,
delay: 500,
source: function (request, response) {
$.ajax( {
url: "server side path that returns json data",
data: { searchText: request.term, param2 : $("#type").val()},
type: "POST",
dataType: "json",
success: function( data ) {
$("#data-success").html(data.returnedData); //returnedData is json data return from server side response
/* response($.map(data, function (item) {
return {
label: item.FullDesc,
value: item.FullDesc
}
})) */
}
});
}
});
});
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id='data-success' style='color: green;'></div>
<input type='text' placeholder='Enter Book Code' id='book-code-search' />
<input type='hidden' id='type' value='book'>
I have the following piece of Mootools 1.11 code (not upgradable as this is within Joomla), which I want to highlight the form row, when an item within it is focussed. However, this doesn't work. I need to know how to access the parent div of the form item.
window.addEvent('domready', function() {
var list = $$('#ChronoContact_lensorder div.formrow');
list.each(function(element) {
var fx = new Fx.Styles(element, {duration:200, wait:false});
element.addEvent('focus', function(){
fx.start({
'background-color': '#e6f0f2',
color: '#FFF'
});
});
element.addEvent('focus', function(){
fx.start({
'background-color': '#FFF',
'color': '#2F9AD0'
});
});
});
});
HTML is:
<div class="formrow">
<label for="ud">Uncut Diameter:</label>
<input type="text" id="ud" name="ud" />
</div>
Thanks
Instead of looking for the <div>s, you might want to look for the actual <input> using var list = $$('#ChronoContact_lensorder div.formrow input'); Then refer to the parent using the .getParent() method when necessary, like this:
window.addEvent('domready', function() {
var list = $$('#ChronoContact_lensorder div.formrow input');
list.each(function(element) {
var fx = new Fx.Styles(element.getParent(), {duration:200, wait:false});
element.addEvent('focus', function(){
fx.start({
'background-color': '#e6f0f2',
color: '#FFF'
});
});
element.addEvent('blur', function(){
fx.start({
'background-color': '#FFF',
'color': '#2F9AD0'
});
});
});
});
Untested code. Note that the second event is now blur instead of focus, or else both events will fire at the same time and might revert each other's effects!