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

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
User avatar
Peuplarchie
Forum Contributor
Posts: 148
Joined: Sat Feb 04, 2006 10:49 pm

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

Post 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);

?>
User avatar
McInfo
DevNet Resident
Posts: 1532
Joined: Wed Apr 01, 2009 1:31 pm

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

Post 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.
User avatar
Peuplarchie
Forum Contributor
Posts: 148
Joined: Sat Feb 04, 2006 10:49 pm

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

Post by Peuplarchie »

That was it, that is my bad, not paying enough attention !
Thanks for your time !
Post Reply