By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,384 Members | 1,847 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,384 IT Pros & Developers. It's quick & easy.

Script error

P: 2
Hi everybody,

First of all I'm not a java hero but I tried to write my own text editor.
Everything works but only when the existing text need to be re-edited the butttons of my editor seem not to work anymore...

This is the main script :

Expand|Select|Wrap|Line Numbers
  1. <!--
  2.   function storeCaret (txtarea) { 
  3.     if (txtarea.createTextRange) { 
  4.       selectedRange = document.selection.createRange().duplicate();
  5.       selectedInputArea = txtarea;
  6.     } 
  7.   } 
  8.  
  9.   function WrapIE(txtarea, lft, rgt) {
  10.     strSelection = document.selection.createRange().text;
  11.     if (strSelection!='') {
  12.       document.selection.createRange().text = lft + strSelection + rgt;
  13.       var range = document.selection.createRange();
  14.       range.collapse(true);
  15.       range.moveStart('character', lft.length+strSelection.length+rgt.length);
  16.       range.select();
  17.       storeCaret(txtarea)
  18.     }
  19.     txtarea.focus();
  20.   }
  21.  
  22.   function wrapMoz(txtarea, lft, rgt) {
  23.     var selLength = txtarea.textLength;
  24.     var selStart = txtarea.selectionStart;
  25.     var selEnd = txtarea.selectionEnd;
  26.     if (selEnd==1 || selEnd==2) selEnd=selLength;
  27.     var s1 = (txtarea.value).substring(0,selStart);
  28.     var s2 = (txtarea.value).substring(selStart, selEnd)
  29.     var s3 = (txtarea.value).substring(selEnd, selLength);
  30.     txtarea.value = s1 + lft + s2 + rgt + s3;
  31.     txtarea.focus();
  32.     var cPos=s1.length+(lft.length+s2.length+rgt.length);
  33.     txtarea.setSelectionRange(cPos,cPos);
  34.   }
  35.  
  36.   function wrapTag(txtarea, lft, rgt) {
  37.       lft = unescape(lft);
  38.       rgt = unescape(rgt);
  39.     if (document.all) {
  40.       WrapIE(txtarea, lft, rgt);
  41.     }
  42.     else if (document.getElementById) {
  43.       wrapMoz(txtarea, lft, rgt);
  44.     }
  45.   }
  46.  
  47.   function wrapWithLink(txtarea) {
  48.     var my_link = prompt('URL:','http://');
  49.     if (my_link != null) {
  50.       lft='<a href="' + my_link + '">';
  51.       rgt='</a>';
  52.       wrapTag(txtarea, lft, rgt);
  53.     }
  54.     return;
  55.   }
  56.  
  57.   function insertIE (txtarea, text) {
  58.     if (txtarea.createTextRange && selectedRange) { 
  59.       var caretPos = selectedRange; 
  60.       caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text+caretPos.text + ' ' : text+caretPos.text;
  61.     } else {
  62.       txtarea.value = txtarea.value + text; 
  63.     }
  64.     txtarea.focus();
  65.     return;
  66.   }
  67.  
  68.  
  69.  
  70.   function insertMoz(txtarea , lft) {
  71.     var rgt='';
  72.     wrapTag(txtarea, lft, rgt);
  73.     return;
  74.   }
  75.  
  76.   function insertTag(txtarea , lft) {
  77.     if (document.all) {
  78.       insertIE(txtarea, lft);
  79.     }
  80.     else if (document.getElementById) {
  81.       insertMoz(txtarea, lft);
  82.     }
  83.   }
  84.  
  85.   function insertImage(txtarea) {
  86.     var my_link = prompt('IMG URL:','http://');
  87.     if (my_link != null) {
  88.       lft='<img src="' + my_link + '" />';
  89.       insertTag(txtarea, lft);
  90.     }
  91.     return;
  92.   }
  93. function mouseover(el) {
  94.   el.className = 'raise';
  95. }
  96.  
  97. function mouseout(el) {
  98.   el.className = 'teksteditorImg';
  99. }
  100.  
  101. function mousedown(el) {
  102.   el.className = 'teksteditorImgPress';
  103. }
  104.  
  105. function mouseup(el) {
  106.   el.className = 'raise';
  107. }
  108.  
  109.  
  110. //-->
  111.  

