I am using CkEditor and would like to define a custom template, that uses an AJAX function to load a HTML string. I have been able to define custom templates, but if I use a function for the html property of the template object the function is never exectuted. Is it possible to load a template using AJAX with the default template plugin or do I need to write my own?
config.js
CKEDITOR.editorConfig = function (config) {
config.templates_files = ['/pathtomyfile/custom.js'];
};
custom.js (defining my custom templates)
CKEDITOR.addTemplates('default', {
imagesPath: CKEDITOR.getUrl(CKEDITOR.plugins.getPath('templates') + 'templates/images/'),
templates: [
{
title: 'Template 1',
image: 'template1.gif',
description: 'A custom template that does not work',
html: function () {
alert('This alert is never called');
var html = '';
$.ajax({
url: 'MyGetURL',
type: "GET",
async: false,
success: function (result) {
html = result;
},
error: function (jqXhr, textStatus, errorThrown) {
alert("Error '" + jqXhr.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')");
}
});
return html;
}
},
{
title: 'Template 2',
image: 'template2.gif',
description: 'A working custom template',
html: '<h1>I Work!</h1>'
}
]
});
You can't follow this way. The first reason is that editor expects html to be a string, not a function. The second reason is that your AJAX request doesn't make sense since it's called asynchronously and return html is executed before the request is finished.
Anyway, what you want to do is to preload your temple(s) once the editor is ready. You can simply change the following XHR request with a jQuery code but you have to remember that you should call CKEDITOR.addTemplates in success callback:
CKEDITOR.replace( 'editor1', {
templates: 'my',
on: {
instanceReady: function( argument ) {
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
CKEDITOR.addTemplates( 'my', {
templates: [
{
title: 'My AJAX-driven template',
html: this.responseText
}
]
});
};
httpRequest.open( 'GET', 'yourFile.html' );
httpRequest.send();
}
}
});
If you really wanted to do this live (hard way, I don't recommend it to you), you should overwrite templates command with your code which loads custom templates and then executes the real command. I don't think you need to do this though.
Have fun!
If you're okay with using the bad async: false attribute, I've solved this by changing my custom config file to this:
$.ajax({
type: "POST",
url: '/editor/getTemplates',
async: false,
dataType: "json",
success: function(data) {
CKEDITOR.addTemplates("default",{
imagesPath:CKEDITOR.getUrl(CKEDITOR.plugins.getPath("templates")+
"templates/images/"),
templates:data});
},
error: function() {
alert("Error!");
}
});
Where the server loops through all templates and generates a json encoded array as templates should be.
If you don't set async to false (since it's depercated in newer jQuery), the problem will be that the editor will try to access the array before it arrived, In that case I think you'd have to edit internal files.
Related
Twitter typeahead not working as expected, when I comment out code in the library I do get a non-styled drop down of suggestions.
jQuery('input#test').typeahead(
{
hint: true,
highlight: true,
limit:25, //still using 5 which is default in the library
minLength: 3
},
{
name: 'customLookup',
source: function(query, result) {
return jQuery.ajax({
url: url, //my dynamic url, returns custom json array that needs to be mapped
data: 'shop_name=' + query + "&limit=25", //custom limit against backend api
dataType: "json",
type: "post",
success: function(data, textStatus, xhr) {
var suggestions = [];
jQuery.map(data.data, function(item){
suggestions.push(item.name + " - " + item.address);
});
result(suggestions); //stepping in, it just skips because syncCalled already = true? Then remove that code and it gives me back a list of 5 that isn't styled...
console.log(suggestions); //has array of strings as expected
},
error: function (request, status, error) {
alert(error);
}
});
}
});
So are there options or updates I've missed capturing when configuring? Using a back end custom data source that needs JSON mapped to an array for typeahead.
Just ended up modifying the library directly and having our own copy, not sure the issue but seems to work fine with that approach and using custom CSS to style.
The user of my Cordova/PhoneGap app has to sign in, so I group all the form's data into a Javascript array, then I JSON.strigify() it and I send it to the server via an Ajax request.
The PHP script has been tested by manually sending the CGI command, it does perfectly works.
Also, I used alert() to check if the function sendDataToServer() is called, it is.
The problem is that Ajax doesn't output success() neither error(). AND there is no difference (exept the command, obviously) with an other working script that I use for checking a login.
Note: I use GET for testing purposes, at the end it will be POST.
Here is the WORKING script:
$("#connectionFormSubmit").click(function () {
$.ajax({
type: "POST",
url: "http://" + host + "/my_app/check_login.php",
data: "login=" + $("#login-conn").val() + "&password=" + $("#password-conn").val(),
success: function (msg) {
navigator.notification.alert(msg, alertDismissed, 'Result', 'OK');
},
error: function (jqXHR, exception) {
navigator.notification.alert(getError(jqXHR, exception), alertDismissed, 'Error', 'OK');
}
});
});
Here is the NOT WORKING script:
function sendDataToServer(dataGuest, dataChild1, dataChild2, dataChild3) {
$.ajax({
type: "GET",
url: "http://" + host + "/my_app/insert_new_user.php",
data: "guest=" + dataGuest + "&child1=" + dataChild1 + "&child2=" + dataChild2 + "&child3=" + dataChild3,
/* async: false, not changing anything */
success: function (msg) {
navigator.notification.alert(msg, alertDismissed, 'Result', 'OK');
},
error: function (jqXHR, exception) {
navigator.notification.alert(getError(jqXHR, exception), alertDismissed, 'Error', 'OK');
}
});
}
(in both cases the server script works perfectly fine).
This is how I call the function:
sendDataToServer( JSON.stringify(dataGuest), JSON.stringify(dataChild1), JSON.stringify(dataChild2), JSON.stringify(dataChild3) );
I didn't find anything simiar to my problem on Google.
I am trying to use selectize.js to populate a combo-box on a form in my application.
I am trying to follow the "Rotten Tomatoes" model on the selectize web page. But I am a little puzzled about the timing of this call. The author prefers to initialize the select with a little <script> immediately following the specification of the <select> in the html file, but I would rather keep all my script in a separate js file.
Anyway I do the following
function loadSelect()
{
var myAPI = "my/api/";
var count = 0;
console.log('in loadSelect()');
$('#myselect').empty();
$('#myselect').selectize({
valueField: 'id',
labelField: 'name',
searchField: 'name',
options: [],
create: true,
load: function(query, callback) {
console.log("loading data");
if (!query.length) {
console.log("no data loaded");
return callback();
}
$.ajax({
url: myAPI,
type: 'GET',
dataType: 'json',
data: {
q: query,
},
error: function() {
console.log("failure");
callback();
},
success: function(res) {
console.log("success");
count = res.data.length;
callback(res.data);
}
});
}
});
}
No matter when I call this loadSelect() function, whether it be from the $(document).ready(function(){ or directly from the html page after the declaration of the select as the selectize author does, I find that the load() method never gets called. Note the console.log statements. The first one, 'in loadSelect()' always fires but any logs inside the load() function never fire.
Project documentation describes the load callback as follows:
Invoked when new options should be loaded from the server.
but this begs the question when should new options be loaded from the server.
In any event, what can I do to insure that load callback fires?
add the option preload:true to the array of options passed to the selectize call.
How do you use, or correctly use, javascript in dynamically embedded pages/content?
When an event occurrs I am loading a PHP/HTML page into an HTML element. The javascript works fine on the outter page, or the page that the content gets loaded into, but it does not work on the page that is being loaded.
Here is my request function:
function sendServiceRequest(file, nvpSendData, successCallback, failCallback) {
$.ajax({
type: "POST",
url: file,
data: nvpSendData,
dataType: 'html'
}).success(function(data, status) {
console.log(".done");
console.log("Return AJAX status: " + status);
//console.log("success data: " + JSON.stringify(data));
successCallback(data, status);
}).fail(function(data, status, error) {
console.log(".fail");
console.log("Return AJAX status: " + status);
//console.log("Return data: " + JSON.stringify(data));
failCallback(data, status, error);
});
}
Then i have a php page, viewScripts.php, that has this javascript file included, that handles the loading process
view_events.js
document.addEventListener('DOMContentLoaded', function() {
var rx = document.querySelector("#rx-number").value;
sendServiceRequest(
"/comments/get_content.php",
{action:"loadContent", loadType:"comments", rx_number:rx},
function(data, status) {
document.querySelector("#rx-comments-container").innerHTML = data;
},
function(data, status, error) {
console.log("AJAX send service request failed while loading comments!");
}
);
});
Then in the code above, /comments/get_content.php verifies the data being sent, and then loads the page comment.php into a div element, #rx-comments-container. Up until this point everything is fine. It's the javascript in comment.php that does not want to work. I have tried including a '.js' file with the specified functions to handle events into comment.php, but this does not work. I have also tried including the event functions in view_events.js, as listed above, which is included in viewScripts.php, and this does not want to work either. I have also tried embedding the javascript directly into comments.php, but this doesn't work either.
Here is the javascript that is to be included in comments.php:
document.addEventListener('DOMContentLoaded', function() {
document.getElementsByClassName("edit-rx-comment-glyph").addEventListener("click", function () {
var id = this.value;
sendServiceRequest(
"/comments/get_content.php",
{action: "loadContent", loadType: "editComment", comment_id: id},
function (data, status) {
document.querySelector('#' + id).innerHTML = data;
},
function (data, status, error) {
console.log("AJAX send service request failed while loading edit form!");
}
);
});
document.getElementsByClassName("comment-history-glyph").addEventListener("click", function () {
var id = this.value;
sendServiceRequest(
"/comments/get_content.php",
{action: "loadContent", loadType: "viewHistory", comment_id: id},
function (data, status) {
document.querySelector('#comments-body').innerHTML = data;
},
function (data, status, error) {
console.log("AJAX send service request failed while loading edit form!");
}
);
});
});
I managed to figure this out. I guess i was doing something wrong, because my code ended up working. I just used an onclick event with the sendServiceRequest function, and that ended up working. I didn't need to include any other js files.
I am currently developping a new website
When I am trying to create an account, I get an error like this :
Uncaught TypeError: Cannot read property 'hasError' of null.
And this is the code
function submitFunction()
{
$('#create_account_error').html('').hide();
//send the ajax request to the server
$.ajax({
type: 'POST',
url: baseUri,
async: true,
cache: false,
dataType : "json",
data: {
controller: 'authentication',
SubmitCreate: 1,
ajax: true,
email_create: $('#email_create').val(),
back: $('input[name=back]').val(),
token: token
},
success: function(jsonData)
{
if (jsonData.hasError())
{
var errors = '';
for(error in jsonData.errors)
//IE6 bug fix
if(error != 'indexOf')
errors += '<li>'+jsonData.errors[error]+'</li>';
$('#create_account_error').html('<ol>'+errors+'</ol>').show();
}
else
{
// adding a div to display a transition
$('#center_column').html('<div id="noSlide">'+$('#center_column').html()+'</div>');
$('#noSlide').fadeOut('slow', function(){
$('#noSlide').html(jsonData.page);
// update the state (when this file is called from AJAX you still need to update the state)
bindStateInputAndUpdate();
$(this).fadeIn('slow', function(){
document.location = '#account-creation';
});
});
}
},
error: function(XMLHttpRequest, textStatus, errorThrown)
{
alert("TECHNICAL ERROR: unable to load form.\n\nDetails:\nError thrown: " + XMLHttpRequest + "\n" + 'Text status: ' + textStatus);
}
});
}
It seems to be the jsonData, on the function, which is not working as well. Any idea or suggestions?
The success handler will be passed the data returned from the ajax request.
It will not have a function called hasError() because it is just a json object it will not have any functions.
The error handler should be fired if there is an http error i.e. if the ajax call returns an http 500.
I'm not familiar with prestashop, but looking over the prestashop documentation hasError is returned as a bool (not a function), so instead try (without the parenthesis).
if (jsonData.hasError)
You may also want to check if any data is returned first.
if (jsonData)