Clickable smilies after a WYSIWIG Implementation

[Archbob]

Hi,I've just implemented a WYSIWYG into one of my PHP applications but now the clickable smilies don't work.

 

 

 

 

 

I had this code before:

 

 

 

print "<textarea rows='6' name='post' cols='45'></textarea><br><br>";

    print "<input type='checkbox' name='nosmiley'> Disable Smilies<br><br>";

    print "<input type='submit' name='reply' value='reply'>";

    print "</form>";

    print "Clickable Smilies<br>";

    print "<a onClick=\"addSmiley('')\"><img src='images/smile.gif'></a> "; 

    print "<a onClick=\"addSmiley(':blush')\"><img src='images/blush.gif'></a> ";

    print "<a onClick=\"addSmiley(':angry')\"><img src='images/angry.gif'></a> ";

    print "<a onClick=\"addSmiley(':shocked')\"><img src='images/shocked.gif'></a> ";

    print "<a onClick=\"addSmiley(':cool')\"><img src='images/cool.gif'></a> ";

    print "<a onclick=\"addSmiley(':{blink}')\"><img src='images/winking.gif'></a>";

    print "<A onclick=\"addSmiley('{clover}')\"><img src='images/clover.gif'></a>";

    print "<a onclick=\"addSmiley(':[glasses]')\"><img src='images/glasses.gif'></a>";

    print "<a onclick=\"addSmiley(':[barf]')\"><img src='images/barf.gif'></a>";

    print "<a onclick=\"addSmiley(':[reallymad]')\"><img src='images/mad.gif'></a><br>";

    print "<a onclick=\"addSmiley(':[normal]')\"><img src='../smiley/normal.gif'></a>";

    print "<a onclick=\"addSmiley(':[inqu]')\"><img src='../smiley/inquisitive.gif'></a>";

    print "<a onclick=\"addSmiley(':[happyinlove]')\"><img src='../smiley/happyinlove.gif'></a>";

    print "<a onclick=\"addSmiley(':[sadinlove]')\"><img src='../smiley/sadinlove.gif'></a>";

    print "<a onclick=\"addSmiley(':[normalinlove]')\"><img src='../smiley/normalaboutlove.gif'></a><br>";

    print "<a onclick=\"addSmiley(':[bangry]')\"><img src='../smiley/angry.jpg'></a>";

    print "<a onclick=\"addSmiley(':[grin]')\"><img src='../smiley/grin.jpg'></a>";

    print "<a onclick=\"addSmiley(':[sadness]')\"><img src='../smiley/sadness.jpg'></a>";

    print "<a onclick=\"addSmiley(':[smilies]')\"><img src='../smiley/smiles.jpg'></a>";

    print "<a onclick=\"addSmiley(':[winking]')\"><img src='../smiley/winking.jpg'></a><br>";





    print "<script language=\"JavaScript\" type=\"text/javascript\">\n";

    print "function addSmiley(textToAdd)\n";

    print "{\n";

    print "document.form.post.value += textToAdd;";

    print "document.form.post.focus();\n";

    print "}\n";

    print "</script>\n";

 

 

 

 

 

But now I have this:

 

 

 

print "<textarea id='post' rows='6' name='post' cols='45'></textarea><br><br>";

    print '<script language="JavaScript">';

    print "generate_wysiwyg('post')";

    print "</script>";

    print "<input type='checkbox' name='nosmiley'> Disable Smilies<br><br>";

    print "<input type='submit' name='submitpost' value='Post'>";

    print "</form><br><br>";

    print "Clickable Smilies<br>";

    print "<a onClick=\"addSmiley('')\"><img src='images/smile.gif'></a> "; 

    print "<a onClick=\"addSmiley(':blush')\"><img src='images/blush.gif'></a> ";

    print "<a onClick=\"addSmiley(':angry')\"><img src='images/angry.gif'></a> ";

    print "<a onClick=\"addSmiley(':shocked')\"><img src='images/shocked.gif'></a> ";

    print "<a onClick=\"addSmiley(':cool')\"><img src='images/cool.gif'></a> ";

    print "<a onclick=\"addSmiley(':{blink}')\"><img src='images/winking.gif'></a>";

    print "<A onclick=\"addSmiley('{clover}')\"><img src='images/clover.gif'></a>";

    print "<a onclick=\"addSmiley(':[glasses]')\"><img src='images/glasses.gif'></a>";

    print "<a onclick=\"addSmiley(':[barf]')\"><img src='images/barf.gif'></a>";

    print "<a onclick=\"addSmiley(':[reallymad]')\"><img src='images/mad.gif'></a><br>";

    print "<a onclick=\"addSmiley(':[normal]')\"><img src='../smiley/normal.gif'></a>";

    print "<a onclick=\"addSmiley(':[inqu]')\"><img src='../smiley/inquisitive.gif'></a>";

    print "<a onclick=\"addSmiley(':[happyinlove]')\"><img src='../smiley/happyinlove.gif'></a>";

    print "<a onclick=\"addSmiley(':[sadinlove]')\"><img src='../smiley/sadinlove.gif'></a>";

    print "<a onclick=\"addSmiley(':[normalinlove]')\"><img src='../smiley/normalaboutlove.gif'></a><br>";

    print "<a onclick=\"addSmiley(':[bangry]')\"><img src='../smiley/angry.jpg'></a>";

    print "<a onclick=\"addSmiley(':[grin]')\"><img src='../smiley/grin.jpg'></a>";

    print "<a onclick=\"addSmiley(':[sadness]')\"><img src='../smiley/sadness.jpg'></a>";

    print "<a onclick=\"addSmiley(':[smilies]')\"><img src='../smiley/smiles.jpg'></a>";

    print "<a onclick=\"addSmiley(':[winking]')\"><img src='../smiley/winking.jpg'></a><br>";

    print "<script language=\"JavaScript\" type=\"text/javascript\">\n";

    print "function addSmiley(textToAdd)\n";

    print "{\n";

    print "document.form.post.value += textToAdd;";

    print "document.form.post.focus();\n";

    print "}\n";

    print "</script>\n";

 

 

 