This is the editor that works :
[HTML]<table width="100%" border="0" cellpadding="0" cellspacing="0" class="ContentTable_Content_SubTable">
<tr>
<td><form action="nieuwsManagement_inhoud.php" method="post" enctype="multipart/form-data" name="form1">
<p>
Tekst :<br>
<img src="../images/bttns/teksteditor/bttn_bold_01.gif" alt="Vet" width="18" height="18" class="teksteditorImg" title="Highlight some text and click for bold" onclick="wrapTag(this.parentNode.parentNode.elemen ts['txt'], '<b>', '</b>');" onmousedown="mousedown(this);" onmouseup="mouseup(this);" onmouseover="mouseover(this);" onmouseout="mouseout(this);">
<img src="../images/bttns/teksteditor/bttn_italic_01.gif" width="18" height="18" title="Highlight some text and click for italic" class="teksteditorImg" onmouseover="mouseover(this);" onmouseout="mouseout(this);" onmousedown="mousedown(this);" onmouseup="mouseup(this);" onclick="wrapTag(this.parentNode.parentNode.elemen ts['txt'], '<i>', '</i>')">
<img src="../images/bttns/teksteditor/bttn_underlined_01.gif" width="18" height="18" title="Highlight some text and click for underlined" class="teksteditorImg" onmouseover="mouseover(this);" onmouseout="mouseout(this);" onmousedown="mousedown(this);" onmouseup="mouseup(this);" onclick="wrapTag(this.parentNode.parentNode.elemen ts['txt'], '<u>', '</u>')">
<img src="../images/bttns/teksteditor/bttn_alignCenter_01.gif" width="18" height="18" title="Highlight some text and click to center" class="teksteditorImg" onmouseover="mouseover(this);" onmouseout="mouseout(this);" onmousedown="mousedown(this);" onmouseup="mouseup(this);" onclick="wrapTag(this.parentNode.parentNode.elemen ts['txt'], '<div align=%22center%22>', '</div>')">
<img src="../images/bttns/teksteditor/bttn_alignRight_01.gif" width="18" height="18" title="Highlight some text and click to right align" class="teksteditorImg" onmouseover="mouseover(this);" onmouseout="mouseout(this);" onmousedown="mousedown(this);" onmouseup="mouseup(this);" onclick="wrapTag(this.parentNode.parentNode.elemen ts['txt'], '<div align=%22right%22>', '</div>')">
<img src="../images/bttns/teksteditor/bttn_blockQuote_01.gif" width="18" height="18" title="Highlight some text and click for a blockquote" class="teksteditorImg" onmouseover="mouseover(this);" onmouseout="mouseout(this);" onmousedown="mousedown(this);" onmouseup="mouseup(this);" onclick="wrapTag(this.parentNode.parentNode.elemen ts['txt'], '<blockquote>', '</blockquote>')">
<img src="../images/bttns/teksteditor/bttn_list_01.gif" width="18" height="18" title="Highlight some text and click for a bulleted list" class="teksteditorImg" onmouseover="mouseover(this);" onmouseout="mouseout(this);" onmousedown="mousedown(this);" onmouseup="mouseup(this);" onclick="wrapTag(this.parentNode.parentNode.elemen ts['txt'], '<li>', '</li>')">
<img src="../images/bttns/teksteditor/bttn_horizRule_01.gif" width="18" height="18" title="Insert a horizontal rule" class="teksteditorImg" onmouseover="mouseover(this);" onmouseout="mouseout(this);" onmousedown="mousedown(this);" onmouseup="mouseup(this);" onclick="insertTag(this.parentNode.parentNode.elem ents['txt'],'<hr />');">
<img src="../images/bttns/teksteditor/bttn_link_01.gif" width="18" height="18" title="Highlight some text and click to add a link" class="teksteditorImg" onmouseover="mouseover(this);" onmouseout="mouseout(this);" onmousedown="mousedown(this);" onmouseup="mouseup(this);" onclick="wrapWithLink(this.parentNode.parentNode.e lements['txt']);">

