In CKEditor 4.5 beta, filetools plugin fails to set cookies while using cross domain upload url, for CORS to enable cookies we require to set XHR.withCredentials = true while upload XHR getting initiated.
How can i set XHR properties in filetools plugin in CKEditor 4.5.
You can get access to XHR object by listening to fileUploadRequest event and then you can set withCredentials flag to true.
editor.on( 'fileUploadRequest', function( evt ) {
var xhr = evt.data.fileLoader.xhr;
xhr.withCredentials = true;
} );
Working development sample is available here.
To the Extension of Adelura's answer.
editor.on( 'fileUploadRequest', function( event ) {
var fileLoader = event.data.fileLoader;
fileLoader.xhr.withCredentials = true;
}, null, null, 100);
add weightage to your event so that it trigger before XHR send and after XHR open. In filetools plugin it has couple of similar events which has weightage of 5 and 999 respectively.
editor.on( 'fileUploadRequest', function( evt ) {
var fileLoader = evt.data.fileLoader;
fileLoader.xhr.open( 'POST', fileLoader.uploadUrl, true );
}, null, null, 5 );
editor.on( 'fileUploadRequest', function( evt ) {
var fileLoader = evt.data.fileLoader,
formData = new FormData();
formData.append( 'upload', fileLoader.file, fileLoader.fileName );
fileLoader.xhr.send( formData );
}, null, null, 999 );
so you make sure your event triggers between weightage 5 and 999
Related
I want to open a web-socket to a ColdFusion 2016 server, but I want to open it from HTML page (not cfm) so I don't have the option to use cfwebsocket tag.
what I want is a replacement for it..
I have tried the following code
var webSocket_IP = '192.168.1.223';
var chatSocket = new WebSocket("ws://"+webSocket_IP+":8579/cfusion/cfusion");
chatSocket.onopen = function () {
alert('OPEN');
};
chatSocket.onmessage = function () {
alert('a message was recieved');
};
chatSocket.onError = function () {
alert('Error');
};
the problem is that I cant open the connection and the onOpen method does not run
another problem is that when I want to subscribe to any channel
chatSocket.subscribeTo('chat');
I keep getting the following error
TypeError: chatSocket.subscribeTo is not a function
For clarification on Hamzeh's Answer.
How to establish a connection
var chatSocket = new WebSocket("ws://"+webSocket_IP+":8579/cfusion/cfusion");
How to subscribe to a channel
chatSocket.send(
JSON.stringify( {
appName: "customoptionexample1", //App Name
authKey: "739CAAF6CA8CA73DCCDB9305225F7D48",
ns: "coldfusion.websocket.channels",
subscribeTo: "bidchannel", //Channel subscribing to
type: "welcome"
} )
);
How to Send Data
chatSocket.send(
JSON.stringify( {
"ns": "coldfusion.websocket.channels",
"type": "publish",
"channel": "bidchannel", // Channel Name
"appName": "customoptionexample1", //App Name
"data": "Bid placed by adfadfadf Amount 66",
"customOptions": {
"value": "66"
}
} )
);
Setting up normal web socket callbacks
chatSocket.onopen = function() {
console.log( 'opened' );
};
chatSocket.onclose = function() {
console.log( 'onclose' );
};
chatSocket.onerror = function() {
console.log( 'onerror' );
};
chatSocket.onmessage = function( event ) {
//This parses the data and just prints the data and not the meta data.
console.log( 'onmessage', JSON.parse(event.data).data );
};
in case someone stumbled with the same issue , I have found the solution
first connect to coldfusion web socket path
var chatSocket = new WebSocket("ws://"+webSocket_IP+":8579/cfusion/cfusion");
then write the following command on the web socket object to subscribe to any channel
{"ns":"coldfusion.websocket.channels","type":"welcome","subscribeTo":"CHANNELNAME","appName":"APPNAME"}
and in case you want to write a message use the following:
{"ns":"coldfusion.websocket.channels","type":"publish","channel":"CHANNELNAME","data":"hi","appName":"APPNAME"}
In Chrome and Firefox <57 it works, but in Firefox Quantum doesn't work.
The goal is to send a message to another tab in the browser.
When filling in the text input and clicking the send button, the other tab in the browser should write the message in the browser console.
html file:
<script type="text/javascript">
const myWorker = new SharedWorker( "sharedWorkerChat.js" );
const port = myWorker.port;
port.addEventListener( "message", function( e ) {
console.log( e.data );
}, false );
port.start();
function postMessage() {
const value = document.getElementById( "input" ).value;
console.log( value );
port.postMessage( value );
}
</script>
<input type="text" id="input" />
<button onclick="postMessage()"> Send </button>
sharedWorkerChat.js
var m;
var instances = [];
self.addEventListener( "connect", function ( e ) {
var port = e.ports[ 0 ];
instancias.push( port );
port.addEventListener( "message", function ( message ) {
m = message.data;
instances.forEach( function( p ) {
p.postMessage( m );
});
}, false );
port.start();
}, false);
I just came across the same problem, apparently Firefox Quantum enables the multiprocessing functionality by default and it doesn't yet support SharedWorkers.
To check if you have multiprocessing enable type about:debugging#workers in your address bar, if it is active you should see a yellow warning about SharedWorkers at the top of the page.
You can disable this functionality by following the link on that warning.
I'm appending isotope items via Ajax in Wordpress:
My JS Code:
var $news_container = $('#news'); //The ID for the list with all the blog posts
$news_container.isotope({ //Isotope options, 'item' matches the class in the PHP
itemSelector: '.newsItem',
masonry: {
columnWidth: '.news-item-sizer',
gutter: '.gutter-sizer'
}
});
var has_run = false;
var init_offset = 0;
$('button.showall').click(function(e) {
e.preventDefault();
var button = $(this);
// Disable button
$(button).removeClass('showall');
$(button).addClass('showless');
// Record Nonce
var nonce = $(this).data("nonce");
if(has_run == false) {
button.data('offset', $(this).data("offset"));
init_offset = $(this).data("offset");
}
// Set AJAX parameters
data = {
action: 'mft_load_more_ajax',
init_offset: init_offset,
offset: button.data('offset'),
nonce: nonce
};
$.post(mft_load_more_ajax.ajaxurl, data, function(response) {
// Set Container Name
var response = JSON.parse(response);
console.log(response);
// Run through JSON
$.each( response, function( key, value ) {
// Set Value
var val = $(value);
// Set Container
var $container = $('#news').isotope();
// Append Val
$container.append(val).isotope( 'appended', val );
$(button).html('show less');
});
// Set Offset
var offset = button.data("offset");
button.data("offset", offset + 11 );
// If Has Run
has_run = true;
return false;
}
Until now, this works quite fine. Now I would like to switch the buttontext and it's class to .showless and on the next click all previously appended items should be removed. They all have the class .newsItem.appendedItem.
I tried this method:
$('button.showless').click(function(e) {
var button = $(this);
console.log('showless');
$out = $('.newsItem.appendedItem');
var isotopeInstance = $('#news').data('isotope');
isotopeInstance.$allAtoms = isotopeInstance.$allAtoms.not($out);
$out.remove();
// Disable button
$(button).removeClass('showless');
$(button).addClass('showall');
has_run = false;
return false;
});
Unfortunately this doesn't work, because the showless function is not even being entered, as I don't get a log in the console. What am I overlooking?
Thanks for your help!
Cara
Update 1:
I'm getting this error in Google Console.
Not sure, what was the problem now. But I cleaned the code a little bit with using an if statement, to check if the elements already got appended.
So my final code now looks like this:
var $news_container = $('#news'); //The ID for the list with all the blog posts
$news_container.isotope({ //Isotope options, 'item' matches the class in the PHP
itemSelector: '.newsItem',
masonry: {
columnWidth: '.news-item-sizer',
gutter: '.gutter-sizer'
}
});
var is_appended = false;
$('button.showall').click(function(e) {
e.preventDefault();
var button = $(this);
// Record Nonce
var nonce = $(this).data("nonce");
if(is_appended == false) {
button.data('offset', $(this).data("offset"));
// Disable button
button.prop( "disabled" , true );
// Set AJAX parameters
data = {
action: 'mft_load_more_ajax',
offset: button.data('offset'),
nonce: nonce
};
$.post(mft_load_more_ajax.ajaxurl, data, function(response) {
// Set Container Name
var response = JSON.parse(response);
console.log(response);
// Run through JSON
$.each( response, function( key, value ) {
// Set Value
var val = $(value);
// Set Container
var $container = $('#news').isotope();
// Append Val
$container.append(val).isotope( 'appended', val );
});
// Undo Button Disable
button.prop( "disabled" , false );
button.html('Weniger News anzeigen');
// Set Offset
// var offset = button.data("offset");
// button.data("offset", offset + 11 );
// If Was appended
is_appended = true;
return false;
});
} else if(is_appended == true) {
$out = $('.newsItem.appendedItem');
$news_container.isotope( 'remove', $out )
// layout remaining item elements
.isotope('layout');
button.html('Alle News anzeigen');
is_appended = false;
return false;
}
});
In Chrome everything works perfectly. But just figured out, that in Firefox my Ajax array is completely empty and I'm not able to fetch any data. Probably another problem, I'm going to post separately.
I have 2 autocomplete fields and need to update the second autocomplete list from the first selection. This is what I have.
Using JQuery.mixin and a Validation.mixin for input boxes.
Ng.CreateInsertblnController = Ember.ObjectController.extend(Ng.Validate,{
content: []
}
Ng.CreateInsertblnView = Ember.View.extend({
vesselPicker: JQ.AutoComplete.extend({
source: Ng.vessels.autocomplete,
minLength: 0
}),
voyagePicker: JQ.AutoComplete.extend({
// JQ.AutoComplete extends from Ember.TextField
source: Ng.voyage.autocomplete,
minLength: 0
})
});
Ng.vessels = Ember.ObjectController.create({
inputText: "",
autocomplete: function(request, response) {
var term = request.term;
var self=this;
$.getJSON( "http://myjsonlink", request, function( data, status, xhr ) {
var list = [];
$.each(data,function(id,item){
list.push(item.code);
});
response( list );
});
}
});
Ng.voyages = Ember.ObjectController.create({
inputText: "",
autocomplete: function(request, response) {
var term = request.term;
var self=this;
$.getJSON( "http://myjsonlink", request, function( data, status, xhr ) {
var list = [];
$.each(data,function(id,item){
list.push(item.code);
});
response( list );
});
}
});
I tried creating Ng.vessels and Ng.voyages in the controller, but in the view I'm not able to retrieve controller data. My question is how can I declare the 2 objects in the controller, how to invoke them from view and how to refresh second autocomplete. Any help would be much appreciated thanks.
I am trying to implement the jquery mobile autocomplete functionality, because i have a list of around 3000 items.
I have a json that has this structure:
[{"v1":" abcd","v2":"http://www.url.nl","v3":0487,"v4":"street12","v5":"H"},
{"v1":" qq","v2":"http://www.url.nl","v3":0297,"v4":"street14","v5":"A"},
{"v1":" zz","v2":"http://www.url.nl","v3":0117,"v4":"street55","v5":"A"}]
I am using this example: http://jquerymobile.com/demos/1.3.0-rc.1/docs/demos/widgets/autocomplete/autocomplete-remote.html
but i can not get this to work with my json file.
$( document ).on( "pageinit", "#myPage", function() {
$( "#autocomplete" ).on( "listviewbeforefilter", function ( e, data ) {
var $ul = $( this ),
$input = $( data.input ),
value = $input.val(),
html = "";
$ul.html( "" );
if ( value && value.length > 2 ) {
$ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
$ul.listview( "refresh" );
$.ajax({
url: "http://gd.geobytes.com/AutoCompleteCity",
dataType: "jsonp",
crossDomain: true,
data: {
q: $input.val()
}
})
.then( function ( response ) {
$.each( response, function ( i, val ) {
html += "<li>" + val + "</li>";
});
$ul.html( html );
$ul.listview( "refresh" );
$ul.trigger( "updatelayout");
});
}
});
});
I have the feeling that it has to with the ajax call and my json file, but I haven't found the solution yet.