It gives me a "focus not available or invisible error" when I try to click on the smilies, anybody know why?

 

[fenway]

You can't always give focus, especially to something hidden.

[Archbob]

So um, how would I add clickable smilies to my textarea then?

[fenway]

You can... but you're trying to give focus to the form itself.

[Archbob]

So how would I add clickable smilies to the above mentioned textarea?

[fenway]

Why don't you post the entire script after it's generated, not the PHP version? I already got confused because I didn't see the open form tag...

[Archbob]

print "<form action='newtopic.php?forumID=$forumID' method='post' name='form'>";
    if(isset($_SESSION['user']))
    {
      print "<input type='hidden' name='name' value=$getid3[userID]><br>";
      print "<b>Name:</b> $user<br>"; 
    }
    else
    { 
      $getguest="SELECT * FROM b_users WHERE username='Guest'";
      $getguest2=mysql_query($getguest);
      $getguest3=mysql_fetch_array($getguest2);
      print "<input type='hidden' name='name' value='$getguest3[userID]'><br>";
      print "<b>Name:</b> Guest<br>";
    }    
    print "<b>Topic:</b><br>";
    print "<input type='text' name='title' length='15'><br><br>";
    print "<b>Message:</b><br><br>";   
    print "<textarea id='post' rows='6' name='post' cols='45'></textarea><br><br>";
    print '<script language="JavaScript">';
    print "generate_wysiwyg('post')";
    print "</script>";
    print "<input type='checkbox' name='nosmiley'> Disable Smilies<br><br>";
    print "<input type='submit' name='submitpost' value='Post'>";
    print "</form><br><br>";
    print "Clickable Smilies<br>";
    print "<a onClick=\"addSmiley('')\"><img src='images/smile.gif'></a> ";	
    print "<a onClick=\"addSmiley(':blush')\"><img src='images/blush.gif'></a> ";
    print "<a onClick=\"addSmiley(':angry')\"><img src='images/angry.gif'></a> ";
    print "<a onClick=\"addSmiley(':shocked')\"><img src='images/shocked.gif'></a> ";
    print "<a onClick=\"addSmiley(':cool')\"><img src='images/cool.gif'></a> ";
    print "<a onclick=\"addSmiley(':{blink}')\"><img src='images/winking.gif'></a>";
    print "<A onclick=\"addSmiley('{clover}')\"><img src='images/clover.gif'></a>";
    print "<a onclick=\"addSmiley(':[glasses]')\"><img src='images/glasses.gif'></a>";
    print "<a onclick=\"addSmiley(':[barf]')\"><img src='images/barf.gif'></a>";
    print "<a onclick=\"addSmiley(':[reallymad]')\"><img src='images/mad.gif'></a><br>";
    print "<a onclick=\"addSmiley(':[normal]')\"><img src='../smiley/normal.gif'></a>";
    print "<a onclick=\"addSmiley(':[inqu]')\"><img src='../smiley/inquisitive.gif'></a>";
    print "<a onclick=\"addSmiley(':[happyinlove]')\"><img src='../smiley/happyinlove.gif'></a>";
    print "<a onclick=\"addSmiley(':[sadinlove]')\"><img src='../smiley/sadinlove.gif'></a>";
    print "<a onclick=\"addSmiley(':[normalinlove]')\"><img src='../smiley/normalaboutlove.gif'></a><br>";
    print "<a onclick=\"addSmiley(':[bangry]')\"><img src='../smiley/angry.jpg'></a>";
    print "<a onclick=\"addSmiley(':[grin]')\"><img src='../smiley/grin.jpg'></a>";
    print "<a onclick=\"addSmiley(':[sadness]')\"><img src='../smiley/sadness.jpg'></a>";
    print "<a onclick=\"addSmiley(':[smilies]')\"><img src='../smiley/smiles.jpg'></a>";
    print "<a onclick=\"addSmiley(':[winking]')\"><img src='../smiley/winking.jpg'></a><br>";

    print "<script language=\"JavaScript\" type=\"text/javascript\">\n";
    print "function addSmiley(textToAdd)\n";
    print "{\n";
    print "document.form.post.value += textToAdd;";
    print "document.form.post.focus();\n";
    print "}\n";
    print "</script>\n";

 

