current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote -1 down vote favorite

I have one form, textarea & one button. On button click I call one php function. From that I call service to get data as per value inserted in textbox. function code is 

function fire_btn(btnvalue) {
    if(btnvalue=="Create Widget") {
        var dataString =  $("form").serialize();
        receiveReq.open("GET", '<?php echo $this->config->item('url');?>getData/retriveData?&'+dataString);
        receiveReq.onreadystatechange = getdata; 
        receiveReq.send(null);
        document.getElementById('btnsave').value="Save Changes";
    }
}

function getdata() {
    if (receiveReq.readyState == 4 ) {
        document.getElementById('code').innerHTML = receiveReq.responseText;
        document.getElementById('codebox').focus();
    }
}

Here Id "code" is my div id & Id "codebox" is d of my textarea.

Now in retriveData data function of php I am doing this

$x = "<input type='hidden' value='".$this->db->insert_id()."' name='hdn' id='hdn' />";
        $x .= "<textarea id='codebox' readonly style='cursor:auto;min-width: 643px; min-height: 112px;max-width: 643px;max-height: 112px;margin-left:5px;'><!--Code Starts-->&lt;script type='text/javascript'&gt;";
        $x .= "wID= '".$this->db->insert_id()."';";
        $x .= "document.write('&lt;div id=myads".$this->db->insert_id()."&gt;&lt;/div&gt;');";

        $x .="document.write('&lt;scr'+'ipt type=";
        $x .='"text/JavaScript" src="'.$this->config->item('url').'allJs/myJs.js">';
        $x .=  "&lt;/scr'+'ipt&gt;');&lt;/script&gt;<!--Code Ends--></textarea>";
        echo $x;

myJs.js is 

document.write('<link rel="stylesheet" type="text/css" href="style.css">');
document.write('<script type="text/javascript" src="http://myDomain.com/Create.js"></script>');

var myElement = document.getElementById('myads'+wID);
var JavaScriptCode = document.createElement("script");
JavaScriptCode.setAttribute('type', 'text/javascript');
JavaScriptCode.setAttribute("src", 'http://myDomain.com/content/'+wID);
document.getElementById('myads'+wID).appendChild(JavaScriptCode);

Now the problem is that in textarea text supposed to show is 

<!--Code Starts--><div id='myads28'></div><script async type='text/JavaScript' charset='utf-8' src='http://myDomain.com/content/28'></script><!--Code Ends-->

this is properly shown when i test it in local machine

but when I see it on my hosted server it shows something like this.

<!--Code Starts--><script type='text/javascript'> wID= '28';document.write('<div id=myads28></div>');document.write('<scr'+'ipt type="text/JavaScript" src="http://myDomain.com/Create.js"></scr'+'ipt>');</script><!--Code Ends-->

I am not able to understand that what is happening.

can any one help me to solve it.

share|improve this question
 
eval(document.getElementById('codebox').value); done and done ;) –  rlemon Aug 28 '13 at 19:02
 
where to put this ? –  vaibhav shah Aug 28 '13 at 19:03
add comment

2 Answers

up vote 0 down vote

You're putting the javascript directly into the textarea, so it will show exactly what the script is instead of executing it, kind of like a notepad part of the site. If you want the script to write to the page, put it outside of the textarea. You can also use the PHP to put the div on the site instead of making javascript do several document.write()'s, freeing up resources on the client.

share|improve this answer
 
I am using this tutorial codeproject.com/Articles/81355/… I just want to show generated code in textarea –  vaibhav shah Aug 27 '13 at 20:11
add comment
up vote 0 down vote

Just looking at your variable $x, here's my suggestions.

    $id = $this->db->insert_id();
    $rootURL = $this->config->item('url');
    $x = <<<EOD
<style>
    #codeBox {
        cursor: auto;
        min-width: 643px;
        min-height: 112px;
        max-width: 643px;
        max-height: 112px;
        margin-left: 5px;
    }
</style>
<input type="hidden" value="$id" name="hdn" id="hdn" />
<textarea id="codebox" readonly>
    <div id="myads{$id}"></div>
</textarea>
<script src="{$rootURL}allJs/myJs.js"</script>
EOD;
    echo $x;

Double check me on id="myads{$id}. Your code would have produced id="myads"1, not id="myads1", as I believe you wanted.

I mainly improved style, and moved the <script ...> outside of the <textarea>.

document.getElementById('codeBox').appendChild(JavaScriptCode);

In myJs.js, you are adding the element as a child to <div id="myads">, so it would look like
<div id="myads"><script></script></div>, not
<div></div><script></script>.

Instead, I've changed it to add the element to <div id="codebox">.

I also would suggest that, if you are hardcoding the contents of <div id="codebox">, that you modify $x with the changes below, as you don't need Javascript to insert the <script>.

<textarea id="codebox" readonly>
    <div id="myads{$id}"></div>
    <script async type='text/JavaScript' charset='utf-8' src='http://myDomain.com/content/{$id}'></script>
</textarea>

Let me know if you still have problems.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.