We Keep Coding

How to get the language-picker button save the value after it is clicked with jquery cookie?

a JQuery newbie here.
The following jquery code for a language-picker (to be used on multi-language website, let's say) should show the active language clicked by user. The problem is that after the webpage reloads in the chosen language, the language picker defaults to the language in the div tag. It doesn't show the language picked by user.
I kind of tried setting up a cookie and doing something with it.Here is the code I modified using jquery cookie plugin. I wanted to make my code check for cookies, and if there is one, set the cookie variable to div tag. Can someone show me how I can modify this code ?
$(document).ready(function(){
if($.cookie('lang-switch')!=null){
$langCookie=$.cookie('lang-switch');
$("#lang-menu div").html($langCookie);
}
$("#lang-menu").hover(
function(){
$(this).addClass("cls-border-lang");
$(this).children().eq(0).addClass("cls-borderbottom-lang");
$("#lang-menu ul").stop().slideToggle(100);
},
function(){
$(this).removeClass("cls-border-lang");
$(this).children().eq(0).removeClass("cls-borderbottom-lang");
$("#lang-menu ul").stop().slideToggle(100);
}
);
/// click languages
$("#lang-menu ul li").on("click", function(){
//select lang and apply changes
var lang= $(this).html();
$.cookie('lang-switch', lang)
$("#lang-menu div").html(lang);
});
});

set tinymce in " javascript, $(document).ready...", my solution is not working

i use javascript made a function that every time i click button "add one more" button, html page will add another group of html elements, which i need to includes tinymce text area, but I cannot manage to do it.
here is part of my code,
<script>
$(document).ready(function (e) {
var html = '<textarea class="tinymce" name="CCV_product_full_description[]" id="childccv-product-full-description" />';
...
I defined tinymce in another js file and included in this html file, but it not works some how, i need some help :)
in another js file
tinymce.init({
selector:"textarea.tinymce"
});
here is the function for add another group of html elements
$("#add").click(function (e) {
$("#container").append(html);
});

It looks like you are trying to initialize the editor on DOM elements that don't yet exist.
Also, if you are trying to dynamically add several instances of TinyMCE, you need to remove TinyMCE first before you can call it again.
$("#add").on('click', function (e) {
e.preventDefault()
$("#container").append(html);
tinymce.remove()
tinymce.init({
selector:".yourSelectorName"
});
});

Display tinymce textarea dynamically

I have a drop down list that when a selection is made will insert a bunch of elements within a form to the DOM using ajax, within this form I have textareas that I wish to be TinyMCE textareas.
I have this inside of my HTML head:
<script type="text/javascript">
tinymce.init({
selector: "textarea"
});
</script>
This is the ajax function that I use to add a bunch of elements, this is working how I need it to.
function getSecFacility(facsecid, facid) {
$("#new_section_form").hide();
$.ajax({
type: "POST",
url: "facility_section_information.php",
data: 'facility_section_id='+facsecid+'&facility_id='+facid,
success: function(data){
$("#selected_fac_section").html(data);
}
});
//loadTinyMCEEditor();
};
I have other textareas on my page that are not inserted by ajax and they display as WYSIWYG editors no problem, the issue is when I am adding in new elements.
I have checked several other questions trying to find an "answer" but nothing is working.
I tried to make a function called loadTinyMCEEditor() that I was calling within my getSecFacility() function after my ajax call. Within this function I was trying to reinitialize tinyMCE for these newly added textareas.
loadTinyMCEEditor() looks like this:
function loadTinyMCEEditor() {
tinyMCE.init({
selector: "textarea"
});
tinyMCE.execCommand('mceAddControl', false, 'test'); //test is the class name I gave this textarea
//tinyMCE.execCommand('mceAddControl', true, 'test'); //tried setting the bool to true..even tried without these lines
}
No matter what I try I cannot seem to get it to work with newly inserted textareas, How can I get these textareas to be TinyMCE textareas?
EDIT
I can now view the editor to my newly added textareas after I make a selection from my drop down list. However this only works once, if I make a second selection the new textareas only display as plain textareas. Here is what I changed in my ajax function:
function getFacSecFacility(facsecid, facid) {
$("#new_section_form").hide();
$.ajax({
type: "POST",
url: "facility_section_information.php",
data: 'facility_section_id='+facsecid+'&facility_id='+facid,
success: function(data){
$("#selected_fac_section").html(data);
loadTinyMCEEditor();
}
});
};
function loadTinyMCEEditor() {
tinymce.init({
selector: "textarea"
});
}
So after I make a selection this ajax function will run and display new textareas + other form information and I re-initialize the tinymce editors but for some reason this is only working once.
What should I change/do so that I can make multiple selection from my drop down list so that each time the new textareas will display as tinymce textareas?

You need to call tinyMCE.activeEditor.setContent with your incoming ajax-content. In your callback try:
tinyMCE.activeEditor.setContent(data);
Greetings

If you want to convert #selected_fac_section to a tinymce editor, you should call the init function of tinymce in your success function. Ajax calls are async unless you define otherwise. So, if you try to initialize the textarea outside of the ajax call, there still won't be a textarea to decorate with tinymce because the ajax call hasn't been finished yet. Use the id value for the selector this time and you should be good to go.
I am writing this from my phone so writing code here is a pain. Sorry for that. Just wanted to help you out quickly after seing you comment on my another answer. Will check this thread first thing in the morning to make sure if you need more help.

TinyMCE textarea can't edit

Here is the problem. In my php submission page, I have a form with multiple fields including a textarea which is currently using TinyMCE and I also have an option for duplicating existing form. The thing is I can't edit the 2nd editor that was duplicated but the editor appear in textarea place. However I can edit and save 1st editor. I am not sure if its a bug or just me doing something wrong? I tried to update TinyMCE as well but didn't work.. any idea?
function initTinyMCE() {
tinyMCE.init({
mode : "textareas", //mode : "exact", elements : "mytextarea"
theme : "simple"
});
}
initTinyMCE();
$(document).ready( function(){
$('a#addmore').live('click', function(){
//*clone the existing form and inserting form here*
initTinyMCE();
});
$('a#toSubmit').live( 'click', function() {
tinyMCE.triggerSave();
$('.editwork-form').submit();
});
});

I can't seem to get .clone() to work, nothing in the debug console either. However, my working solution is as follows, maybe this helps?
initTinyMCE();
$("#append").live("click", function() {
var ta_count = $("textarea").length;
var elem = document.createElement("textarea");
$(elem).attr("id", ta_count.toString());
$(elem).appendTo("#ta_container");
initTinyMCE();
});
function initTinyMCE() {
tinyMCE.init({
mode: "textareas",
theme: "simple",
theme_advanced_path: false
});
}​
Instead of .clone()ing the element, I'm just creating a new textarea and appending it to the container (using the count of all textareas on the page as it's ID to make it unique), then re-calling the tinyMCE initialiser.
Example jsFiddle

Make sure your textareas have different ids, otherwise there won't be a second editor instance! This is a crucial thing when creating tinymce editor instances.

Problems using jeditable and autogrow

I work on a Webproject using jQuery and CakePHP. I use jeditable as an inplace edit plugin. For textareas I extend it using the autogrow plugin.
Well, I have two problems with this:
First, autogrow does only work on Firefox, not on IE, Safari, Opera and Chrome.
Second, I need a callback event for jeditable, when its finished showing the edit-component, to recalculate the scrollbar
Im not so familiar with Javascript, so i can't extend/correct this two libraries by my own. Has anyone used another js-library for inplace edit with auto growing textareas (no complete editors like TinyMCE, I need a solution for plain text)?
I also found Growfield, it would work for other browsers, but there's no jeditable integration...
(sorry for my english)

I didn't see any problems using Autogrow with jeditable in any browsers but here is an implementation of Growfield with jeditable. It works much in the same way that the Autogrow plugin for jeditable does. You create a special input type for jeditable and just apply .growfield() to it. The necessary javascript is below, a demo can be found here.
<script type="text/javascript">
/* This is the growfield integration into jeditable
You can use almost any field plugin you'd like if you create an input type for it.
It just needs the "element" function (to create the editable field) and the "plugin"
function which applies the effect to the field. This is very close to the code in the
jquery.jeditable.autogrow.js input type that comes with jeditable.
*/
$.editable.addInputType('growfield', {
element : function(settings, original) {
var textarea = $('<textarea>');
if (settings.rows) {
textarea.attr('rows', settings.rows);
} else {
textarea.height(settings.height);
}
if (settings.cols) {
textarea.attr('cols', settings.cols);
} else {
textarea.width(settings.width);
}
// will execute when textarea is rendered
textarea.ready(function() {
// implement your scroll pane code here
});
$(this).append(textarea);
return(textarea);
},
plugin : function(settings, original) {
// applies the growfield effect to the in-place edit field
$('textarea', this).growfield(settings.growfield);
}
});
/* jeditable initialization */
$(function() {
$('.editable_textarea').editable('postto.html', {
type: "growfield", // tells jeditable to use your growfield input type from above
submit: 'OK', // this and below are optional
tooltip: "Click to edit...",
onblur: "ignore",
growfield: { } // use this to pass options to the growfield that gets created
});
})

knight_killer: What do you mean Autogrow works only with FireFox? I just tested with FF3, FF2, Safari, IE7 and Chrome. Works fine with all of them. I did not have Opera available.
Alex: Is there a download link for your Growfield Jeditable custom input? I would like to link it from my blog. It is really great!

Mika Tuupola: If you are Interested in my modified jeditable (added two callback events), you can get it here. It would be great if you would provide these events in your official version of jeditable!
Here is my (simplified) integration code. I use the events for more then just for the hover effect. It's just one usecase.
$('.edit_memo').editable('/cakephp/efforts/updateValue', {
id : 'data[Effort][id]',
name : 'data[Effort][value]',
type : 'growfield',
cancel : 'Abort',
submit : 'Save',
tooltip : 'click to edit',
indicator : "<span class='save'>saving...</span>",
onblur : 'ignore',
placeholder : '<span class="hint"><click to edit></span>',
loadurl : '/cakephp/efforts/getValue',
loadtype : 'POST',
loadtext : 'loading...',
width : 447,
onreadytoedit : function(value){
$(this).removeClass('edit_memo_hover'); //remove css hover effect
},
onfinishededit : function(value){
$(this).addClass('edit_memo_hover'); //add css hover effect
}
});

Thank you Alex! Your growfield-Plugin works.
In meantime I managed to solve the other problem. I took another Scroll-Library and hacked a callback event into the jeditable-plugin. It was not that hard as I thought...