Thats my form, its wrapped in PHP but its a pretty basic form.

[fenway]

Really, NOT the PHP version... viewsource of your page.

[Archbob]

Its the same thing with PHP, just less the print command. I'm just telling PHP to prink out the HTML there:

 

<form action='newtopic.php?forumID=$forumID' method='post' name='form'>
<b>Topic:</b><br>
    <input type='text' name='title' length='15'><br><br>
    <b>Message:</b><br><br>
    <textarea id='post' rows='6' name='post' cols='45'></textarea><br><br>
    <script language="JavaScript">
    generate_wysiwyg('post')
    </script>
    <input type='checkbox' name='nosmiley'> Disable Smilies<br><br>
    <input type='submit' name='submitpost' value='Post'>
    </form><br><br>
    Clickable Smilies<br>
    <a onClick=\"addSmiley('')\"><img src='images/smile.gif'></a> 	
    <a onClick=\"addSmiley(':blush')\"><img src='images/blush.gif'></a> 
    <a onClick=\"addSmiley(':angry')\"><img src='images/angry.gif'></a> 
    <a onClick=\"addSmiley(':shocked')\"><img src='images/shocked.gif'></a> 
    <a onClick=\"addSmiley(':cool')\"><img src='images/cool.gif'></a> 
    <a onclick=\"addSmiley(':{blink}')\"><img src='images/winking.gif'></a>
    <A onclick=\"addSmiley('{clover}')\"><img src='images/clover.gif'></a>
    <a onclick=\"addSmiley(':[glasses]')\"><img src='images/glasses.gif'></a>
    <a onclick=\"addSmiley(':[barf]')\"><img src='images/barf.gif'></a>
    <a onclick=\"addSmiley(':[reallymad]')\"><img src='images/mad.gif'></a><br>
    <a onclick=\"addSmiley(':[normal]')\"><img src='../smiley/normal.gif'></a>
    <a onclick=\"addSmiley(':[inqu]')\"><img src='../smiley/inquisitive.gif'></a>
    <a onclick=\"addSmiley(':[happyinlove]')\"><img src='../smiley/happyinlove.gif'></a>
    <a onclick=\"addSmiley(':[sadinlove]')\"><img src='../smiley/sadinlove.gif'></a>
    <a onclick=\"addSmiley(':[normalinlove]')\"><img src='../smiley/normalaboutlove.gif'></a><br>
    <a onclick=\"addSmiley(':[bangry]')\"><img src='../smiley/angry.jpg'></a>
    <a onclick=\"addSmiley(':[grin]')\"><img src='../smiley/grin.jpg'></a>
    <a onclick=\"addSmiley(':[sadness]')\"><img src='../smiley/sadness.jpg'></a>
    <a onclick=\"addSmiley(':[smilies]')\"><img src='../smiley/smiles.jpg'></a>
    <a onclick=\"addSmiley(':[winking]')\"><img src='../smiley/winking.jpg'></a><br>

    <script language=\"JavaScript\" type=\"text/javascript\">
    function addSmiley(textToAdd)
   {\n
  document.form.post.value += textToAdd;
  document.form.post.focus();
    }
    </script>

 

Basically you can see it here: http://www.chipmunk-scripts.com/board/newtopic.php?forumID=36

 

Don't actually post please because guest posting is turned off.

[fenway]

I was hoping to rid myself of all of that unnecessary quoting... but no matter.  Maybe I'll get a chance to play later.

[Archbob]

Basically I need to know how to get the onclick commands to put the characters in my textbox now that the focus is invisible.

[fenway]

Which browser is giving you these errors?

[Archbob]

IE just an error at the bottom of the page. It just doesn't work in FireFox, even though firefox doesn't show a javascript error.

[fenway]

Seems to work in FF for me on linux.

[Archbob]

It does not work on windows in FF or IE.

[Archbob]

Anyone have an idea why it isn't working when viewing in windows?

[fenway]

Well, then I don't know what you mean by focus... my caret ends up right after the smiley in FF.

[Archbob]

When you click on a smiley in the link I gave, does it actually put the characters into the textbox?

[fenway]

Yup.