I'm using new Redactor 2.2. I wanted to use this Redactor after ajax call. Similar to https://imperavi.com/redactor/examples/ajax/
I can initiate the redactor and it showing but I could not add plugins to this. Even their plugin ( source code, font alignment, font size, font color etc ) are not showing ( But other buttons which are not plugin are showing as in the above URL )
$.ajax({
type: "POST", url: "myurl", data: "", dataType: "json",
success: function (data) {
$('#divReplacer').html(data['content']);
$("#divReplacer .htmlEditor").redactor({
plugins: ['source', 'fontcolor', 'fontfamily', 'fontsize']
});
}
});
Old Redactor worked fine with the above ajax call.
These plugins are showing perfectly if we load the redactor without ajax call.
Anyone face this issue ?
I did the following modification to all plugin JS file and now it is working :)
$.Redactor.prototype.fontsize = function()
change to
RedactorPlugins.fontsize = function()
Related
I'm trying to develop a wordpress plugin, I need to get users input data from any form in a specific page (not knowing its action) I come up so far with this solution which is to get values using javascript and then passing it to php:
jQuery(function ($) {
$(document).ready(function(){
$( "form" ).submit(function( event ) {
if($( "form" ).valid()){
var inputs = $( "form input" );
var inputValues = [];
inputs.each(function(index){
if($(this).attr('type') !== 'submit')
inputValues.push($(this).val());
});
}
event.preventDefault();
});
});
});
I tried to pass the Javascript variable inputValues to my plugin using Ajax
$.ajax({
type: 'POST',
url: '../wp-content/plugins/myplugin/myplugin.php',
data: {'variable': inputValues},
});
But I get problems with the url for some pages and I couldn't use $_POST['variable'] in myplugin.php file.
Is there a way to accomplish what I'm trying to do, or do you know an alternative solution?
Thanks in advance.
in terms of how to implement AJAX calls using WordPress, please check out the WordPress Codex. You're not doing it correctly.
JavaScript seems like a round about way of doing this. I would suggest to hook into one of hooks that are being called almost every single time like template_redirect (https://codex.wordpress.org/Plugin_API/Action_Reference/template_redirect).
Then you can check what's in the $_POST variable and do what you need to do with it. This would even Capture AJAX forms as long as the URL links to a proper AJAX WordPress endpoint.
Hope this helps
Are all button control has to be post method? or we can set it to get method, for example, I want to see an employee details by giving employeeId and click submit button
There is no difference between GET and POST method. They both provide url and parameters. POST method only have some advantages and some restrictions.
If your button is on form (as in classic asp.net), and there is no javascript handler for this button - only POST method can be here.
If you create jquery code (or pure javascript), that overrides default behaviour of the button, you can select what method use: POST or GET
<script>
$('#button').click(function() {
$.ajax({
url: '....',
data: { ....},
type: 'GET', //or 'POST'
success: function(res) {
//all fine
},
error: function() {
//invalid url or server error
}
};
return false; //to avoid default submit
});
</script>
I am using JQuery BlockUI plugin for my project. Here is the link of this tool:
http://malsup.com/jquery/block/
I am hoping to call it manually before heavy (non-Ajax) computation and end it after it. I tried many times, but not able to get it work. I tested the following:
$.blockUI({ overlayCSS: { backgroundColor: '#00f' } });
before doing the heavy computation. But no blocking.
Update 1
I already have
$(document).ajaxStart($.blockUI(bui)).ajaxStop($.unblockUI);
in my program and it is work perfectly.
Now I want to use $.blockUI for non-ajax call only in this place, but it is not working.
Update 2
Here is code structure. I tested BlockUI in two places separately, but not working.
$.blockUI(); //place 1
$.ajax({
url: '/js/a_big_map_file.js',
dataType: "script",
async: false,
success: function(mapjs) {
$.blockUI(); //place 2
...
//heavy computation is here
...
});
The Discover Meteor book shows how to use the sasha:spin package to show a loading spinner template (<template name="loading">) while IronRouter waits for data.
How do I use this same loading template while I'm waiting for a regular jQuery ajax call to finish?
var locationInfoByZipcode = function(zipcode, callback){
$.ajax({
url: "http://api.zippopotam.us/us/" + zipcode,
type: "GET",
beforeSend: function(){
// Render the loading template. I tried Blaze.render("loading") but I'm not using it right
}.
success: function(response){
// Stop the loading template.
},
error: function(){
callback("error");
}
});
};
Blaze.render takes a template and a parent, not a string, so it'd be Template.loading and then the parent template you want to render into. You'd probably want to destroy it in the success callback.
What might be a little bit cleaner is putting the HTTP req inside a method along with a reactive variable & calling that method on click. Then, you can keep the loading template inside an #if reactiveVarIsTrue type thing in spacebars. Just a personal preference to not use jquery ajax calls if I can help it because they're not very expressive.
I got it.
var locationInfoByZipcode = function(zipcode, callback){
var renderedView = {};
$.ajax({
url: "http://api.zippopotam.us/us/" + zipcode,
type: "GET",
beforeSend: function(){
// $('body')[0] is the DOM node object that .render() needs
renderedView = Blaze.render( Template.loading, $('body')[0] );
},
success: function(response){
// to remove the template you need to pass Blaze.remove() the returned value from the initial Blaze.render() call
Blaze.remove(renderedView);
callback(response);
},
error: function(){
callback("error");
}
});
};
I'm working on upgrading a old fckeditor to ckeditorv3. I found most of APIs been updated.
There is a internal used plugin ,its content is a aspx page,and this page will provide dynmic list.
I want to upgrade that plugin to make it work in new ckeditorv3.
Can anyone show me a tutorial link about how to add a html page to a ckedirot dialog ?
I found that one http://www.kusog.org/articles/OtherJavaScriptLibraries_WritingCustomCKEditorPlugins/ , but it is just some basic info. What i want to do is embed a html page into a plugin's dialog.
Ok, I found the solution. You need to load the page in a dialog iframe.
CKEDITOR.plugins.add('customfields',
{
init: function(editor) {
editor.addCommand('customfields', new CKEDITOR.dialogCommand('customfields'));
editor.ui.addButton('Customfields',
{
label: 'Custom Fields',
command: 'customfields',
icon: this.path + 'CustomFields.gif'
});
CKEDITOR.dialog.addIframe(
'customfields',
'Custom Fields',
this.path + 'CustomFields2.aspx', null, null,
function() { alert('aaaa'); }, function() { alert('bbbb'); }
);
}
});