Getting undefined even though it is defined ( JavaScript )

Question

Trying to write a basic jQuery plugin:

HTML:

<textarea>
    <p>Hello World!</p>
</textarea>

jQuery:

$.fn.wysiwyg = function (options) {

    var e = $(this).replaceWith("<iframe>");
    console.log($(this)[0].contentDocument);

};
$("textarea").wysiwyg();

JSFIDDLE DEMONSTRATION

The Problem

var e = $(this).replaceWith("<iframe>");
console.log($(this)[0].contentDocument);

I am getting undefined at the console. If I set an id attribute to this iframe and target that id in console.log method, it works perfectly, but I want to use $(this). What can be done for this?

@C-linkNepal `console.log(this[0].contentDocument);` or `console.log(this.contentDocument);` doesn't works. — Faiz Ahmed, Aug 29 '14 at 05:26
@ArunPJohny Thanks but I know why this is happening. I am asking for the solution. — Faiz Ahmed, Aug 29 '14 at 05:26
Maybe you could try and use 'iframe' in console.log? Here's an example that `finds` `span` with `class` in jquery function. http://stackoverflow.com/questions/3573521/how-to-get-actual-content-of-an-object-after-being-replacewithsomething-in-j — mk117, Aug 29 '14 at 05:43
[jQuery replaceWith find new element](http://stackoverflow.com/questions/6118778/jquery-replacewith-find-new-element) — mk117, Aug 29 '14 at 05:47

score 0 · Answer 1 · answered Aug 29 '14 at 05:27

0

The problem is this will still refer to the textarea so

$.fn.wysiwyg = function (options) {

    var $frame = $("<iframe>")
    var e = $(this).replaceWith($frame);
    console.log($frame[0].contentDocument);

};

Demo: Fiddle

answered Aug 29 '14 at 05:27

Arun P Johny

384,651
66
527
531

Maybe this iframe will collide with other iframes in the document, whatever I do with my plugin ? – Faiz Ahmed Aug 29 '14 at 05:33

score 0 · Answer 2 · answered Aug 29 '14 at 05:56

0

Try This:

$.fn.wysiwyg = function (options) {

    var $e = $("<iframe>");
    this.replaceWith($e);
    console.log($e);

};


$("textarea").wysiwyg();

:: JsFiddle ::

answered Aug 29 '14 at 05:56

mk117

753
2
13
26

Getting undefined even though it is defined ( JavaScript )

HTML:

jQuery:

JSFIDDLE DEMONSTRATION

The Problem

2 Answers2