Page 1 of 1

Add text to cursor don't work if html is in echo ?

Posted: Sun Feb 13, 2011 3:20 pm
by Peuplarchie
Good day to everybody !
I'm working on a small to-do list.

I have created a text editor to add no todo to it. Here is the code :

Code: Select all

<script>
//modified version of http://www.webmasterworld.com/forum91/4686.htm
//myField accepts an object reference, myValue accepts the text string to add
function insertAtCursor(myField, myValue) {
 //fixed scroll position
 textAreaScrollPosition = myField.scrollTop;
    //IE support
    if (document.selection) {
        myField.focus();
        //in effect we are creating a text range with zero
        //length at the cursor location and replacing it
        //with myValue
        sel = document.selection.createRange();
        sel.text = myValue;
    //Mozilla/Firefox/Netscape 7+ support
    } else if (myField.selectionStart || myField.selectionStart == '0') {
        myField.focus();
        //Here we get the start and end points of the
        //selection. Then we create substrings up to the
        //start of the selection and from the end point
        //of the selection to the end of the field value.
        //Then we concatenate the first substring, myValue,
        //and the second substring to get the new value.
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;
        myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
        myField.setSelectionRange(endPos+myValue.length, endPos+myValue.length);
    } else {
        myField.value += myValue;
    }
 //fixed scroll position
 myField.scrollTop = textAreaScrollPosition;
 
}
</script>



<form action="ajoutage.php" method="post" name="ajout" id="ajout">
<table cellpadding="0" cellspacing"0" border="0">


<input type="hidden" name="sujet" value="<?PHP echo $_GET['sujet']; ?>"/>
<input type="hidden" name="categorie" value="<?PHP echo $_GET['categorie']; ?>"/>


<tr><td width="85px">Titre : </td><td><input type="text" name="titre"/></td>
    <td></td>
    <td>Ajouteur : </td><td align="right"><input type="text" name="ajouteur" value="<?PHP echo $qui; ?>"/></td>
</tr>
<tr><td width="85px">Sujet : </td><td><input type="text" name="sujet"/></td>
    <td></td>
    <td>Status : </td><td align="right"><input type="text" name="status"/></td>
</tr>
<tr><td width="85px">Cat&eacute;gorie : </td><td><input type="text" name="categorie"/></td>
    <td></td>
    <td>Niveau : </td><td align="right"><input type="text" name="niveau"/></td>
</tr>
<tr><td colspan="5">T&acirc;che :
<a href="#" onClick="insertAtCursor(document.ajout.tache, '<tr><td></td>\n<td>*&0&*</td>\n</tr>\n')">Progress</a> | 
<a href="#" onClick="insertAtCursor(document.ajout.tache, '<tr colspan=3>\n<td></td>\n</tr>\n')">Pleinne</a> | 
<br><textarea name="tache" id="tache" cols="70" rows="20"  wrap="off"  spellcheck="false"></textarea></td>
</tr>


<tr><td colspan="5"><input type="submit" value="Ajouter"/></td></tr>


</table>
</form>


It works very fine, as you can see there is to links that is use to add some text in the textarea, where ever the cursor is.

Where it starts :
I have also created another form to modify the todo's once they are created.
The only problem here is that my 2 links for adding text to the textarea don't work at all, they do nothng, no error shown, no text added.

Here is the code use to modify the todos once created:

Code: Select all

<script type="text/javascript">
//modified version of http://www.webmasterworld.com/forum91/4686.htm
//myField accepts an object reference, myValue accepts the text string to add
function insertAtCursor(myField, myValue) {
 //fixed scroll position
 textAreaScrollPosition = myField.scrollTop;
    //IE support
    if (document.selection) {
        myField.focus();
        //in effect we are creating a text range with zero
        //length at the cursor location and replacing it
        //with myValue
        sel = document.selection.createRange();
        sel.text = myValue;
    //Mozilla/Firefox/Netscape 7+ support
    } else if (myField.selectionStart || myField.selectionStart == '0') {
        myField.focus();
        //Here we get the start and end points of the
        //selection. Then we create substrings up to the
        //start of the selection and from the end point
        //of the selection to the end of the field value.
        //Then we concatenate the first substring, myValue,
        //and the second substring to get the new value.
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;
        myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
        myField.setSelectionRange(endPos+myValue.length, endPos+myValue.length);
    } else {
        myField.value += myValue;
    }
 //fixed scroll position
 myField.scrollTop = textAreaScrollPosition;
 
}
</script>


