I am calling wordpress's tinyMCE from php and assigning it's contents through ajax to a form array key.
I keep on getting error: Cannot read property 'getContent' of null.
I read thought Wordpress wp_editor() not working and Include TinyMCE plugins with Wordpress wp_editor? & others but still can't get tinyMCE's content into form array.
JS:
var form = {
action: "submit_user_data",
content: tinymce.activeEditor.getContent(),
title: $("#inputTitle").val(),
ingredients: $("#inputIngredients").val(),
time: $("#inputTime").val(),
utensils: $("#inputUtensils").val(),
level: $("#inputLevel").val(),
meal_type: $("#inputMealType").val()
};
PHP:
wp_editor( '', 'tinymcecontenteditor' );
The issue is originated at the tinymce.activeEditor.getContent() call.
Any ideas?
Thanx
Following through on the call to 'tinymce's methods & functions, I could not find anything wrong with the call.
But somehow (still can't figure it out do this one's left for the public) I noticed that calling tinymce from a jquery as mentioned does not give access to it's contents (obviously...dah..).
What I found out I need to do is, instead of calling the getContent function, I had to trigger the triggerSave function and the get the val of the object by id, so:
tinyMCE.triggerSave();
var contents = $("#tinymcecontenteditor").val();
Before I assign it's contents to the form array.
Form array changed to content: contents,.
shahnbaz's answer pointed me in that direction.
Sounds like the problem lies with your WordPress integration. As long as the TinyMCE JS is in the page, activeEditor should always return the editor instance.
Related
I thought this would be really simple but obviously after a couple of days trial and no success I have to ask the people to help, looked everywhere.
right im basically creating a php template without much guidance on the foundation 4 framework with is a responsive framework. Now this framework is rather basic and so to add page transitions ive had to use jquery to do what i believe is an ajax call to take "content" from another page and display it on the template page index.html
for which I am currently using the following
<script>
$(document).ready(function() {
$('nav.top-bar > section.top-bar-section > ul.right > li > a').click(function() {
var toLoad = $(this).attr('href')+' #content';
$('#content').hide(1000,loadContent);
$('#load').remove();
$('#main_wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('fast');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-0);
function loadContent() {
$('#content').load(toLoad,showNewContent);
}
function showNewContent() {
$('#content').show(1000,hideLoader);
}
function hideLoader() {
$('#load').fadeOut('fast');
}
return false;
});
});
</script>
NOW before i changed over to using ajax and jquery i was operating the menu "active" class and the page name with a simple variable set on each page in the first line listed as $page='' and then the page name
now that im loading the content with ajax even if i include this variable in the content of the new page it will not update in either the or the menu title
im very sorry i dont write things correctly im new to this forum thing
thank you for the help in advance
:) I prefer someone to explain what i need to do and how to do it rather than just copy and pasting code as im a learner :)
You probably want to load the page and parse the result in jQuery to get the new page’s <title> tag and set the requesting page’s <title> tag.
The only thing I’d ask is: why are you doing this? Are you just wanting AJAX page navigation in your website instead of the traditional propagating navigation?
I am only able to answer one part of your question due to extreme confusion, so:
First off, here's why your url changes:
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-0);
You are modifying it with that line. That line, however, has an interesting little quirk:
attr('href').length-0
at the end. Why the -0? That would make no difference. I'd clean it up.
Outside of that, I'm incredibly confused with what you're asking so let me try rephrasing it and you can tell me what I'm missing.
You want to have a user click on a navigation link, and load that link's content via an AJAX call using jQuery, and then replace the content on the page with the newly loaded page, correct?
When you say "right on top main page i have variable $page = then the page name", what do you mean by "main page"? Do you mean it's a line of text in HTML? Part of a script that you haven't included here? Part of your PHP code?
And then you say "ive tried including the tag in a div that changes along with the above content"- what is "the tag"?
By reading this 4 or 5 times I could barely discern the above understanding of what you're trying to do.
Please make heavy edits to you question- it's incredibly hard to understand.
Lastly, why are you trying to replace the browser's functionality of a user clicking a link and loading content? That's what the browser is for. The browser also, conveniently, has a loading indicator in the url bar usually (or some form thereof), letting the user know the content is still loading.
function loadContent() {
$('#content').load(toLoad,showNewContent);
}
So first off, look at the jQuery doc for the load method:
http://api.jquery.com/load/
Your issue is that it is calling for three arguments, and you are passing two. If there are multiple arguments listed and you only want to pass SOME of them, you still need to supply a null value for the ones you want to "skip". Try changing your call to this:
function loadContent() {
$('#content').load(toLoad, null, showNewContent);
}
You'll notice that I'm passing "null". If that doesn't work, pass an empty string, like this:
function loadContent() {
$('#content').load(toLoad, "", showNewContent);
}
That second argument is data to be passed with the request. It's the THIRD argument that you list as your callback, which as far as I can tell is where you're making the mistake.
That was a tricky question to phrase. I will elaborate.
I have an object which is a datatable in this case, but it could be any jQuery object.
I listen for my button click with an .ON click event and call a function called checkbox with a parameter of my object:
var temporaryFilesTable;
$(document).ready(function()
{
temporaryFilesTable = $("#temporaryFilesTable").dataTable();
$("#checkboxButton").on('click', function()
{
checkbox(temporaryFilesTable);
});
});
This works fine and temporaryFilesTable passes as an object to the function checkbox.
The object "temporaryFilesTable" is the reference to the datatable - both are originally called within the document ready of an ajax triggered php / js file.
In another .js file where I store most of my reusable functions I have the function checkbox(checkboxTable).
This function creates a modal that has several buttons on. I want to use these buttons to call functions such as selectFiltered(checkboxTable).
Because the function checkbox(temporaryFilesTable) brings in the table object I need to reuse the object to trigger the next function. I am used to passing variables as parameters into functions using onclick="function(parameter)", or in this case with the modal I would have to use:
function checkbox(checkboxTable)
{
...
var content = '<a href="#" onclick="selectFiltered('+checkboxTable+') class="button>'
...
<!-- Trigger modal -->
}
This actually doesn't seem to work anyway so my syntax is probably wrong but that is not really the point. I am reluctant to use onclick as I am currently correcting my code to use jQuery .ON click instead.
Without declaring temporaryFilesTable as a global object can I somehow get this jQuery object into an .ON click listener?
If not, I suppose I could consider declaring the datatable object as a global that can be accessed across multiple .js files, rather than passing it around functions so much? The problem is this means I would have write my functions to trigger jQuery on each datatable object, even those that might not be in the DOM at the time. I guess that's not ideal.
** Additional info **
The code to check the checkboxes in the way I wanted worked fine before I started passing the table as a parameter. I wanted to do this because I have multiple pages, with different tables, where I would like to use the same checkbox ticking modal and functions. I can post the original code if it helps but I didn't want to confuse the question.
To clarify I realise I do declare my temporaryFilesTable putting it into global scope in my first section of code but I don't think this passes between the .js files. This is just to allow me to use it outside of document ready.
Thanks for reading.
I would suggest trying to attach the on click event after the html is append to the dom. The object doesn't play nice when passed into a string through a function. So I would try something like this:
$("#appedTo").append(content);
//Then select the a, and attach the on click event
$([selector to get the link]).on("click", function(){
selectFiltered(checkboxTable);
});
How to get an array of all checkboxes selected on the page, and then passing it to the next page (in this case php, so it can be picked up by php _POST function). I have come up with this :
<script type="text/javascript">
var selected = new Array();
$(document).ready(function() {
$("input:checkbox:checked").each(function() {
selected.push($(this).val());
});
$('#od').submit(function() {
alert(this.selected); // *See note below
$.post('receiver.php', {'registration': selected});
return false;
});
});
</script>
But is does not seem to work :( It returns null, as if no checkboxes would have been added to the array, or maybe the post function is wrong. Can you point me in the right direction here?
I've found the following of issues:
You read the checked items on page load, thus ignoring all changes made by the user. Move that code to the submit() handler.
Your debugging code (alert(this.selected)) tries to display the value of the selected property for the form node. It isn't a reference to your JavaScript global variable selected. I suggest you use a proper debugging tool such as Firebug; alerts are highly unsuitable.
You sucessfully send the values of checked items. You just ignore the field name and rename everything to registration. That looks intended, otherwise report back:
{'registration': selected}
I suppose you can make jQuery serialize the values for you but fixing these little details in your code should do the trick anyway.
I think $("input:checkbox:checked") should be `$("input[type="checkbox"]:checked")
Or simply: $('input:checked', '#form-container');
$('#od').submit(function() {
var selected = $('input[type="checkbox"]:checked').toArray();
$.post('receiver.php', {'registration': selected});
return false;
});
The Data being posted might need to be split up.....
EDIT:
OK, I believe I've found a way around the issue using the info posted by #ManseUK along with #Johan's comment. As a n00b I can't answer my own question but I've added an explanation below the question in case it helps anyone else out.
I am re-writing part of an e-commerce solution which was written by
another development team some years ago. In the new version, we are
experimenting with shortening the user journey using Ajax but doing so
gives JavaScript errors and causes some functions to fail. Dev URL is
here:
http://cognition.thelightbulb.co.uk/type-18/general-purpose-lamps-and-bulbs/craftlight-daylight
The errors appear once the dropdowns have been selected and the
product displays.
The errors are displaying most notably in IE7:
Error: 'frm.qty' is null or not an object
Error: 'qty.value' is null or not an object
I believe this is where the problem is coming from:
var frm = document.frmOrder;
var qty = frm.qty;
In the lines above, frmOrder is the name of the form and qty is
the name of the input for product quantity.
Compare that to http://cognition.thelightbulb.co.uk/product-54 where
the product loads without the Ajax selection process and you'll see
that the functions work correctly.
I suspect that the problem is to do with the fact that var frm =
document.frmOrder; is not working due to the way it relates to the
DOM when loaded with Ajax.
I am using innerHTML=xmlhttp.responseText as the Ajax method. Is
there an alternative way to define var frm so that it will function
properly when loaded with Ajax?
EDIT:
Using the info posted by #ManseUK along with #Johan's comment, I added another argument to CheckMinQty(minorder) so that it now looks like this...
function CheckMinQty(minorder,qty)
...where qty is passed to the function on an onclick event as document.forms['frmOrder'].qty.value
I then moved the whole function out into a separate .js file. It's maybe not the best approach but it still feels tidier for the Ajax call to just return workable HTML which CheckMinQty can use rather than bringing in a whole load of <script> and then trying to run it.
Thanks for all the suggestions and I'd welcome any comments about the approach/solution outlined above.
Change this
var frm = document.frmOrder;
to this
var frm = document.forms['frmOrder'];
That will give you a handle to the form
document.frmOrder refers to the element with id frmOrder on the page, which happens to be the form on this page. Just try to get the correct form-element as the variable there.
Though the Manse's solution might work, use a more sensible way and assign an id to the form and since you're using jQuery anyway, retrieve the form with var frm = $(#formid); Not only is it easier to write, it's much more easier to read by you and everybody else.
When loading script via AJAX, you don't have DOMReady event anymore. In other words, when you want to execute your script on AJAX load, you should use self-invoked functions.
Wrap your ajax-loaded script inside a function like this:
(function(){
// Do what you want to do here.
})();
See if that solves the problem?
Sorry for this but I searched the whole web for a solution to my probleme but in vain :(
What I want to achieve is creating a normal Post and adding a form to it that once submitted, goes to a database and gets back a value.
I created a plugin for that and integrated it in the admin menu then set a function that queries the db :
myfunc_getcode($db, $table, $value, $return) // returns a value
how can I achieve this!? I mean, when a user inserts some data in the form (that exists inside a post or page) then he clicks on submit, Ajax talks to the db and gets the results back.
I don't even know if wordpress 3.0.1 allows such things!
I got it to work by using
add_action('the_content', 'my_function');
this hooks my plugin to the posts and pages.
then in the function I transmit the content like;
function my_function($content) {}
Then I used Ajax by integrating jquery inside my script;
<script type="text/javascript">
jQuery(document).ready(function($) {}
for submitting forms I used jquery/ajax to listen to the form
$("#my_form_id").submit(function() {
and used jquery's $.post to pass variables to a php page that handeles my results and returns them by echo.
hope this helps someone!