Get javascript active when posting php ajax result through javascript

Question

I have this html form:

    <form method="post">
        <input type="radio" name="news" id="new" value="nuova" onchange="newstype(this.id);">Nuova News
        <input type="radio" name="news" id="mod" value="modifica" onchange="newstype(this.id);">Modifica News

        <select name="news" id="modifica" style="display:none" onchange="shownews(this.value)">
            <?php
                include "../flock/sql.php";
                $connection = new mysqli($host, $user, $pw, $db) or die("Impossibile connettersi"); 
                $querylistanews = "SELECT * FROM NEWS ORDER BY id DESC";
                $listanews = $connection->query($querylistanews);                       
                    print '<option>Seleziona una news...</option>';                     
                while ($newsdamodificare = $listanews->fetch_object()) {
                    print '<option value="'.$newsdamodificare->id.'">'.$newsdamodificare->data." - ".$newsdamodificare->title.'</option>';
                }
                $listanews->close();
                $connection->close;      
            ?>    
        </select>
    </form>

this javascript:

function newstype(param) {
    if(param == 'new') {
        document.getElementById('crea').style.display = 'inline';
        document.getElementById('modifica').style.display = 'none';
        document.getElementById('newsdamodificare').style.display = 'none';
    } else {
        if(param == 'mod') {
        document.getElementById('crea').style.display = 'none';
        document.getElementById('modifica').style.display = 'inline';
        document.getElementById('newsdamodificare').style.display = 'inline';
        }
    }
}

function shownews(str) {

    if (str=="") {
      document.getElementById("newsdamodificare").innerHTML="";
      return;
    } 

    if (window.XMLHttpRequest) {        // codice per IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();     
    } else {                            // codice per IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function() {
      if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById("newsdamodificare").innerHTML=xmlhttp.responseText;
      }
    }

xmlhttp.open("GET","modifica.php?news="+str,true);
xmlhttp.send();
}

and this php:

<head>
<script type="text/javascript" src="../editor/ckeditor.js"></script>
<script type="text/javascript" src="/js/charscounter.js"></script>
</head>

<?php
$news=$_GET["news"];
include "../flock/sql.php";

$connection = new mysqli($host, $user, $pw, $db) or
  die('Impossibile connettersi al database: ' . mysql_error());

$newsdaldatabase="SELECT * FROM NEWS WHERE id = '".$news."'";

$result = $connection->query($newsdaldatabase);

$count = mysqli_num_rows($result);

if($count==1){
    while($dati = mysqli_fetch_array($result)) {
      $id = $dati['id'];
      $data = $dati['data'];
      $title = $dati['title'];
      $body = $dati['body'];
    }
} else {
    die('Errore del sistema. Più di una news selezionate: ' . mysql_error());
}
mysqli_close($connection);
?>

<div class="normal" id="modifica">
<table style="width:100%;height:100%;">
<tr>
<td colspan="3" border="0">
    <strong class="confirm">Modifica news</strong>
</td>
</tr>

<tr>
<td width="107" align="right">
    <strong>Data</strong>
</td>
<td colspan="2">
<form name="modificanews" method="post" action="italiano.php?modifica=yes">
    <input name="idmodificanews" type="text" style="display:none" value="<?php echo $id ?>">
    <input name="datanewsmodificata" type="text" maxlength="10" size="8" value="<?php echo $data ?>"> gg.mm.aaaa
</td>
 </tr>

<tr>
<td align="right">
    <strong>Titolo</strong>
</td>
<td width="360">
    <input name="modificatitolo" type="text" maxlength="50" size="50" value="<?php echo $title ?>" onKeyPress="return taLimit(this)" onKeyUp="return taCount(this,'myCounter')">
</td>
<td width="522">
          <b><span id=myCounter>50</span></b> caratteri rimanenti per il titolo</font>
</td>
</tr>

<tr>
<td colspan="3">
    <textarea name="modificatesto"><?php echo $body ?></textarea>
        <script>
            CKEDITOR.replace('modificatesto');
        </script>
</td>
</tr>

All is working quite well, except one thing: when I select the news to edit, the content is from the server is correcly posted on the php, but on the HTML the scripts in the php (CKEDITOR and Char Cunter) are not active.

So, on my HTML, were the user will edit the news, i get only a simple textarea instead of the CKEDITOR, etc.

Is there a way to fix that? Can you help me somehow?

Thank you!

EDIT: I solved by myselft the problem. See solution as answer.

Answer 1

For those who have the same question:

I solved my problem in the following way: on javascript add a new row:

document.getElementById("newsdamodificare").action=CKEDITOR.replace('modificatesto');

between this 2 lines:

document.getElementById("newsdamodificare").innerHTML=xmlhttp.responseText;
NEW LINE TO INSERT HERE
}

And remove from the php these rows:

<script>
    CKEDITOR.replace('modificatesto');
</script>

Hope this helps!

Answer 2

You're trying to select your textarea by it's name , but CKEDITOR.replace('modificatesto'); is looking for an ID .

Try

<textarea id="modificatesto"><?php echo $body ?></textarea>
    <script>
        CKEDITOR.replace('modificatesto');
    </script>

Get javascript active when posting php ajax result through javascript

Question

2 answers

solution1
1 ACCPTED 2013-01-28 02:43:29

solution2
0 2013-01-27 07:23:56

Get javascript active when posting php ajax result through javascript

Question

2 answers

solution1 1 ACCPTED 2013-01-28 02:43:29

solution2 0 2013-01-27 07:23:56

solution1
1 ACCPTED 2013-01-28 02:43:29

solution2
0 2013-01-27 07:23:56