Writing a string from a function to a div element using the text() method in jQuery

Question

Included below is the current code that I am using:

<script type="text/javascript" >
  function rightTopSidebarAd() {
    document.write ("Text to test!");  
  }
</script>

<div style="border:3px solid #FF0000" id="rightTopSidebar">

</div>

<script type="text/javascript">
   $j('#rightTopSidebar').text(rightTopSidebarAd());
</script>

Here I have a simple function rightTopSidebarAd() that I would like to return or print the string "Text to test!". I would like the function to result in the content being placed inside the rightTopSidebar element.

Currently it prints "Text to test!" just after the div because that is where the text() method is placed. If I place the jQuery code above, then it is printed at that position.

Note: I can not place the jQuery code inside the div because this is just a demo. In the original page all the div elements will be spread around the webpage and I will have the jQuery functions stored in an external JavaScript file.

EDIT: Guys, my fault: I did show a simple function

  function rightTopSidebarAd() {
    document.write ("Text to test!");  
  }

To illustrate my problem, as you say a simple "return" will fix this problem, but the real function is not so simple, I'm trying to return a OpenX code, please advice me how to do it with this function:

 function rightTopSidebarAd() {
    document.MAX_ct0 ='{clickurl}';

    var m3_u = (location.protocol=='https:'?'https://one.mydomain.com/www/delivery/ajs.php':'http://one.mydomain.com/www/delivery/ajs.php');
    var m3_r = Math.floor(Math.random()*99999999999);
    if (!document.MAX_used) document.MAX_used = ',';
    document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
    document.write ("?zoneid=15&amp;target=_blank");
    document.write ('&amp;cb=' + m3_r);
    if (document.MAX_used != ',') document.write ("&amp;exclude=" + document.MAX_used);
    document.write (document.charset ? '&amp;charset='+document.charset : (document.characterSet ? '&amp;charset='+document.characterSet : ''));
    document.write ("&amp;loc=" + escape(window.location));
    if (document.referrer) document.write ("&amp;referer=" + escape(document.referrer));
    if (document.context) document.write ("&context=" + escape(document.context));
    if ((typeof(document.MAX_ct0) != 'undefined') && (document.MAX_ct0.substring(0,4) == 'http')) {
        document.write ("&amp;ct0=" + escape(document.MAX_ct0));
    }
    if (document.mmm_fo) document.write ("&amp;mmm_fo=1");
    document.write ("'><\/scr"+"ipt>");
    document.write ("<noscript><a href='http://one.mydomain.com/www/delivery/ck.php?n=a8ed906c&amp;cb={random}' target='_blank'><img src='http://one.mydomain.com/www/delivery/avw.php?zoneid=15&amp;cb={random}&amp;n=a8ed906c&amp;ct0={clickurl}' border='0' alt='' /></a></noscript>");
 }

antyrat · Answer 1 · 2012-07-05T17:05:59.917

You need to return your value instead of writing it to document:

function rightTopSidebarAd() {
   return "Text to test!";  
}

According to your question update, your function now should be:

function rightTopSidebarAd() {
    var valueToReturn = '';
    document.MAX_ct0 ='{clickurl}';

    var m3_u = (location.protocol=='https:'?'https://one.mydomain.com/www/delivery/ajs.php':'http://one.mydomain.com/www/delivery/ajs.php');
    var m3_r = Math.floor(Math.random()*99999999999);
    if (!document.MAX_used) document.MAX_used = ',';
    valueToReturn += "<scr"+"ipt type='text/javascript' src='"+m3_u;
    valueToReturn += "?zoneid=15&amp;target=_blank";
    valueToReturn += '&amp;cb=' + m3_r;
    if (document.MAX_used != ',') valueToReturn += "&amp;exclude=" + document.MAX_used;
    valueToReturn += document.charset ? '&amp;charset='+document.charset : (document.characterSet ? '&amp;charset='+document.characterSet : '');
    valueToReturn += "&amp;loc=" + escape(window.location);
    if (document.referrer) valueToReturn += "&amp;referer=" + escape(document.referrer);
    if (document.context) valueToReturn += "&context=" + escape(document.context);
    if ((typeof(document.MAX_ct0) != 'undefined') && (document.MAX_ct0.substring(0,4) == 'http')) {
        valueToReturn += "&amp;ct0=" + escape(document.MAX_ct0);
    }
    if (document.mmm_fo) valueToReturn += "&amp;mmm_fo=1";
    valueToReturn += "'><\/scr"+"ipt>";
    valueToReturn += "<noscript><a href='http://one.mydomain.com/www/delivery/ck.php?n=a8ed906c&amp;cb={random}' target='_blank'><img src='http://one.mydomain.com/www/delivery/avw.php?zoneid=15&amp;cb={random}&amp;n=a8ed906c&amp;ct0={clickurl}' border='0' alt='' /></a></noscript>";
    return valueToReturn;
}

