Using SkyScanner's white label API, I'm trying to add the following to a Wordpress webpage...
The code works fine when placed into the body of a simple webpage. Can anyone let me know how to get it to work in a WordPress page? I'm creating/editing the page via wp-admin. I'm using a standard template.
Thanks in advance.
<div id="wl-container"></div>
<script>
(function (s, k, y) {
var l = s.createElement("script");
l.src = k + "/js/client.js"; l.async = 1;
l.onload = function () { y({ serviceBase: k }); };
var t = s.getElementsByTagName("head")[0]; t.appendChild(l);
})(document, "//whitelabel.api.skyscanner.net", myCallback);
function myCallback(options) {
var whitelabel = new Skyscanner.Flights.Whitelabel({
serviceBase: options.serviceBase,
customerId: "testwl46"
});
whitelabel.create("wl-container", {
market: "UK",
locale: "en-GB",
currency: "GBP",
originPlace: "EDI",
destinationPlace: "LON",
outboundDate: "2014-03-10",
inboundDate: "2014-04-10"
});
}
</script>
thanks for using our Skyscanner White Label.
I see you finally managed, by the way using WordPress there is a couple of things you should follow in inserting Javascript code:
Use Text Editor option instead of Visual Editor
Have a look at this page http://codex.wordpress.org/Using_Javascript as there are some rules in using Javascript within WP
Hope this helps in case you still have problems
I finally manage to get this to work by being very careful with the indenting, spaces and line breaks when entering the javascript within the wordpress page editor
Thank you.
<div id="wl-container"></div>
<script>
(function (s, k, y) {
var l = s.createElement("script");
l.src = k + "/js/client.js"; l.async = 1;
l.onload = function () { y({ serviceBase: k }); };
var t = s.getElementsByTagName("head")[0]; t.appendChild(l);
})(document, "//whitelabel.api.skyscanner.net", myCallback);
function myCallback(options) {
var whitelabel = new Skyscanner.Flights.Whitelabel({
serviceBase: options.serviceBase,
customerId: "testwl46"
});
whitelabel.create("wl-container", {
market: "UK",
locale: "en-GB",
currency: "GBP",
originPlace: "EDI",
destinationPlace: "LON",
outboundDate: "2014-03-10",
inboundDate: "2014-04-10"
});
}
</script>
I had hard time with this and finally resolved it by installing this plugin from Amazon https://s3.amazonaws.com/videomaster/plugins/simple-js-paste.zip
You can put your javascript code in it, and in the text field put skyscanner div. I wish this help.
Related
I am working on WordPress plugin, which basically converts text files/MS Word Documents into WordPress Posts.
Flow is really simple, you just open dialog box and select files from PC and import.
Now I am trying to integrate Google Drive Picker so users can also create posts from there documents stored in their G-Drive.
I have done some pretty work by reading and understanding google drive picker documentation,
I found a really good working example of it too.
so I customized by callback function for picker which is:
function pickerCallback(data) {
if (data.action === google.picker.Action.PICKED) {
// document.getElementById('content').innerText = JSON.stringify(data, null, 2);
var docs = data[google.picker.Response.DOCUMENTS];
// var googleSelectedFiles = [];
var allFiles = [];
var singleFile = {};
docs.forEach(function (file) {
gapi.load('client', function () {
gapi.client.load('drive', 'v2', function () {
gapi.client.request({
'path': '/drive/v3/files/' + file.id + '/export?mimeType=text%2Fhtml&key=' + myAjax.google.apikey,
'method': 'GET',
callback: function (responsejs, responsetxt) {
singleFile.id = file.id;
singleFile.name = file.name + ".html";
singleFile.content = JSON.parse(responsetxt).gapiRequest.data.body;
allFiles.push(singleFile);
singleFile = {};
}
});
});
});
});
setTimeout(function () {
gDriveHandleFileProcess(allFiles);
}, 4000);
}
}
Now the problem is, I am getting all the document converted as HTML, from <html> to end </html> which includes head tag and style tags and of course there are images too.
I can set all the content into post_content of post while saving it into db, but it's really bad way, I know that.. so looked out for this problem, but nothing found helpful.
If it is possible in a good manners or there might be other solutions I can go through like exporting in other format then save it.. but I also tried simple text format which is not required as the formatting is must.
If anyone can guide me through or share any idea I can go through, that'll be really great.
Thanks in advance.
Hello I would like to disable the woocommmerce register page button after one click to avoid multiple clicks.
I have searched the forums and found a bunch of solutions for custom forms and I've tried the following JS code but had no luck. I have a feeling I am setting the wrong selector because I cannot for the life of me figure out what the correct selector for the default register button is.
<script>
function disableButton() {
var btn = document.getElementById('woocommerce-register-nonce');
btn.disabled = true;
btn.innerText = 'Posting...'
}
</script>
I've also tried :
<script>
jQuery('woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit').live('click', function (e) {
var self = this;
$(this).attr("disabled", "disabled");
do_something();
setTimeout(function () {
$(self).removeAttr('disabled');
}, 10000);
});
</script>
Some guidance would be very much appreciated.
Update!
Based on Onboardmass's suggestion I have corrected the selector and got it partially working using jquery.
<script>
jQuery('.woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit').click(function(){
jQuery(this).attr("disabled", "disabled");
});
</script>
The button now gets disabled on click however the issue I'm facing now is that the form does not get submitted.
The issue you're facing is because the selector is incorrect. It should be .woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit.
For anyone else who may need this I was able to figure this one out by reading through the suggestions and other threads I found. Thank you Onboardmass & Martin for the guidance!
The time out function is required for the click to register.
<script>
$(document).ready(function () {
$(".woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit").click(function () {
setTimeout(function () { disableButton(); }, 0);
});
function disableButton() {
$(".woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit").prop('disabled', true);
}
});
</script>
I'd like to ensure that when I initialise a new YT.player() that I can set it to make sure that it uses an embed from the www.youtube-nocookie.com domain. Is this currently possible? I haven't been able to find any reference to it in the docs yet.
I know, this is a late answer, but maybe relevant as it's still working:
You can use the host-parameter:
function onYouTubeIframeAPIReady() {
var player = new YT.Player('player', {
videoId: 'aqz-KE-bpKQ',
host: 'https://www.youtube-nocookie.com',
playerVars: {
origin: window.location.host
}
});
}
var s = document.createElement('script');
s.src = 'https://www.youtube.com/iframe_api';
document.head.appendChild(s);
<div id="player"></div>
Sadly, it does not work here on stackoverflow because of the same-origin-policy.
I have the same code running in an active project, though..
Ah. I managed to solve this just as I was about to post my question.
In my code I use something like:
<iframe id="myVideo" src="https://www.youtube-nocookie.com/embed/<VIDEO_ID>?enablejsapi=1"></iframe>
...then I can use the following to get the player that has already been embedded in the HTML via JS:
var player;
var onYouTubeIframeAPIReady = function() {
player = new YT.Player("myVideo");
};
Still, it would be nice if there was a way to initialise a www.youtube-nocookie.com video with JS too.
I am having issues with Concrete5's Build-In 'User' Property on the composer form for new pages. When clicking "Select User" the page navigates to http://website.com/ccm/system/dialogs/user/search. But that page is completely blank.
When you go into the attributes tab and click "Select User" under "Author" it also has the URL http://website.com/ccm/system/dialogs/user/search, but instead of reopening the page, it launches the user selector within the current page. This, I believe, is accomplished using the following JavaScript:
$(function() {
$("#ccm-user-selector-uID").dialog();
$("#ccm-user-selector-uID").on('click', function() {
var selector = $(this);
ConcreteEvent.unsubscribe('UserSearchDialogSelectUser.core');
ConcreteEvent.subscribe('UserSearchDialogSelectUser.core', function(e, data) {
var par = selector.parent().find('.ccm-summary-selected-item-label'),
pari = selector.parent().find('[name=uID]');
par.html(data.uName);
pari.val(data.uID);
e.stopPropagation();
jQuery.fn.dialog.closeTop();
});
ConcreteEvent.subscribe('UserSearchDialogAfterSelectUser', function(e) {
jQuery.fn.dialog.closeTop();
});
});
});
The 'User' option in the Composer has very similar JavaScript associated with it, replacing only the selectors.
$(function() {
$("#ccm-user-selector-ptComposer[13][user]").dialog();
$("#ccm-user-selector-ptComposer[13][user]").on('click', function() {
var selector = $(this);
ConcreteEvent.unsubscribe('UserSearchDialogSelectUser.core');
ConcreteEvent.subscribe('UserSearchDialogSelectUser.core', function(e, data) {
var par = selector.parent().find('.ccm-summary-selected-item-label'),
pari = selector.parent().find('[name=ptComposer[13][user]]');
par.html(data.uName);
pari.val(data.uID);
e.stopPropagation();
jQuery.fn.dialog.closeTop();
});
ConcreteEvent.subscribe('UserSearchDialogAfterSelectUser', function(e) {
jQuery.fn.dialog.closeTop();
});
});
});
I can't find anything that is keeping the functionality form working as expected on the Composer section, like it does on the Attributes section when creating a new page.
Has anyone else run into this or have any ideas on what might be the problem?
Turns out the issue was related to the two following lines:
$("#ccm-user-selector-ptComposer[13][user]").dialog();
$("#ccm-user-selector-ptComposer[13][user]").on('click', function() {
They aren't valid ID's and thus jQuery couldn't find them. A hacky solution to solve the issue was to replace lines 38 and 39 in concrete/src/Form/Service/Widget/UserSelector.php with
$("[id='ccm-user-selector-{$fieldName}']).dialog();
$("[id='ccm-user-selector-{$fieldName}']).on('click', function() {
Which allows for it to search out any elements that have an ID that matches that string.
When I try to use this.findAll on a template where the selector is in a sub-template, findAll returns nothing.
Here's the HTML:
<template name="products">
{{#each productList}}
{{> product }}
{{/each}}
</template>
<template name="product">
<div class="box">{{name}}</div>
</template>
Here's the JS:
Template.products.helpers({
productList: function() {
var all = Products.find({}).fetch();
return all;
}
});
Template.products.rendered = function(){
var boxes = this.findAll('.box');
console.log(boxes.length);
}
Output of boxes.length is 0. Any ideas how I could get the "box" elements?
According to the docs for findAll:
Only elements inside the template and its sub-templates can match parts of the selector.
So it should work for sub-templates. I tried this with a fixed array of products and it worked, which implies that you are just seeing a delay between the call to rendered and the products being fetched. For example if you do:
Template.products.events({
'click .box': function (e, t) {
var boxes = t.findAll('.box');
console.log(boxes.length);
}
});
Then if you click on one of the boxes, you should see the correct number logged to the console. In short, I think the test may just be invalid. If you are using iron-router, you could try adding a waitOn for the products - that may ensure they arrive before the rendered call.
Here's what I did to run a script after all products have been loaded.
I've added last_product property in all the products.
Template.products.helpers({
productList: function() {
var all = Products.find({}).fetch();
var total = all.length;
var ctr = 0;
all.forEach(function(doc){
doc.last_product = false;
ctr++;
if(ctr == total)
{
doc.last_product = true;
}
return doc;
});
return all;
}
});
Then instead of "Template.products", I used "Template.product" to detect if the last product is rendered. When the last product is rendered, run the script.
Template.product.rendered = function(){
if(this.data.last_product){
var boxes = $('.pbox');
console.log(boxes.length);
}
}
boxes.length now has the correct length.
Thanks to David for the idea!
Here's the correct answer. I've added this to my iron-router route:
action : function () {
if (this.ready()) {
this.render();
}
}
Found the answer from https://stackoverflow.com/a/23576039/130237 while I was trying to solve a different problem.