<textarea wrap="soft" name="txt" cols="85" rows="10" class="formfield" id="txt" onSelect="storeCaret(this);" onClick="storeCaret(this);" onKeyUp="storeCaret(this);"></textarea>
</p>
<p align="center">
<input name="new" type="hidden" value="active"><input name="m" type="hidden" value="<?php echo $m?>"><input name="s" type="hidden" value="<?php echo $s?>"><input name="imageField" type="image" src="../images/bttns/bttn_OK_70x20_01.jpg" width="70" height="20" border="0">
</p>
</form></td>
</tr>
</table>
[/HTML]

The Error part follows in the next window...
Oct 4 '05 #1
Share this Question
Share on Google+
2 Replies


P: 2
Now... The user sends this text into a database. When he wants to edit the existing text he clicks a button and a layer, that was hidden, appears. The layer shows the same kind of editor with the existing text in it.
Everything works... but my java buttons don't...

This is the layer with the editor that doesn't work properly :
Expand|Select|Wrap|Line Numbers
  1. <div id="edittekst<?php echo $paragr['artikel_id']?>" style="position:absolute; width:400px; height:100px; z-index:4; visibility: hidden; left:300px;" class="layer">
  2.   <table width="400" border="0" cellspacing="0" cellpadding="0">
  3.     <tr>
  4.       <td width="394" class="layer_TableHeader">Wijzig de tekst </td>
  5.       <td class="layer_TableHeader" style="margin-left:0px;"><div align="center"><a href="#"><img src="../images/bttns/bttn_closeLayer_01.jpg" alt="Sluiten" width="30" height="30" border="0" onClick="MM_showHideLayers('edittekst<?php echo $paragr['artikel_id']?>','','hide')"></a></div></td>
  6.     </tr>
  7.     <tr>
  8.       <td colspan="2" class="layer_TableContent"><form action="nieuwsManagement_inhoud.php" method="post" enctype="multipart/form-data" name="form<?php echo $submenus['submenu_id']?>b">
  9.         &nbsp;<br>
  10.         <table width="380" border="0" cellpadding="0" cellspacing="0" class="ContentTable_Content_SubTable">
  11.           <tr>
  12.             <td>Wijzig Titel</td>
  13.             <td>: 
  14.             <input name="titel" type="text" class="formfield" value="<?php echo $paragr['titel']?>" size="40" maxlength="60"></td>
  15.           </tr>
  16.           <tr>
  17.             <td colspan="2">Wijzig de tekst :<br>
  18.              <img src="../images/bttns/teksteditor/bttn_bold_01.gif" alt="Vet" width="18" height="18" class="teksteditorImg" title="Highlight some text and click for bold"  onmousedown="mousedown(this);" onmouseup="mouseup(this);"  onmouseover="mouseover(this);" onmouseout="mouseout(this);"  onclick="wrapTag(this.parentNode.parentNode.elements['txtnew'], '<b>', '</b>');">
  19.              <img src="../images/bttns/teksteditor/bttn_italic_01.gif" width="18" height="18"  title="Highlight some text and click for italic" class="teksteditorImg"  onmouseover="mouseover(this);" onmouseout="mouseout(this);"  onmousedown="mousedown(this);" onmouseup="mouseup(this);"  onclick="wrapTag(this.parentNode.parentNode.elements['txtnew'], '<i>', '</i>')">
  20.              <img src="../images/bttns/teksteditor/bttn_underlined_01.gif" width="18" height="18"  title="Highlight some text and click for underlined" class="teksteditorImg"  onmouseover="mouseover(this);" onmouseout="mouseout(this);"  onmousedown="mousedown(this);" onmouseup="mouseup(this);"  onclick="wrapTag(this.parentNode.parentNode.elements['txtnew'], '<u>', '</u>')">
  21.              <img src="../images/bttns/teksteditor/bttn_alignCenter_01.gif" width="18" height="18"  title="Highlight some text and click to center" class="teksteditorImg"  onmouseover="mouseover(this);" onmouseout="mouseout(this);"  onmousedown="mousedown(this);" onmouseup="mouseup(this);"  onclick="wrapTag(this.parentNode.parentNode.elements['txtnew'], '<div align=%22center%22>', '</div>')">
  22.              <img src="../images/bttns/teksteditor/bttn_alignRight_01.gif" width="18" height="18"  title="Highlight some text and click to right align" class="teksteditorImg"  onmouseover="mouseover(this);" onmouseout="mouseout(this);"  onmousedown="mousedown(this);" onmouseup="mouseup(this);"  onclick="wrapTag(this.parentNode.parentNode.elements['txtnew'], '<div align=%22right%22>', '</div>')">
  23.              <img src="../images/bttns/teksteditor/bttn_blockQuote_01.gif" width="18" height="18"  title="Highlight some text and click for a blockquote" class="teksteditorImg"  onmouseover="mouseover(this);" onmouseout="mouseout(this);"  onmousedown="mousedown(this);" onmouseup="mouseup(this);"  onclick="wrapTag(this.parentNode.parentNode.elements['txtnew'], '<blockquote>', '</blockquote>')">
  24.              <img src="../images/bttns/teksteditor/bttn_list_01.gif" width="18" height="18"  title="Highlight some text and click for a bulleted list"  class="teksteditorImg" onmouseover="mouseover(this);"  onmouseout="mouseout(this);" onmousedown="mousedown(this);"  onmouseup="mouseup(this);"  onclick="wrapTag(this.parentNode.parentNode.elements['txtnew'], '<li>', '</li>')">
  25.              <img src="../images/bttns/teksteditor/bttn_horizRule_01.gif" width="18" height="18"  title="Insert a horizontal rule" class="teksteditorImg"  onmouseover="mouseover(this);" onmouseout="mouseout(this);"  onmousedown="mousedown(this);" onmouseup="mouseup(this);"  onclick="insertTag(this.parentNode.parentNode.elements['txtnew'],'<hr />');">
  26.              <img src="../images/bttns/teksteditor/bttn_link_01.gif" width="18" height="18"  title="Highlight some text and click to add a link" class="teksteditorImg"  onmouseover="mouseover(this);" onmouseout="mouseout(this);"  onmousedown="mousedown(this);" onmouseup="mouseup(this);"  onclick="wrapWithLink(this.parentNode.parentNode.elements['txtnew']);">
  27.  
  28.             <textarea wrap="soft" name="txtnew" cols="85" rows="15" class="formfield" id="txtnew"  onSelect="storeCaret(this);" onClick="storeCaret(this);" onKeyUp="storeCaret(this);"><?php echo $paragr['tekst']?></textarea></td>
  29.           </tr>
  30.           <tr>
  31.             <td width="74"><div align="center">
  32.               </div></td>
  33.             <td width="304"><input name="m" type="hidden" value="<?php echo $m?>">
  34.               <input name="s" type="hidden" value="<?php echo $s?>">
  35.               <input name="wijzig_tekst" type="hidden" id="wijzig_tekst" value="<?php echo $paragr['artikel_id']?>">
  36.                &nbsp;
  37.                <input name="imageField" type="image" src="../images/bttns/bttn_OK_70x20_01.jpg" width="70" height="20" border="0">
  38. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </td>
  39.           </tr>
  40.         </table>
  41.         <br>&nbsp;
  42.       </form></td>
  43.     </tr>
  44.   </table>
  45. </div>

I hope somebody can help me...


Thanks in advance.

Regads,
Erwin
Oct 4 '05 #2

P: 18
First off, I think this is in the wrong forum. This is JavaScript, not Java - there is a HUGE difference.

But, here is an answer anyway:

In the editor that works, this.parentNode.parentNode refers to the form tag - which is the parent of the textarea named "txt". This code works.

The problem is in the other half of your code. Here, this.parentNode.parentNode refers to the tr element - which is NOT the parent of the textarea named "newtxt".

You would do better to use document.getElementByID(), since your textareas use the id attribute. This would keep you from having to crawl up the DOM tree to find your textarea.
Oct 5 '05 #3

Post your reply

Sign in to post your reply or Sign up for a free account.