I am using below function to display a map using kendo ui in telerik appbuilder.
As you see, I have assigned static latitude & longitude to this.
Please suggest some way to fetch lat long using kendo ui.
I want to pass the latitude and longitude values to createMap(x,y) function.
function createMap(x,y) {
console.log("createmap");
// console.log("x=" + x + " " + "y=" + y);
var ds = [
{ "shape": "green", "location": [30.667936 ,76.732688] },
];
// 30.710458600000000000 30.657762
// 76.703347099999970000 76.740835
$("#map, #addAddFav").kendoMap({
center: [30.667936, 76.732688],
zoom: 10,
layers: [{
type: "tile",
urlTemplate: "http://#= subdomain #.tile2.opencyclemap.org/transport/#= zoom #/#= x #/#= y #.png",
subdomains: ["a", "b", "c"],
attribution: "© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>." +
"Tiles courtesy of <a href='http://www.opencyclemap.org/'>Andy Allan</a>"
},
{
type: "marker",
/* dataSource: {
transport: {
read: {
url: "map/store-locations.json",
dataType: "json"
}
}
},*/
// locationField: "latlng",
// titleField: "name"
}
],
markers: ds,
click: onMapMarkerClick,
shapeClick: onShapeClick,
shapeCreated: onShapeCreated
});
}
From the Apache Cordova docs:
navigator.geolocation.getCurrentPosition(onSuccess, onError);
// onSuccess Callback
// This method accepts a Position object, which contains the
// current GPS coordinates
//
var onSuccess = function(position) {
alert('Latitude: ' + position.coords.latitude + '\n' +
'Longitude: ' + position.coords.longitude + '\n' +
'Altitude: ' + position.coords.altitude + '\n' +
'Accuracy: ' + position.coords.accuracy + '\n' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '\n' +
'Heading: ' + position.coords.heading + '\n' +
'Speed: ' + position.coords.speed + '\n' +
'Timestamp: ' + position.timestamp + '\n');
};
// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
Related
I am new to FullCalendar and would like to know how to filter events. For example. by a date or location of a patient?
And how can I rerender the whole calendar?
The method calendar.render(); rendered/rerendered only just what is necessary as far as I have read in the doc?
Thanks for any help
Edit:
I generate the script in Java with a StringBuilder and fetch the events from the DB with a method.
StringBuilder sb = new StringBuilder();
sb.append("document.addEventListener('DOMContentLoaded', function() {"
+ "var calendarEl = document.getElementById('calendar');"
+ "var calendar = new FullCalendar.Calendar(calendarEl, { ");
sb.append("expandRows: true, ");
sb.append("nowIndicator: true, ");
sb.append("slotMinTime: '06:00', ");
sb.append("slotMaxTime: '21:00', ");
sb.append("customButtons: { "
+ "myCustomButton: { "
+ "text: 'New Request', "
+ "click: function() { "
+ "var url = document.getElementById('createRequestUrlId').value;"
+ "window.open(url,\"_self\");"
+ "}"
+ "}"
+ "},");
sb.append("headerToolbar: { "
+ "left: 'prev,next today myCustomButton', "
+ "center: 'title', "
+ "right: 'timeGridDay,timeGridWeek,dayGridMonth,listMonth'"
+ "}, ");
sb.append("initialDate: \'" + dateFormat(new NSTimestamp()) + "\', ");
sb.append("navLinks: true, ");
// sb.append("businessHours: true, ");
// sb.append("editable: true, ");
sb.append("selectable: true, ");
sb.append("dayMaxEvents: true, ");
sb.append("eventClick: function(arg) {"
+ "var eId = arg.event.id; "
+ "document.getElementById('dialogFieldEventId').value = eId;"
+ "document.getElementById('submitButton').click();"
+ "document.getElementById('eventOpenerId').click();"
+ "}, ");
sb.append("events: [ ");
sb.append(eventList());
sb.append("]"
+ "});");
sb.append("calendar.render();");
sb.append("});");
This method is called once when the page/calendar is loaded and then not again unless I reload the page.
However, I only want to reload the calendar with, for example, the filtered events, which are filtered in a Java method.
But I don't know how to call the script again with my java method. If the method of Fullcalendar 'calendar.render()' is called again only the finished script from the beginning is called.
Which for example looks like this
...
events: [{
id: '4321',
title: 'Name',
color: '#6495ED',
start: '2021-04-11T15:00:00',
end: '2021-04-11T15:30:00'
}, {
id: '1234',
title: 'Name',
color: '#FF7F50',
start: '2021-04-12T15:00:00',
end: '2021-04-12T15:45:00'
}, {
id: '3124',
title: 'Name',
color: '#CB3312',
start: '2021-04-13T15:00:00',
end: '2021-04-13T20:00:00'
...
Update of the weight of a configured product with transfer of the variables via (Admin)Ajax for the shopping cart ...
The problem is that the weight has to be calculated via jQuery first, then sent via AJAX so that the total weight in the shopping cart is updated. I have tried and asked a lot, nobody has a solution, that the passing to the PHP variable in question somehow doesn't work or I didn't succeed (I'm not so firm in PHP), maybe there is not much missing, here is my last code:
in funktions.php:
wp_enqueue_script( 'ajax-script', get_stylesheet_directory_uri().'/js/weight_hardox.js', array('jquery') );
// in JavaScript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value
wp_localize_script( 'ajax-script', 'ajax_object',
array( 'ajax_url' => admin_url( 'admin-ajax.php' ),'gewt' => 0, 'gewt_ges' => 0, ) );
// Same handler function...
add_action( 'wp_ajax_my_action', 'my_action' );
add_action( 'wp_ajax_nopriv_my_action', 'my_action' );
function my_action() {
global $wpdb;
$gewicht = floatval( $_POST['gewicht'] );
$gesamtgewicht = floatval( $_POST['gesamtgewicht'] );
echo 'gewicht:' . $gewicht;
echo '<small>Gewicht update: ' . $gewicht.'+'. $gesamtgewicht. ' ' . get_option('woocommerce_weight_unit') . '</small>';
wp_die();
}
the weight_hardox.js:
jQuery(document).ready(function($) {
var myurl = document.URL; //console.log('myurl '+myurl );
var gew_h=0;
var vGwges=0;
var sum=0;
var gewt1=0;
var gewt=0;
var gew_hs=0;
if ( (myurl.indexOf("warenkorb") != -1) || (myurl.indexOf("kasse") != -1) || (myurl.indexOf("hardox-500-zuschnitt") != -1) ) {
//.single-product calc weight
//if (myurl.indexOf("hardox-500-zuschnitt") != -1) {
jQuery(document).on('change', '.single-product .summary .cart input', function() {
var vmats=parseFloat(jQuery( '.uni-module-radio input:checked+.uni-cpo-radio-option-label .uni-cpo-option-label__text' ).text()); console.log('ok fs ' + vmats);
var vLgs=parseFloat(jQuery( '#uni_cpo_laenge2-field' ).val()); //console.log('ok fs ' + vLgs);
var vBts=parseFloat(jQuery( '#uni_cpo_breite_hardox_rq2-field' ).val()); //console.log('ok fs ' + vBts);
var vSts=parseFloat(jQuery( '#uni_cpo_stckzahl-field' ).val()); //console.log('ok fs ' + vSts);
gewt = parseFloat(vmats*vLgs*vBts*vSts*0.000008); //
gewt = parseFloat((gewt).toFixed(3)); console.log('gew_hs ' + gewt);
var vGws = jQuery( '#gewb' ).text();
vGws = jQuery( '#gewb' ).text(gewt);
window.setTimeout(function(){
vGws = jQuery( '#gewb' ).text(); console.log('vGws>ingle ' + vGws);
},990);
var data = {
'action': 'my_action',
'gewicht' : ajax_object.gewt,
'gesamtgewicht' : ajax_object.gewt_ges
//'whatever': ajax_object.we_value //We pass php values differently!
};
// We can also pass the url value separately from ajaxurl for front end AJAX implementations
/**/ jQuery.post(ajax_object.ajax_url, data, function(response) {
response+=gewt;
console.log('Got this from the server: weight: ' +gewt +'/ update total weight: ' + gewt_ges +' / response: ' +response);
$( ".total-weight").after('<tr id="gew_z"></tr>');
$( "#gew_z" ).html('<th>Gewicht-HardoxV1</th><td><span class="kg">'+ gewt+'kg</span></td>');
$( ".total-weight td").text(gewt_ges + " kg");
//alert('Got this from the server: ' + response);
});
});
/* var jqxhr = $.post('https://arthouse39.de/wdl/wp-content/themes/childtheme_z/test.php',{gew_hs: gew_hs}, function() {
//alert( "success" );
})
.done(function( data ) {
console.log( "Data Loaded: " + data );
//$( "#gew_z" ).html('<span class="Sendungsdaten_txt">Sendungsdaten:</span>'+ data ).show(399).delay( 3700 ).fadeOut( 700 );
})
return false;
e.preventDefault();*/
//}
window.setTimeout(function(){
jQuery(".cart_item" ).each( function( index, element ){
var array = ( jQuery( this ).html() ); //console.log('array ' + array);
if ( (array.indexOf("Hardox-500") != -1) || (array.indexOf("Hardox") != -1) ) {
var vmat=jQuery(this).find( '.variation-Materialstrkemm > p' ).text(); //console.log('ok f ' + vmat);
var vLg=jQuery(this).find( '.variation-Lngemm > p' ).text(); //console.log('ok f ' + vLg);
var vBt=jQuery(this).find( '.variation-Breitemm > p' ).text(); //console.log('ok f ' + vBt);
var vSt=jQuery(this).find( '.variation-Stck > p' ).text(); //console.log('ok f ' + vSt);
gew_h = vmat*vLg*vBt*vSt*0.000008; //console.log('gew_h ' + gew_h);
gew_h = parseFloat((gew_h).toFixed(2));
var vGw=jQuery(this).find( '.variation-Gewichtkg > p, #uni_cpo_gew_h5-field, #gewb' ).text(); //console.log('ok fgew ' + vGw);
vGW = jQuery(this).find( '.variation-Gewichtkg > p, #gewb' ).text(gew_h);
}
});
},700);
//gesamtgewicht berechnen - total weight (all products):
window.setTimeout(function(){
gewt1=parseFloat(jQuery(".total-weight td").html()); //
console.log('gewt 1: '+gewt1);
var myArray=0;
/* jQuery(".gewl" ).each( function( index, element ){
myArray =jQuery(this).find( '#gewb' ).text().replace(",", "."); */
jQuery("#gewb" ).each( function( index, element ){
myArray =jQuery(this).text().replace(",", ".");
myarray=parseFloat(myArray);console.log('myArray ' +myArray);
//gewt = gewt*1 + myArray*1;
gewt+= myArray*1;
gewt_ges=gewt1+gewt;
gewt_ges=parseFloat((gewt_ges).toFixed(2));
gewt=parseFloat((gewt).toFixed(2)); //
console.log('gewt wh...= ' + gewt);
});
/* var data = {
'action': 'my_ajax_request',
'post_type': 'POST',
'name': 'My First AJAX Request'
};
jQuery.post("", data, function(response) {
}, 'json'); */
var data = {
'action': 'my_action',
'gewicht' : ajax_object.gewt,
'gesamtgewicht' : ajax_object.gewt_ges
//'whatever': ajax_object.we_value //We pass php values differently!
};
// We can also pass the url value separately from ajaxurl for front end AJAX implementations
/**/ jQuery.post(ajax_object.ajax_url, data, function(response) {
response+=gewt;
console.log('Got this from the server: weight: ' +gewt +'/ update total weight: ' + gewt_ges +' / response: ' +response);
$( ".total-weight").after('<tr id="gew_z"></tr>');
$( "#gew_z" ).html('<th>Gewicht-HardoxV1</th><td><span class="kg">'+ gewt+'kg</span></td>');
$( ".total-weight td").text(gewt_ges + " kg");
//alert('Got this from the server: ' + response);
});
/* var jqxhr = $.post('https://arthouse39.de/wdl/wp-content/themes/childtheme_z/test.php',{gew_hs: gewt},
//var jqxhr = $.post('https://arthouse39.de/wdl/wp-content/themes/childtheme_z/functions.php',{gew_hs: gewt},
function() { //alert( "success" );//alert( gew_h );
} )
.done(function( data ) {console.log( "Data Loaded: " + data );
$( "#gew_z" ).html('<span class="Sendungsdaten_txt">Gesamtgewicht incl. Hardox.: </span>'+ data + ' kg').show(399).delay( 3700 );
//$('.total-weight').html('<th>Gewicht</th><td data-title="Total Weight"><span class="kg">'+ data+'kg</span></td>');
}); */
//
},1390);
}
} );
example from cart width the configured product (https://arthouse39.de/wdl/produkt/hardox-500-zuschnitt-generator-r-q-1/) in the console:
"...
Got this from the server: weight: 177.41/ update total weight: 179.01 / response: gewicht:0Gewicht update: 0+0 kg177.41"
How do I get the value into the total weight so that the right shipping method can be chosen? (The transfer into the total-weight already works ... -but apparently only as a display?
Would be great if someone can help, if it costs something, please make an offer, thank you very much!
This is my service in angular 8. For Generating the Header for HTTP Method. It gives me the Error for Signature not getting matched with the signature that I have generated.
With
accessKeyId: "AKIA*******UTIZO5UUP",
secretAccessKey: "n5bndDO***************xb3IA0GvmAVTOaDLNDG"
execute(credentials, request) {
let url = new URL(request.url);
let date = new Date();
credentials.host = url.host;
request.route = url.pathname;
let canonical = this.canonicalRequest(credentials, request, date);
console.log("canonical: ", canonical);
let toSign = this.requestToSign(canonical, credentials, date);
console.log("toSign: ", toSign);
let signature = this.signature(toSign, credentials, date);
console.log("signature: ", signature);
return {
"x-amz-date": this.amzLongDate(date),
Authorization:
"AWS4-HMAC-SHA256 Credential=" +
credentials.accessKeyId +
"/" +
this.amzShortDate(date) +
"/" +
credentials.region +
"/execute-api/aws4_request, " +
("SignedHeaders=content-type;host;x-amz-date" +
(credentials.token ? "x-amz-security-token" : "") +
", Signature=" +
signature),
"Content-Type": "application/json",
"x-amz-security-token": credentials.token || undefined
// host: this.credentials.host,
};
}
canonicalRequest(credentials, request, date) {
return (
"\n" +
this.request.method.toUpperCase() +
"\n" +
(request.route.charAt(0) !== "/" ? "/" + request.route : request.route) + //
"\n" +
this.queryParameters(request.query) +
"\ncontent-type:application/json\nhost:" +
credentials.host +
"\n" +
("x-amz-date:" +
this.amzLongDate(date) +
"\n" +
(credentials.token
? "x-amz-security-token:" + credentials.token + "\n"
: "") +
"\n") +
("content-type;host;x-amz-date" +
(credentials.token ? ";x-amz-security-token" : "") +
"\n") +
this.hashString(this.request.body)
);
}
requestToSign(cRequest, credentials, date) {
return (
"\n" +
"AWS4-HMAC-SHA256\n" +
this.amzLongDate(date) +
"\n" +
this.amzShortDate(date) +
"/" +
credentials.region +
"/execute-api/aws4_request\n" +
this.hashString(cRequest)
);
}
signature(toSign, credentials, date) {
return this.hmac(
this.hmac(
this.hmac(
this.hmac(
this.hmac(
"AWS4" + credentials.secretAccessKey,
this.amzShortDate(date)
),
credentials.region
),
"execute-api"
),
"aws4_request"
),
toSign
).toString();
}
queryParameters(queryParameterObj) {
var pieces = [];
if (queryParameterObj) {
Object.keys(queryParameterObj)
.sort()
.forEach(function(k) {
return pieces.push(
k + "=" + encodeURIComponent(queryParameterObj[k])
);
});
}
return pieces.length > 0 ? pieces.join("&") : "";
}
hashString(str) {
return CryptoJS.SHA256(str).toString();
}
hmac(key, value) {
return CryptoJS.HmacSHA256(value, key);
}
amzShortDate(date) {
return this.amzLongDate(date).substr(0, 8);
}
amzLongDate(date) {
return date
.toISOString()
.replace(/[:\-]|\.\d{3}/g, "")
.substr(0, 17);
}
Then This is my Object For the Method to generate them by which I would Call execute method
credentials = {
region: "us-east-1",
accessKeyId: "AKIA*******UTIZO5UUP",
secretAccessKey: "n5bndDO***************xb3IA0GvmAVTOaDLNDG",
host: "",
token: null
};
request = {
url:
"https://jml******xa.execute-api.us-east-1.amazonaws.com/name-of-app/review/v1",
type: "GET",
method: "GET",
dataType: "json",
contentType: "application/json",
data: { foo: "bar" },
route: "",
query: null,
body: null
};
The isuues is I am able to get the correct canonicalRequest and requestToSign but the signature is not getting matched as it says....
{
"message": "The request signature we calculated does not match the signature you provided. Check your AWS Secret Access Key and signing method. Consult the service documentation for details.\n\nThe Canonical String for this request should have been\n'GET\n/name-of-app/review/v1\n\ncontent-type:application/json\nhost:jq******xa.execute-api.us-east-1.amazonaws.com\nx-amz-date:20200227T162638Z\n\ncontent-type;host;x-amz-date\ne3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855'\n\nThe String-to-Sign should have been\n'AWS4-HMAC-SHA256\n20200227T162638Z\n20200227/us-east-1/execute-api/aws4_request\n9f4671025ee537c0253df73dc1c673d30e22966b3ac544f03df14e3b85f76238'\n"
}
Reading the docs it mentions "also containing the file list" in the paste options for the target element
http://docs.fineuploader.com/integrating/options/fineuploaderbasic.html
What is this? Is there a good example how to implement this? This is what I have so far. #pasteimage is a text box.
Using Chrome 10.6 Do I need to turn it on somewhere in jquery.fineuploader-3.4.1.js
$(document).ready(function(){
var thumbnailuploader = new qq.FineUploader({
element: $('#thumbnail-fine-uploader')[0],
request: {
endpoint: '/Admin/CFC/image-uploader.cfc?method=Upload',
params: {
profileID: '<cfoutput>#profile.ID#</cfoutput>',
profileType:'<cfoutput>#profile.Profile_Type#</cfoutput>',
subDName:'<cfoutput>#DecodeforHTML(profile.Subdomain_Name)#</cfoutput>'
},
},
multiple: true,
validation: {
allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
sizeLimit: 102400, // 100 kB = 100 * 1024 bytes
itemLimit: 1,
stopOnFirstInvalidFile: false
},
text: {
uploadButton: "\+ Click or Drop"
},
paste:{
targetElement:$('#pasteimage')
},
callbacks: {
onComplete: function(id, fileName, responseJSON){
if (responseJSON.success) {
$('#thumbnail-fine-uploader').append('<img src="/<cfoutput>#profile.Profile_Type#</cfoutput>/<cfoutput>#profile.ID#</cfoutput>/' + responseJSON.filename + '" alt="' + fileName + '" style="width:120px;height:120px;">');
$('#thumbnail-fine-uploader').append('<br/><b style="color:red;">' + responseJSON.returnedProfileID + '<br/>'+ responseJSON.returnedprofileType+'<br/>'+responseJSON.returnedsubDName+'</b>');
}
}
},
onUpload: function(id, fileName){
$('#file-' + id).addClass('alert-info').html('<img src="/Images/loading.gif" alt="Initializing. Please hold."> ' +
'Initializing ' +
'“' +
fileName +
'”');
},
onProgress: function(id, fileName, loaded, total){
if (loaded < total) {
progress = Math.round(loaded / total * 100) + '% of ' + Math.round(total / 1024) + ' kB';
$('#file-' + id).removeClass('alert-info').html('<img src="/Images/loading.gif" alt="In progress. Please hold."> ' +
'Uploading ' +
'“' +
fileName +
'” ' +
progress);
}
else {
$('#file-' + id).addClass('alert-info').html('<img src="/Images/loading.gif" alt="Saving. Please hold."> ' +
'Saving ' +
'“' +
fileName +
'”');
}
},
})
});
The paste target element can be any container that will receive the pasted image(s). This is where your users will paste any image on their clipboard. There isn't much to demonstrate. Simply create an element in the DOM, preferably one that your users can understand is the location where images can be pasted. Then, set this element as the value of the paste option's targetElement property. You can even use the document as a target, if you want.
I researched about this a lot, but couldn't find the magic.
Actually I want to populate a list of city pin code no. using JQuery autocomplete UI. It's a https page. It's working in Firefox but not in Google Chrome. Can anyone help me to resolve this issue. Thanks in Advance.
In the following is my code:
function zipAutoCompletet(prefix) {
jQuery("#" + prefix + "_zip").autocomplete({
source: function(request, response) {
jQuery.ajax({
url: "http://ws.geonames.org/postalCodeSearchJSON",
dataType: "jsonp",
data: {
style: "full",
maxRows: 12,
postalcode_startsWith: request.term
},
success: function(data) {
response(
jQuery.map(data.postalCodes, function(item) {
return {
label:
item.placeName +
(item.adminCode1
? ", " + item.adminCode1
: "") +
", " +
item.postalCode +
", " +
item.countryCode,
value: item.postalCode
};
})
);
jQuery(".ui-autocomplete").css("width", "188px");
}
});
},
minLength: 2,
select: function(event, ui) {
var myString = new String(ui.item.label);
var address = myString.split(",");
jQuery("#" + prefix + "_city").val(address[0]);
jQuery("#" + prefix + "_city").addClass("activated");
jQuery("#" + prefix + "_city").trigger("change");
jQuery("#" + prefix + "_city")
.parents(".row")
.removeClass("error-row");
jQuery("#" + prefix + "_city")
.parents(".row")
.addClass("ok-row");
var countryCode = address[3] ? address[3] : address[2];
countryCode = jQuery.trim(countryCode);
var countryName = jQuery(
"#" +
prefix +
'_country option[value="' +
jQuery.trim(countryCode) +
'"]'
).text();
jQuery("#countryContainer .jqTransformSelectWrapper span").html(
countryName
);
jQuery("#countryContainer .jqTransformSelectWrapper").addClass(
"selected-jqtranform"
);
jQuery("#" + prefix + "_country")
.parents(".row")
.addClass("ok-row");
jQuery("#" + prefix + "_country")
.parents(".row")
.removeClass("error-row");
jQuery("#" + prefix + "_country").val(jQuery.trim(countryCode));
var stateCode = address[2] ? address[1] : "";
stateCode = jQuery.trim(stateCode);
if (countryCode == "US") {
var base = base_url;
base = base.replace("https", "http");
jQuery.ajax({
url: base + "/getStateName",
dataType: "jsonp",
data: { stateCode: stateCode },
success: function(data) {
stateName = data;
jQuery("#jc_state").val(stateName);
jQuery("#jc_state").addClass("activated");
jQuery("#jc_state")
.parents(".row")
.removeClass("error-row");
jQuery("#jc_state")
.parents(".row")
.addClass("ok-row");
jQuery("#jc_state").trigger("change");
formValidate();
}
});
} else {
stateName = stateCode;
jQuery("#jc_state").val(stateName);
jQuery("#jc_state").addClass("activated");
jQuery("#jc_state")
.parents(".row")
.removeClass("error-row");
jQuery("#jc_state")
.parents(".row")
.addClass("ok-row");
jQuery("#jc_state").trigger("change");
formValidate();
}
jQuery("#" + prefix + "_zip")
.parents(".row")
.addClass("ok-row");
jQuery("#" + prefix + "_zip")
.parents(".row")
.removeClass("error-row");
},
open: function() {
jQuery(this)
.removeClass("ui-corner-all")
.addClass("ui-corner-top");
},
close: function() {
jQuery(this)
.removeClass("ui-corner-top")
.addClass("ui-corner-all");
},
change: function(event, ui) {
if (ui.item === null) {
jQuery("#" + prefix + "_zip")
.parents(".row")
.removeClass("ok-row");
jQuery("#" + prefix + "_zip")
.parents(".row")
.addClass("error-row");
$("#" + prefix + "_zip").val("");
}
}
});
}
If you are on https page, browser will block requests to non-secure resources (http).
Regularly you should see some notification about that. Looks like other browsers does not block non secure AJAX requests on secured pages by default, but google chrome does.
In your code, you have hardcoded URL:
url: "http://ws.geonames.org/postalCodeSearchJSON",
If that is cross domain request and it supports HTTPS, you can change it like this:
url: "//ws.geonames.org/postalCodeSearchJSON",
As you can see, protocol is not specified there. Browser will take page default protocol (http or https) and use it to request data.