Thanks Antyrat for your answer, but the real function that I use can not be solved with a simple return, I edited the description to show the function, please apology my fault. — Saymon, Jul 05 '12 at 16:57
@Saymon well then you need to rewrite your function using string concatenations, otherwise you can't get expected result. — antyrat, Jul 05 '12 at 16:58
do you have an example how to do the string concatenations to make sure I'm understanding fine. — Saymon, Jul 05 '12 at 17:02
Antyrat: Now the js code is placed in the correct div, but now it is printed as plain text instead execute the code itself, any ideas ? — Saymon, Jul 05 '12 at 17:28

score 1 · Answer 2 · answered Jul 05 '12 at 16:11

1

Simply return text from your function instead of printing it:

<script type="text/javascript" >
  function rightTopSidebarAd() {
    return "Text to test!";  
  }
</script>

<div style="border:3px solid #FF0000" id="rightTopSidebar">

</div>

<script type="text/javascript">
   $j('#rightTopSidebar').text(rightTopSidebarAd());
</script>

answered Jul 05 '12 at 16:11

Zbigniew

27,184
6
59
66

Hi des, thanks for your answer, I edited my description to show the real function that I have the problem, it is more complex than function rightTopSidebarAd() { return "Text to test!"; } so I believe that need more than a return, please take a look, thanks so much again – Saymon Jul 05 '12 at 17:00
My solution wouldn't change, just save all text into variable (instead of `document.write`) and return it all (e.g. `myVariable += '&cb=' + m3_r;`instead of `document.write ('&cb=' + m3_r);`) – Zbigniew Jul 06 '12 at 15:12

Robert · Answer 3 · 2012-07-05T16:17:21.050

1

Your current method attempts to write to the document object, not the #rightTopSidebar.

Try the following update to your function:

function rightTopSidebarAd() {     
    return "Text to test!";     
}

By utilizing return, you are passing the string to the text() method, which will result in the passed string being written to the desired element.

In addition, you will need to call the text() method by either encasing your code in the $(document).ready() function.

<script type="text/javascript">
function rightTopSidebarAd() {
    return "Text to test!";
} 
$(function(){
    $('#rightTopSidebar').text(rightTopSidebarAd());
});
</script>
<div style="border:3px solid #FF0000" id="rightTopSidebar"></div >

edited Jul 05 '12 at 16:17

answered Jul 05 '12 at 16:12

Robert

8,717
2
27
34

It attempts not to write object. It attempt to write `undefined` as his function doesn't return anything. – antyrat Jul 05 '12 at 16:13
@antyrat - 'Right now it prints "Text to test!" just after the div because there is where I have the jquery function, if I place the jquery code above, then is printed there." – Robert Jul 05 '12 at 16:18
Yeah, but in jQuery `text()` it pass `undefined` – antyrat Jul 05 '12 at 16:19
@antyrat - That is incorrect. As the page is loaded and evaluated, the `document.write` function is executed when referenced using the `text()` method. During the execution, the string is written to the document object. Nothing is technically passed as that is not the current implementation, but `undefined` would indicate that an undefined variable was passed, which is not the case. Please see http://jsfiddle.net/jCHsp/. – Robert Jul 05 '12 at 16:29
Thanks RobB for your answer, I just edited the description to show the real function to use, it is more complex that the one I illustrated my example, I thanks an answer for this one :) – Saymon Jul 05 '12 at 16:58

Writing a string from a function to a div element using the text() method in jQuery

3 Answers3