<?php
$con = mysql_connect("localhost","XXXXXX","XXXXXX");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("XXXXXX", $con);



$id = $_GET['id'];
$qui = $_GET['qui'];
$sujet = $_GET['sujet'];
$categorie = $_GET['categorie'];

$result = mysql_query("SELECT * FROM todo where id='$id'");

while($row = mysql_fetch_array($result))
  {
  echo "

<form action=\"modifiage.php\"  name=\"ajout\" id=\"ajout\" method=\"post\">
<table cellpadding=\"0\" cellspacing\"0\" border=\"0\">
<input type=\"hidden\" name=\"id\" value=\"" . $row['id'] . "\"/>
<input type=\"hidden\" name=\"qui\" value=\"" . $row['ajouteur']  . "\"/>
<input type=\"hidden\" name=\"sujet\" value=\"" . $row['sujet'] . "\"/>
<input type=\"hidden\" name=\"categorie\" value=\"" . $row['categorie'] . "\"/>

<tr><td width=\"85px\">Titre : </td><td><input type=\"text\" name=\"titre\" value=\"" . $row['titre'] . "\"/></td>
    <td></td>
    <td>Ajouteur : </td><td align=\"right\"><input type=\"text\" name=\"ajouteur\"  value=\"" . $row['ajouteur'] . "\"/></td>
</tr>
<tr><td width=\"85px\">Sujet : </td><td><input type=\"text\" name=\"sujet\"  value=\"" . $row['sujet'] . "\"/></td>
    <td></td>
    <td>Status : </td><td align=\"right\"><input type=\"text\" name=\"status\"  value=\"" . $row['status'] . "\"/></td>
</tr>
<tr><td width=\"85px\">Cat&eacute;gorie : </td><td><input type=\"text\" name=\"categorie\"  value=\"" . $row['categorie'] . "\"/></td>
    <td></td>
    <td>Niveau : </td><td align=\"right\"><input type=\"text\" name=\"niveau\"  value=\"" . $row['niveau'] . "\"/></td>
</tr>
<tr>
";

$tache = $row['tache'];
$tache = str_replace("<div class=\"progress-containers\"><div style=\"width:","*&",$tache);
$tache = str_replace("%\"><br></div></div>","&*",$tache);
$onmouse = '<tr onMouseOver="this.className=**highlight**" onMouseOut="this.className=**normal**"><td>';
$tache = str_replace($onmouse,"<tr><td>",$tache);
echo "
    <td colspan=\"5\">T&acirc;che : 


<a href=\"#\" onClick=\"insertAtCursor(document.ajout.tache, '<tr><td></td>\n<td>*&0&*</td>\n</tr>\n')\">Progress</a> | 
<a href=\"#\" onClick=\"insertAtCursor(document.ajout.tache, '<tr colspan=3>\n<td></td>\n</tr>\n')\">Pleinne</a> | 
<br><textarea name=\"tache\"  id=\"tache\" cols=\"70\" rows=\"20\" wrap=\"off\"  spellcheck=\"false\">" . $tache . "</textarea></td>
</tr>
<tr><td colspan=\"5\"><input type=\"submit\" value=\"Modifier\"/></td>

</tr>


</table>
</form>  
";
  }

mysql_close($con);

?>

Re: Add text to cursor don't work if html is in echo ?

Posted: Sun Feb 13, 2011 5:13 pm
by McInfo
In the first script, the HTML is output directly without being parsed by PHP. In the second script, the HTML is echoed after it has been parsed as a double-quoted string by PHP.

So, while this JavaScript

Code: Select all

insertAtCursor(document.ajout.tache, '<tr><td></td>\n<td>*&0&*</td>\n</tr>\n')
arrives at the browser intact from the first script, it arrives like this

Code: Select all

insertAtCursor(document.ajout.tache, '<tr><td></td>
<td>*&0&*</td>
</tr>
')
from the second script. The four occurrences of "\n" have been converted to actual newlines. JavaScript does not understand newlines in strings unless they are represented by the two-character sequence "\n", so the onClick event fails with the syntax error "unterminated string literal" because the JavaScript parser cannot find the second quote which has moved three lines down.

Re: Add text to cursor don't work if html is in echo ?

Posted: Sun Feb 13, 2011 8:44 pm
by Peuplarchie
That was it, that is my bad, not paying enough attention !
Thanks for your time !