Helper Function when DOM ready

Question

I am currently writing a blog, and i want a preview window when adding a new article. So i have a autoform, where you can enter the new Article:

<template name = "AddArticle">
<div class = "content-container">
    <div class = "content-wrapper">
        <h2>Add new Article</h2>
        <!--{{> quickForm id="insertArticleForm" type = "insert"}}-->
        {{#autoForm collection="BlogPosts" id="insertArticleForm" type="insert" class = "content-form"}}
            <fieldset>
                {{> afQuickField name="author"}}
                {{> afQuickField name="title"}}
                {{> afQuickField name="description"}}
                {{> afQuickField name="content" rows=15 id = "content-textarea"}}
                <button type="submit" class="btn btn-primary">Insert</button>
            </fieldset>
        {{/autoForm}}
    </div>
</div>
{{> Preview}}

And I have this preview window

<template name = "Preview">
<div class = "content-container preview">
    {{>SlideBlock title = 'Preview <button class ="btn btn-default pull-right">Refresh</button>' content = "PreviewContent"}}
</div>

<template name = "PreviewContent">
<div id = "preview-content" class = "content-wrapper">
    <span>{{{content}}}</span>
</div>

And this Helper function which is supposed to copy the text from the textarea into the preview window

Template.PreviewContent.helpers({
   content: function(){
    var content = $("#content-textarea");
    console.log(content);
    return content;
   } 
});

The problem is, that the current output ist just [object Object]. I believe it may be, that the helper function is performed, when the dom isnt ready yet, but I am not 100% sure.

Edit:

Oh forgot to add it again after trying stuff out. The output with .html() / .val() / .text() all just return undefined.

Or, it could be that a jQuery object is in fact ... wait for it ... an object, and when trying to output complex objects directly in the HTML, they are just stringified by the browser, and the string representation of an object is in fact `[object, Object]` — adeneo, Dec 06 '15 at 19:11
Try `return content.text()` instead, to get something meaningful back — adeneo, Dec 06 '15 at 19:12
Try `console.log(JSON.stringify(content));` That will return the object as a json formatted object tree. — Jos Harink, Dec 06 '15 at 23:06

score 0 · Answer 1 · answered Dec 06 '15 at 19:11

0

[object Object] doesn't mean the DOM wasn't ready, and your API seems to need contents not object itself. So try

var content = $("#content-textarea").html();

or

var content = $("#content-textarea").val();

answered Dec 06 '15 at 19:11

vinayakj

5,591
3
28
48

Oh forgot to add it again after trying stuff out. The output with .html() / .val() / .text() all just return undefined. – Valentin Dec 06 '15 at 19:13
whats on the console? – vinayakj Dec 06 '15 at 19:15
*.html()* and *.val()* return undefined, *.text()* returns an empty string – Valentin Dec 06 '15 at 19:18
whats on the console for `var content = $("#content-textarea"); console.log(content);` is it giving the textarea node? – vinayakj Dec 06 '15 at 19:23
*Object { context: HTMLDocument → AddArticle, selector: "#content-textarea" }* – Valentin Dec 06 '15 at 19:23
do you have a link to the live code – vinayakj Dec 06 '15 at 19:24
I´m sorry no. But i think I added the important code parts – Valentin Dec 06 '15 at 19:25
The added code is template which is dynamic, generating html on the fly, hard to find the issue.. see that the same id is not being used on the other element. – vinayakj Dec 06 '15 at 19:28

Helper Function when DOM ready

1 Answers1