Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 24
  1. #1
    Regular Coder
    Join Date
    Feb 2012
    Posts
    123
    Thanks
    19
    Thanked 3 Times in 3 Posts

    Unhappy I'm a noob...Code Not Working on Enter

    Hello...new to the forum, so I hope that I"m posting in the right area. I have successfully *modified* created a shoutbox that works with Social Engine Websites. I have been looking for two days and have searched and implemented 100's of codes to try and figure out how I can just use the enter key to submit the message that others type in the shoutbox. I use jQuery, Ajax, Mysql, and PHP, but can't figure it out for the likes of me. I would really, really, really, appreciate the ability to get this fixed. Below is my code for my index.tpl, and my send_message.js. If you need anything else, please just let me know.

    Everything works. When you type your comment/message and press the send, then it sends it to the php file and to the database and then it recalls the database files and shows it in the shoutbox. Just can't get the enter key working. I'm sure it's something so simple that I"m going to hit myself over, but can't figure it out

    SEND_MESSAGE.JS

    Code:
    $(function() {
    	$('#newMessage').click(function() {
    		document.newMessage.newMessageContent.value = "";
    	});
    	
    	$('#newMessageSend').click(function() {
    		var username = $("#username").val();
    		
    		var message = $("#newMessageContent").val();
    		
    		if (message == "" || message == "Enter your message here") {
    			return false;
    		}
    		
    		var dataString = 'username=' + username + '&message=' + message;
    		
    		$.ajax({
    			type: "POST",
    			url: "/application/widgets/shoutbox/send_message.php",
    			data: dataString,
    			success: function() {
    			document.newMessage.newMessageContent.value = "";
    				
    			
    			
    			}
    		});		
    	});
    });
    INDEX.TPL - WITHOUT THE CSS

    Code:
    <?php
    
    /**
     * SocialEngine
     *
     * @category   Application_Widget
     * @package    Widget
     * @copyright  Copyright 2012
     * @license    Free
     * @author     XCalibre
     */
    
    ?>
    
    <SCRIPT LANGUAGE="JavaScript">
    
    function open_pop(){
    window.open('application/widgets/shoutbox/emot_box.html','mywin','left=20,top=20,width=470,height=230,toolbar=1,resizable=0');
    }
    
    </SCRIPT>
    
    <html>
    
    <head>
    
    <script src="application/widgets/shoutbox/js/jQuery.js" type="text/javascript"></script>
    
    <body>
    
    <div class="chatBox">
    
    	<div class="user">
    		
        	Welcome <input type="text" size="13px" name="username" id="username" value="<?php echo $this->translate('%1$s', $this->viewer()->getTitle()); ?>" readonly="readonly" style="border:hidden"/>
    		
    	</div>
    	
    	<div class="main">
    
    	</div>
    
    
    	<div class="information">
    Enter Text Below:
    
    	</div>
    
    
    	<div class="messageBox">
    
    	<form name ="newMessage" class="newMessage" action="" onclick="">
    
    		<div class="left">
    
    			<textarea name="newMessageContent" id="newMessageContent"></textarea>
    	
    		</div>
    		
    		<div class="smiley">
    
    			<input type="button" value = "Smilies" id="insertSmilies" onClick="open_pop()" />
    
    		</div
    
    
    		<div class="right">
    
    			<input type="button" id="newMessageSend" value="Send" />
    
    		</div>
    		</form>
    </div>
    
    <script src="application/widgets/shoutbox/js/refresh_message_log.js" type="text/javascript"></script>
    <script src="application/widgets/shoutbox/js/send_message.js" type="text/javascript"></script>
    <script src="application/widgets/shoutbox/js/protect.js" type="text/javascript"></script>
    
    </script>
    </body>
    </html>
    Please, any help would be appreciated. I think there's a conflict with the Ajax or something. I'm not sure. If I were, I wouldn't be here. LOL! Thank you all.
    Last edited by XCalibre; 02-29-2012 at 08:48 PM. Reason: more descriptive

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Changes:
    1. gave your form an ID
    2. binded your desired function to the submit event of the newmessage form ( this way it will fire when user enters or clicks on a submit button)
    3. fixed your check for an empty string ( best to check the length of the val)
    4. used .serialize() to properly format your form values without writing them in manually ( had to change this line slightly jsut realised the username input isnt even in a form at all)
    5. altered your success function to reset the newmessagecontent value since you had already declared it as a variable

    changes are in red



    Code:
    $(function() {
    	$('#newMessage').submit(function() {
    		
    		var username = $("#username").val();
    		
    		var message = $("#newMessageContent").val();
    		
    		if (message.length > 0 || message == "Enter your message here") {
    			return false;
    		}
    		
    		var dataString = $("#username,#newMessageContent").serialize();
    		
    		$.ajax({
    			type: "POST",
    			url: "/application/widgets/shoutbox/send_message.php",
    			data: dataString,
    			success: function() {
    			message=""
    			}
    		});		
    	});
    });
    INDEX.TPL - WITHOUT THE CSS

    Code:
    <?php
    
    /**
     * SocialEngine
     *
     * @category   Application_Widget
     * @package    Widget
     * @copyright  Copyright 2012
     * @license    Free
     * @author     XCalibre
     */
    
    ?>
    
    <script type="text/javascript">
    
    function open_pop(){
    window.open('application/widgets/shoutbox/emot_box.html','mywin','left=20,top=20,width=470,height=230,toolbar=1,resizable=0');
    }
    
    </SCRIPT>
    
    <html>
    
    <head>
    
    <script src="application/widgets/shoutbox/js/jQuery.js" type="text/javascript"></script>
    
    <body>
    
    <div class="chatBox">
    
    	<div class="user">
    		
        	Welcome <input type="text" size="13px" name="username" id="username" value="<?php echo $this->translate('%1$s', $this->viewer()->getTitle()); ?>" readonly="readonly" style="border:hidden"/>
    		
    	</div>
    	
    	<div class="main">
    
    	</div>
    
    
    	<div class="information">
    Enter Text Below:
    
    	</div>
    
    
    	<div class="messageBox">
    
    	<form name ="newMessage" id="newmessage" class="newMessage" action="" onclick="">
    
    		<div class="left">
    
    			<textarea name="newMessageContent" id="newMessageContent"></textarea>
    	
    		</div>
    		
    		<div class="smiley">
    
    			<input type="button" value = "Smilies" id="insertSmilies" onClick="open_pop()" />
    
    		</div
    
    
    		<div class="right">
    
    			<input type="button" id="newMessageSend" value="Send" />
    
    		</div>
    		</form>
    </div>
    
    <script src="application/widgets/shoutbox/js/refresh_message_log.js" type="text/javascript"></script>
    <script src="application/widgets/shoutbox/js/send_message.js" type="text/javascript"></script>
    <script src="application/widgets/shoutbox/js/protect.js" type="text/javascript"></script>
    
    </script>
    </body>
    </html>
    Last edited by DanInMa; 02-29-2012 at 08:32 PM.

  • Users who have thanked DanInMa for this post:

    XCalibre (02-29-2012)

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    oh and for future reference, please read the posting guidlines.

    you need to use a more descriptive subject line than " code doesnt work or help pls! or im a n00b fix my code!" as many people here won't even read the post

  • #4
    Regular Coder
    Join Date
    Feb 2012
    Posts
    123
    Thanks
    19
    Thanked 3 Times in 3 Posts
    Okay....implemented the changes and on submit, nothing happens, and when entering, nothing happens. This is what I"ve been getting every time I try to change the coding. Thank you for replying so fast. It's being a nightmare

  • #5
    Regular Coder
    Join Date
    Feb 2012
    Posts
    123
    Thanks
    19
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by DanInMa View Post
    oh and for future reference, please read the posting guidlines.

    you need to use a more descriptive subject line than " code doesnt work or help pls! or im a n00b fix my code!" as many people here won't even read the post
    Thank you! I'll keep this in mind

  • #6
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    if you have a link to a test page post that or private message it and Ill try an take a look when I get home

  • #7
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    ohhh. ok, the enter isn't working currently, by default, becuase you are in a textarea.

    try this, change the type of the send button to submit,

    then try thsi codesorry it's messy)


    Code:
    $(function() {
    	$('#newMessage').submit(function(e) {
               e.preventDefault();
    		
    		var username = $("#username").val();
    		
    		var message = $("#newMessageContent").val();
    		
    		if (message.length > 0 || message == "Enter your message here") {
    			return false;
    		}
    		
    		var dataString = $("#username,#newMessageContent").serialize();
    		
    		$.ajax({
    			type: "POST",
    			url: "/application/widgets/shoutbox/send_message.php",
    			data: dataString,
    			success: function() {
    			message=""
    			}
    		});		
    	});
    //this function below watches for "enter" in the keyup action, jsut inside of the newmessage textarea
    $("#newMessageContent").keyup(function(e){
    if(window.event){
        key = window.event.keyCode; 
    }    
    else{
    key = e.which;     //firefox
    }
    if (key == 13)  {
    $("#newmessage").submit()
               
            }   
    });
    
    });

  • Users who have thanked DanInMa for this post:

    XCalibre (02-29-2012)

  • #8
    Regular Coder
    Join Date
    Feb 2012
    Posts
    123
    Thanks
    19
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by DanInMa View Post
    ohhh. ok, the enter isn't working currently, by default, becuase you are in a textarea.

    try this, change the type of the send button to submit,

    then try thsi codesorry it's messy)


    Code:
    $(function() {
    	$('#newMessage').submit(function(e) {
               e.preventDefault();
    		
    		var username = $("#username").val();
    		
    		var message = $("#newMessageContent").val();
    		
    		if (message.length > 0 || message == "Enter your message here") {
    			return false;
    		}
    		
    		var dataString = $("#username,#newMessageContent").serialize();
    		
    		$.ajax({
    			type: "POST",
    			url: "/application/widgets/shoutbox/send_message.php",
    			data: dataString,
    			success: function() {
    			message=""
    			}
    		});		
    	});
    //this function below watches for "enter" in the keyup action, jsut inside of the newmessage textarea
    $("#newMessageContent").keyup(function(e){
    if(window.event){
        key = window.event.keyCode; 
    }    
    else{
    key = e.which;     //firefox
    }
    if (key == 13)  {
    $("#newmessage").submit()
               
            }   
    });
    
    });
    Okay, so change this:

    <form name ="newMessage" id="newmessage" class="newMessage" action="" onclick="">

    To this?

    <form name ="newMessage" id="newmessage" class="newMessage" action="" onclick="submit">

  • #9
    Regular Coder
    Join Date
    Feb 2012
    Posts
    123
    Thanks
    19
    Thanked 3 Times in 3 Posts
    Okay...I made the form name to be 'submit'.....

    It apparently stopped calling the ajax in the send_message.js file. It refreshes the entire page instead of just the shoutbox, and it doesn't post the messages in the shoutobox.

    I believe the index.tpl is calling the ajax from the id: newMessageSend......not the form...so there has to be a conflict with it somewhere. I think it's calling the newMessageSend "First" and therefore bypassing the Form id: newmessage......

    I've taken bits and pieces from 100 different scripts to try and get this to work, so it may just have to be re written a bit in order to what I want to do, but I can't figure it out. I've went through 100's of scripts to try and implement this "enter" function.

    I don't have a great knowledge of php, but I"m learning. Thank you for looking at this.

  • #10
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    no, on the SEND button, change type="button" to type="submit"

  • #11
    Regular Coder
    Join Date
    Feb 2012
    Posts
    123
    Thanks
    19
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by DanInMa View Post
    no, on the SEND button, change type="button" to type="submit"
    My bad...sorry! I changed it and it does the same thing. It refreshes the entire page and doesn't post anything in the shoutbox.

  • #12
    Regular Coder
    Join Date
    Feb 2012
    Posts
    123
    Thanks
    19
    Thanked 3 Times in 3 Posts
    I don't see the id of newMessageSend being called in the post_message.js Ajax part? Is that the issue?

  • #13
    Regular Coder
    Join Date
    Feb 2012
    Posts
    123
    Thanks
    19
    Thanked 3 Times in 3 Posts

    Current Changes

    Current changes...refreshes the entire page when entered or submitted. Does not post to database or show in shoutobx:

    SEND_MESSAGE.JS

    Code:
    $(function() {
    	$('#newMessage').submit(function(e) {
               e.preventDefault();
    		
    		var username = $("#username").val();
    		
    		var message = $("#newMessageContent").val();
    		
    		if (message.length > 0 || message == "Enter your message here") {
    			return false;
    		}
    		
    		var dataString = $("#username,#newMessageContent").serialize();
    		
    		$.ajax({
    			type: "POST",
    			url: "/application/widgets/shoutbox/send_message.php",
    			data: dataString,
    			success: function() {
    			message=""
    			}
    		});		
    	});
    //this function below watches for "enter" in the keyup action, jsut inside of the newmessage textarea
    $("#newMessageContent").keyup(function(e){
    if(window.event){
        key = window.event.keyCode; 
    }    
    else{
    key = e.which;     //firefox
    }
    if (key == 13)  {
    $("#newmessage").submit()
               
            }   
    });
    
    });
    INDEX.TPL


    Code:
    <?php
    
    /**
     * SocialEngine
     *
     * @category   Application_Widget
     * @package    Widget
     * @copyright  Copyright 2012
     * @license    free
     * @author     XCalibre
     */
    
    ?>
    
    
    <SCRIPT LANGUAGE="JavaScript">
    
    function open_pop(){
    window.open('application/widgets/shoutbox/emot_box.html','mywin','left=20,top=20,width=470,height=230,toolbar=1,resizable=0');
    }
    
    </SCRIPT>
    
    <html>
    
    <head>
    
    <script src="application/widgets/shoutbox/js/jQuery.js" type="text/javascript"></script>
    
    <style type="text/css">
    
    
    /* Main Shoutbox */
    		.chatBox {
    		padding: 5px;
    		height: 268px;overflow: auto;
    		width: "100%";
    		font-family: Arial,Helvetica,sans-serif;
    		font-size: 11px;
    		background-color: #CFCFCF;
    		-moz-border-radius-topleft: 6px;
    		-moz-border-radius-topright: 6px;
    		-moz-border-radius-bottomright: 0px;
    		-moz-border-radius-bottomleft: 0px;
    		-webkit-border-radius: 1px 1px 0px 0px;
    		border-radius: 1px 1px 0px 0px;
    		border-style:solid;
    		border-width:1px;
    		border-color:#3C0000;
    
    }
    
    		.chatBox .user {
    		background-color: #DFDFDF;
    		text: bold;
    }
    
    		#username {
    		background-color:#DFDFDF;
    		text: bold;
    }
    
    /* Logging Messages */
    
    		.chatBox .main {
    		background-color: #fff;
    		height: 175px;
    		padding: 5px;
    		overflow: auto;
    }
    
    /* New Messages */
    
    
    		#newMessageContent {
    		font: 14px ariel, sans-serif;
    		width: 400px;
    				border-radius: 1px 1px 0px 0px;
    		border-style:solid;
    		border-width:1px;
    		border-color:#000000;
    		margin 5px;
    }
    
    /* Smilies*/
    
    		.chatBox .messageBox .smiley {
    		float: left;
    
    } 
    
     		#insertSmilies {
    		height: 38px;
    		width: 100px;
    		border-radius: 1px 1px 0px 0px;
    		border-style:solid;
    		border-width:1px;
    		border-color:#000000;
    		margin 5px;
    	
    }
    
    /* End Smilies */
    
    /*  SIZE OF SEND BUTTON */
    
    		#newMessageSend {
    		height: 38px;
    		width: 100px;
    		border-radius: 1px 1px 0px 0px;
    		border-style:solid;
    		border-width:1px;
    		border-color:#000000;
    		margin 5px;
    
    
    }
    
    		.chatBox .messageBox .left {
    		float: left;
    
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div class="chatBox">
    
    	<div class="user">
    		
        	Welcome <input type="text" size="13px" name="username" id="username" value="<?php echo $this->translate('%1$s', $this->viewer()->getTitle()); ?>" readonly="readonly" style="border:hidden"/>
    		
    	</div>
    	
    	<div class="main">
    
    	</div>
    
    
    	<div class="information">
    Enter Text Below:
    
    	</div>
    
    
    	<div class="messageBox">
    
    	<form name ="newMessage" id="newmessage" class="newMessage" action="" onclick="">
    
    		<div class="left">
    
    			<textarea name="newMessageContent" id="newMessageContent"></textarea>
    	
    		</div>
    
    		
    		<div class="smiley">
    
    			<input type="button" value = "Smilies" id="insertSmilies" onClick="open_pop()" />
    
    		</div
    
    
    
    		<div class="right">
    
    			<input type="submit" id="newMessageSend" value="Send" />
    
    		</div>
    		</form>
    </div>
    
    
    
    <script src="application/widgets/shoutbox/js/refresh_message_log.js" type="text/javascript"></script>
    <script src="application/widgets/shoutbox/js/send_message.js" type="text/javascript"></script>
    <script src="application/widgets/shoutbox/js/protect.js" type="text/javascript"></script>
    
    </script>
    </body>
    </html>

    ADDED:
    SEND_MESSAGE.PHP



    Code:
    <?php
    
    require_once 'cn.php';
    require_once 'protect.php';
    
    function parseCleanKey($key)
     {
         if ( $key == "" )
         {
             return "";
         }
         
         $key = htmlspecialchars( urldecode($key) );
         $key = str_replace( "..", "", $key );
         $key = preg_replace( "/\_\_(.+?)\_\_/", "", $key );
         $key = preg_replace( "/^([\w\.\-\_]+)$/", "$1", $key );
    	 $key = str_replace( "&", "&amp;", $key );
    	 $key = str_replace( "<!--", "&#60;&#33;--", $key );
    	 $key = str_replace( "-->", "--&#62;", $key );
    	 $key = str_replace( "<script", "&#60;script", $key );
    	 $key = str_replace( ">", "&gt;", $key );
    	 $key = str_replace( "<", "&lt;", $key );
    	 $key = str_replace( '"', "&quot;", $key );
    	 $key = str_replace( "\n", "<br />", $key ); 
    	 $key = str_replace( "$", "&#036;", $key );
    	 $key = str_replace( "!", "&#33;", $key );
    	 $key = str_replace( "'", "&#39;", $key );	 
    	 $key = stripslashes($key);
    	 
         return $key;
     }
    	 
    $username = parseCleanKey($_POST['username']);
    $message = parseCleanKey($_POST['message']);
    $time = time();
    
    $sql = 'INSERT INTO messages
    	(username,
    	 message_content,
    	 message_time)
    		VALUES
    	("' . $username . '",
    	 "' . $message . '",
    	 ' . $time . ')';
    $result = mysql_query($sql, $cn) or
    	die(mysql_error($cn));
    ?>
    Last edited by XCalibre; 03-01-2012 at 12:02 AM.

  • #14
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    ok I went a different route. this worked when I tried it on the test account. I used the firebug console to unbind your current functions then tried mine and it worked.

    save a backup of what you have in the sendmessage .js now and replace it with this

    *** you do not need to change your html.

    Code:
    $(function() {
    	$('form.newMessage').submit(function(e) {
               e.preventDefault();
    		
    		var username = $("#username").val();
    		
    		var message = $("#newMessageContent").val();
    		
    		if (message.length > 0 || message == "Enter your message here") {
    			return false;
    		}
    		
    		var dataString = $("#username,#newMessageContent").serialize();
    		
    		$.ajax({
    			type: "POST",
    			url: "/application/widgets/shoutbox/send_message.php",
    			data: dataString,
    			success: function() {
    			message="";
    			}
    		});		
    	});
    //this function below watches for "enter" in the keyup action, jsut inside of the newmessage textarea
    $("#newMessageContent").keyup(function(e){
      var key;
    if(window.event){
        key = window.event.keyCode; 
    }    
    else{
    key = e.which;     //firefox
    }
    
    if (key === 13 )  {
    if (e.shiftKey === false){
    $("#newMessageSend").click();
    }   
      }   
    });
    
    });

  • #15
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    oh also, in the textarea, it should submit only if enter it pressed and not shift+enter, that way users can still get a new line if they want. you might want to throw a hint(removable perhaps?) on the UI somewhere


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •