Develop Reference

Can you use a jQuery selector on a HTML tag that a JS string printed?

Sorry if the question was misleading, I couldn't find a better way to describe my problem. Anyway, here goes:
Suppose I had a button start that initially displays a string for me. Said string (let's call it stringA) is output through jQuery like this:
$(".start").click(function() {
$(".startButton").hide('slow', function() {
$("#table1").html(stringA);
});
});
Alright. Cool. That worked without a hitch. Now inside stringA I have multiple
<span class="optButton">this is a button</span> buttons. I have another onClick handler for my optButton button, and it goes like this:
$(".optButton").click(function() {
alert("Testing");
$("#table1").html(stringB);
});
Needless to say, clicking on optButton is supposed to replace the contents of #table1 with stringB. However, when I tried it, it doesn't work. I tried adding alert() to test and see if jQuery managed to select optButton, but it seems that it didn't because I get no popup from the alert() function.
My theory is that since optButton was not part of the original HTML and is within a string stringA, jQuery is unable to select optButton as a result. If this is true, is there a workaround to this issue? If it is not, what is the actual cause of the problem here?

You need to use event delegation since your span element has been dynamically added to the DOM:
$('#table1').on('click', '.optButton', function() {
alert("Testing");
$("#table1").html(stringB);
});
This technique will helps you to attach click handler to these newly created span elements.

Inline Editing But Instance Doesn't Exist

I have my own custom non-jQuery ajax which I use for programming web applications. I recently ran into problems with IE9 using TinyMCE, so am trying to switch to CKeditor
The editable text is being wrapped in a div, like so:
<div id='content'>
<div id='editable' contenteditable='true'>
page of inline text filled with ajax when links throughout the site are clicked
</div>
</div>
When I try to getData on the editable content using the examples in the documentation, I get an error.
I do this:
CKEDITOR.instances.editable.getData();
And get this:
Uncaught TypeError: Cannot call method 'getData' of undefined
So I figure that it doesn't know where the editor is in the dom... I've tried working through all editors to get the editor name, but that doesn't work-- no name appears to be found.
I've tried this:
for(var i in CKEDITOR.instances) {
alert(CKEDITOR.instances[i].name);
}
The alert is just blank-- so there's no name associated with it apparently.
I should also mention, that despite my best efforts, I cannot seem to get the editable text to have a menu appear above it like it does in the Massive Inline Editing Example
Thanks for any assistance you can bring.
Jason Silver
UPDATE:
I'm showing off my lack of knowledge here, but I had never come across "contenteditable='true'" before, so thought that because I was able to type inline, therefore the editor was instantiated somehow... but now I'm wondering if the editor is even being applied to my div.
UPDATE 2:
When the page is loaded and the script is initially called, the div does not exist. The editable div is sent into the DOM using AJAX. #Zee left a comment below that made me wonder if there is some other command that should be called in order to apply the editor to that div, so I created a button in the page with the following onclick as a way to test this approach: (adapted from the ajax example)
var editor,html='';config = {};editor=CKEDITOR.appendTo('editable',config, html );
That gives the following error in Chrome:
> Uncaught TypeError: Cannot call method 'equals' of undefined
> + CKEDITOR.tools.extend.getEditor ckeditor.js:101
> b ckeditor.js:252
> CKEDITOR.appendTo ckeditor.js:257
> onclick www.pediatricjunction.com:410
Am I headed in the right direction? Is there another way to programmatically tell CKEditor to apply the editor to a div?
UPDATE 3:
Thanks to #Reinmar I had something new to try. The most obvious way for me to test to see if this was the solution was to put a button above the content editable div that called CKEDITOR.inlineAll() and inline('editable') respectively:
<input type='button' onclick=\"CKEDITOR.inlineAll();\" value='InlineAll'/>
<input type='button' onclick=\"CKEDITOR.inline('editable');\" value='Inline'/>
<input type='button' onclick=\"var editor = CKEDITOR.inline( document.getElementById( 'editable' ) );\" value='getElementById'/>
This returned the same type of error in Chrome for all three buttons, namely:
Uncaught TypeError: Cannot call method 'equals' of undefined ckeditor.js:101
+ CKEDITOR.tools.extend.getEditor ckeditor.js:101
CKEDITOR.inline ckeditor.js:249
CKEDITOR.inlineAll ckeditor.js:250
onclick
UPDATE 4:
Upon further fiddling, I've tracked down the problem being related to json2007.js, which is a script I use which works with Real Simple History (RSH.js). These scripts have the purpose of tracking ajax history, so as I move forward and back through the browser, the AJAX page views is not lost.
Here's the fiddle page: http://jsfiddle.net/jasonsilver/3CqPv/2/

When you want to initialize inline editor there are two ways:
If element which is editable (has contenteditable attribute) exists when page is loaded CKEditor will automatically initialize an instance for it. Its name will be taken from that element's id or it will be editor<number>. You can find editors initialized automatically on this sample.
If this element is created dynamically, then you need to initialize editor on your own.
E.g. after appending <div id="editor" contenteditable="true">X</div> to the document you should call:
CKEDITOR.inline( 'editor' )
or
CKEDITOR.inlineAll()
See docs and docs.
You can find editor initialized this way on this sample.
The appendTo method has different use. You can initialize themed (not inline) editor inside specified element. This method also accepts data of editor (as 3rd arg), when all other methods (CKEDITOR.inline, CKEDITOR.replace, CKEDITOR.inlineAll) take data from the element they are replacing/using.
Update
I checked that libraries you use together with CKEditor are poorly written and cause errors you mentioned. Remove json2007.js and rsh.js and CKEditor works fine.

OK, so I have tracked down the problem.
The library I was using for tracking Ajax history and remembering commands for the back button, called Real Simple History, was using a script called json2007 which was intrusive and extended native prototypes to the point where things broke.
RSH.js is kind of old, and I wasn't using it to it's full potential anyway, so my final solution was to rewrite the essential code I needed for that, namely, a listener that watched for anchor (hash) changes in the URL, then parsed those changes and resubmitted the ajax command.
var current_hash = window.location.hash;
function check_hash() {
if ( window.location.hash != current_hash ) {
current_hash = window.location.hash;
refreshAjax();
}
}
hashCheck = setInterval( "check_hash()", 50 );
'refreshAjax()' was an existing function anyway, so this is actually a more elegant solution than I was using with Real Simple History.
After stripping out the json2007.js script, everything else just worked, and CKEditor is beautiful.
Thanks so much for your help, #Reinmar... I appreciate your patience and effort.

contenteditable and emberjs

I have a contentEditable view that when i focusOut i get the html entered and save it.
But when i remove all text from the contenteditable and then focus out i get the error
Uncaught Error: Cannot perform operations on a Metamorph that is not in the DOM.
Please see this jsfiddle and delete the value1 text and focus out.
http://jsfiddle.net/rmossuk/Q2kAe/8/
Can anyone help with this ?
best regards
Rick

Your EditableView sets up a display binding to its content.value:
<script type="text/x-handlebars" data-template-name="editable">
{{view.content.value}}
</script>
Ember performs its binding-updating magic by wrapping the relevant parts with marker script tags. Have a look at the resulting DOM:
Now you make your view editable. As soon as the user completely deletes the view's contents you will notice that the surrounding script tags are also removed (by the browser). At the moment Ember tries to update the display it won't find the necessary script tags and thus complains.
I don't think that you can make this approach to work reliably with contenteditable, since you won't be able to control the browser leaving the Ember surroundings intact. I guess you will need to take care of the view updating yourself: remove the binding, create a content.value observer and update the DOM explicitly:
App.EditableView = Em.View.extend({
contenteditable: "true",
attributeBindings: ["contenteditable"],
_observeContent: (function() {
this._displayContent();
}).observes('content.value'),
didInsertElement: function() {
this._displayContent();
},
_displayContent: function() {
this.$().html(this.get('content.value'));
},
...
Here is a JSFiddle with a demo of this solution: http://jsfiddle.net/green/BEtzb/2/.
(You could of course also use an Ember.TextField which uses a regular input field and provides all the binding magic, if that's all you need.)

handling events with jWYSIWYG online editor

I'm trying to enable a button when the text in the jWYSIWYG textarea is changed. As far as i know, the jWYSIWYG when invoked, removes the textarea and places an iframe in its place, so $("#my-textarea-id") selector wont return any object. These are the attempts i made, all of them failed:
ATTEMPT 1:
as shown here this code should work, but it does not :(
$("#my-textarea-id").wysiwyg({
event:{
keyup: function(e){
$("#my-button").attr("disabled",false);
}
}
});
ATTEMPT 2:
in following attempts i'm initalizating the jWYSIWYG textareas from a diferent script that applies the .wysiwyg(...) function to all .RTF elements in the page (my textarea has this class).
The new frame that jWYSIWYG places has [old_textarea_id]-wysiwyg-iframe as ID, so i tried this:
$("#my-textarea-id-wysiwyg-iframe").keyup(function(){
$("#my-button").attr('disabled',false);
});
but failed again.
ATTEMPT 3:
The iframe part containing the text of the textarea has the .wysiwyg class. My last attempt was this:
$(".wysiwyg").keyup(function(){
$("#my-button").attr('disabled',false);
});
I have no idea how to handle the events over the jWYSIWYG elements so i ask for your help. Thank you!

this solved my problem
Adding event handler to an iframe using JQuery
jWYSIWYG replaces the textarea for an iframe. The below question's answer tells the appropiate way to bind events to the iframes and this way one can handle events of the RTF online editor.
i think the question can be useful for people so i'll not delete it for now.

Click a button made from div with JavaScript?

In Google+, the button that is used to post a comment is made from a div:
<div role="button" id=":1vq.post" class="d-s-r tk3N6e-e tk3N6e-e-qc" aria-disabled="false" style="-webkit-user-select: none; " tabindex="0">Post comment</div>
I think I can click it with:
document.getElementById(":1vq.post").click();
But it says that the element have no attribute click, and I found that onclick is null. So how could I click the button with JavaScript?

EDIT: After a chat with wong2 who started this question and a lot of failed guesses for what this question is really about (the question is quite poorly written), what they are trying to do is to write a Greasemonkey userscript to make the enter key press the Post Comment button in Google+ streams. Since I don't have an invite into Google+ yet, I can't even see the relevant code so not much I can do. This question is not about putting anything related to Google+ in your own site - it's about trying to use Greasemonkey to modify the behavior of Google's site in your own browser.
Earlier attempts to help:
id=":1vq.post" is not a legal CSS id name. You can't use the ":" character in a selector name. This causes multiple issues because not only is it not a legal character, but it's also a meaningful character in the CSS selector syntax. So, I see that you have two issues.
First, your selector logic is not working. Second, as others have said, you can't just assign to click in this way with plain javascript (e.g. no framework).
If you change your selector logic to work correctly, you can get it to work properly (using jQuery) like this:
<div role="button" id="aPost" class="d-s-r tk3N6e-e tk3N6e-e-qc" aria-disabled="false" style="-webkit-user-select: none; " tabindex="0">Post comment</div>
$("#aPost").click(function() {
alert("I was clicked.");
});
And, you can see it in action in this jsFiddle: http://jsfiddle.net/jfriend00/Yfnc7/. Click Run and then click on the Post Comment.

click() applies only to elements like input and button.
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2651361
onclick would appear in 1990 and not at Google. They should be using addEventListener.
Try to set a breakpoint and see what function is called on click. Then call the function directly.
To trigger a click event handler one can use createEvent plus dispatchEvent.
See example: http://jsfiddle.net/DzVg9/
Note, that Google Plus may actually be using mousedown or mouseup events.

Are you sure you are acurately selecting the button with $(":1vq.post")? Perhaps you need to change it to $("#:1vq.post") or something like that (I'm not sure how JQuery handles the : and . characters).