Coly010

Right so it is definitely faster, but there is still a delay, and the longer the message the greater the delay, and as always the first message to be sent seems to be faster than the second message, no matter what. Is there any way that i can improve the php script of to load the messages?

Sounds good, so I'll change the send_imessage file to load the messages and then use $("#chat_messages").html(data); to load them. When I get back to my laptop I'll try this out and see if it improves the speed, thanks for the help everyone.

Is there a way to speed up the php script then? Like I've said when it first loads it takes around 1-2 seconds to load it, it loads quick enough. But then it takes so long the next time. And the more times the enter key is pressed the longer it takes the next time. Would it be faster if I combined the two files together, the send_imessage.php file and the load_messages file, and use the data parameter of the callback function in the $.post(); function? Also, I'm currently testing it using xammp or xampp however its spelt. So I'm just going to the localhost. Does that affect the speed?

I am using the googleapi link. if its faster to download it and place it on my server I will do that. I ran another couple of tests to check how long after the enter key is pressed till the message appears on screen and I'm getting on average 47 seconds. If there is even an alternative to the way I'm doing this I'll look into it

here is my load_messages.php file: <?php include "mini_globals.php"; $fr_id = ""; $c_id = ""; if(isset($_GET['friend'])) { $fr_id = $_GET['friend']; } else { echo "FR_ID NOT SET<br />"; } if(isset($_GET['ch_id'])) { $c_id = $_GET['ch_id']; } else { echo "C_ID NOT SET<br />"; } $limit = 20; $select_msgs = $db->query("SELECT * FROM i_messages WHERE c_id = '$c_id' ORDER BY im_id DESC LIMIT 20"); $imessage_array = array(); while( $imessages = mysqli_fetch_assoc($select_msgs) ) { $imessage_array[] = $imessages; } $imessages = array_reverse($imessage_array); echo "<table width='100%' class='msg_table'>"; foreach($imessages as $im_ar) { if( $im_ar['s_id'] == $userid ) { echo "<tr class='user_sent_msg'> <td width='5%'>"; if( $im_ar['received'] == 1 ) { if( $im_ar['read'] == 1 ) { echo "<img src='img/read_icon.png' />"; } else { echo "<img src='img/received_icon.png' />"; } } else { if( $im_ar['sent'] == 1 ) { echo "<img src='img/sent_icon.png' />"; } } echo "</td>"; $time = substr($im_ar['time'], 10, 6); echo "<td width='85%'>" . $im_ar['message'] . "</td><td width='10%' class='time'>" . $time . "</td>"; } else if( $im_ar['s_id'] == $fr_id ) { $time = substr($im_ar['time'], 10, 6); echo "<tr class='friend_sent_msg'><td width='5%'></td><td width='85%'>" . $im_ar['message'] . "</td><td width='10%' class='time'>" . $time . "</td>"; $im_id = $im_ar['im_id']; $db->query("UPDATE i_messages SET received = 1 WHERE im_id = '$im_id'"); } echo "</tr>"; } echo "</table>"; ?>

Ok, so I have a little php/html file with a couple of divs where i want content to be loaded. the code: echo "<div class='chat'> <table width='100%'><tr> <td width='90%' class='td_name'><center><b>" . $fdname . "</b></center></td><td width='10%'><img src='img/ex.png' class='hide_div' onClick='hideChat()' onMouseOver='HoverExOver()' onMouseOut='HoverExOut()' /></td> </tr></table> <div id='chat_messages' style='overflow-y:scroll;'> </div> <div id='chat_input'> <input type='hidden' id='fr_id' value='" . $fr_id . "' /> <input type='hidden' id='chat_id' value='" . $c_id . "' /> <table width='100%'> <tr> <td width='100%'> <textarea id='imessage' cols='45'></textarea> </td> </tr> </table> </div> </div>";   then i have a JQuery function which will simply load some content into the #chat_messages div the function is: function load_messages(friend, chat) { $("#chat_messages").load("load_messages.php?friend=" + friend + "&ch_id=" + chat); }   simple. now i have a $.post function for when the enter key is pressed in the textbox ( credit goes to Dayo for helping me here) $(document).ready(function() { $('#imessage').autogrow(); $("#imessage").bind("keypress", function (event) { $.post("update_imessages.php", { friend: $("#fr_id").val(), ch_id: $("#chat_id").val() }, function(data, status) { }); if (event.keyCode == 13) { event.preventDefault(); var friendid = $("#fr_id").val(); var chatid = $("#chat_id").val(); var msg = $(this).val(); post(msg, $(this), friendid, chatid); } }); }); function post(msg, selector, friendid, chatid) { selector.val(""); $.post("send_imessage.php", { i_message: msg, friend_id: friendid, ch_id: chatid }, function(data, status) { }); load_messages(friendid, chatid); }   now i call the load_messages function again to reload the messages, and therefore auto-update the #chat_messages div with the new message. When the page firsts loads the load_messages() function takes about 1-2 secs to load the messages, but after the enter button is pressed in the textbox the load_messages() function takes around 24 secs before loading the messages, with the new message. Can anybody help me understand this, and possibly speed it up? Its supposed to be instant messaging, 24 secs isn't very instant. Thanks

I had. The problem was that i was loading a file using jquery, which didnt have the js file linked to it. I had expected that because i had it linked in the header file, and because jquery was loading the file onto a page which included the header file, the js functions would be able to be accessed by the file getting loaded by jquery

Sorted it out, thanks for the help Dayo, it does work :)

It still isnt working, I know that it should, which means it must not be working in conjunction with the rest of my jquery :/

The title might sound confusing, but in essence it isn't. I want to have a JQuery function that posts the data in a textbox and then resets the value of the textbox when the enter button is pressed. I know that to post the data I use JQuery's $.post(); which i have now become familiar with. However my problem is finding whether or not the enter button has been pressed when the textbox is in focus. I know that I would give the textbox an id, then use a JQuery selector to select the element, then use an if statement to check if the enter button is pressed. I know that there is a function in JQuery .keyPressed(event); but how do I use the event parameter to find out if the enter button has been pressed. A google search returned me with the following result: $('#textbox').keypress(function(event){ var keycode = (event.keyCode ? event.keyCode : event.which); if(keycode == '13'){ alert('You pressed a "enter" key in textbox'); } });   and   $('#txt').keydown(function (e){ if(e.keyCode == 13){ alert('you pressed enter ^_^'); } })   but neither of these seem to work, and yes I have changed the id of the selector. it just doesn't seem to be able to respond to the enter button being pressed. I would prefer to be able to be able to use a <textarea> if that makes a difference. Any help would be seriously appreciated.

Worked out the problem. I'm posting the data ok, but after it I'm trying to load the file, which isnt having any variables sent to it.

I've kind of worked out what's wrong. The $.post() is not actually sending the values to the chat.php file. I have no idea why this is though. What would stop the jquery $.post() from sending the values, yet returning it as a success? I'm extremely confused. Is there another way to do this, to the same effect?

array(0) {} I dont understand this error at all though, because I have a near identical other piece of code and that works fine, the only difference is the name of the variables

I've set up an alert telling my the response of the $.post is and it is saying that it is sending the data successfully, however the variables just dont seem to be getting set

have tried that, but i'm getting the same error.

Doesn't Matter I got it. Used the .parent() method

in what sense? like <?php echo $cu2_id; ?> or some other way?

I'm trying to pass a couple of PHP Variables to my javascript function which is:   function showChat(friendid, chat_id) { var fr_id = friendid; var c_id = chat_id; $.post("chat.php", { friend_id: fr_id, ch_id: c_id }, function(data, status) { $("#chat_box").load("chat.php"); $("#chat_box").show(); }); }   The PHP code is: <div class='f_bar' onClick='showChat({$cu2_id},{$c_id})'>   and the errors im getting are: Notice: Undefined index: friend_id in C:\xampp\htdocs\chat\chat.php on line 12 Notice: Undefined index: ch_id in C:\xampp\htdocs\chat\chat.php on line 13   Can anyone tell me why I am getting these errors, as i believe I am passing the variables correctly. and even passing them by doing:   <div class='f_bar' onClick='showChat(" . $cu2_id . "," . $c_id . ")'>   does not seem to work.

Has no-one got a solution?

Well that worked fine. But now I have another problem which is somewhat related. I have an image of an arrow, and its on a div created by an array. Here's my file, should be easy enough to understand what's going on in it. $fr_sql = $db->query("SELECT * FROM friends WHERE (user1_id = '$userid') OR (user2_id = '$userid')"); while( $fr_ar = mysqli_fetch_array($fr_sql)) { if( $fr_ar['user2_id'] == $userid ) { $fr_id = $fr_ar['user1_id']; } else if( $fr_ar['user1_id'] == $userid ) { $fr_id = $fr_ar['user2_id']; } $fd_sql = $db->query("SELECT * FROM users WHERE userid = '$fr_id'"); $fd_ar = mysqli_fetch_array($fd_sql); $fdname = $fd_ar['display_name']; $fdpic = $fd_ar['display_pic']; $ru_sql = $db->query("SELECT * FROM recent_updates WHERE userid = '$fr_id' ORDER BY ru_id DESC LIMIT 5"); $ru_nr = mysqli_num_rows($ru_sql); if( $ru_nr > 1 ) { echo "<div class='update'> <table width='100%'> <tr> <td width='30%'> " . $fdpic . " </td> <td width='50%'> " . $fdname . " has changed some of their details. </td> <td width='20%'> <img src='img/dropdown_arrow.png' class='dd_arrow' /> <img src='img/up_arrow.png' class='up_arrow' /> </td> </tr> </table> </div> <div class='dropdown_news'>"; while( $ru_ar = mysqli_fetch_array($ru_sql)) { $type = $ru_ar['type']; $time = $ru_ar['time']; $old_value = $ru_ar['old_value']; $new_value = $ru_ar['new_value']; if( $type == 1 ) { echo "<div class='dropdown_news_item'> <table width='100%'> <tr> <td width='30%'> <center> " . $fdpic . " </center> </td> <td width='50%'> " . $old_value . " has changed their display name to: <b>" . $new_value . "</b> </td> <td width='20%'> " . $time . " </td> </tr> </table> </div>"; } else if( $type == 2 ) { echo "<div class='dropdown_news_item'> <table width='100%'> <tr> <td width='30%'> <center> " . $fdpic . " </center> </td> <td width='50%'> " . $fdname . " has changed their status from: <b>" . $old_value . "</b> to: <b>" . $new_value . "</b> </td> <td width='20%'> " . $time . " </td> </tr> </table> </div>"; } else if( $type == 3 ) { echo "<div class='dropdown_news_item'> <table width='100%'> <tr> <td width='30%'> <center> " . $fdpic . " </center> </td> <td width='50%'> " . $fdname . "<br /> " . $new_value . " </td> <td width='20%'> " . $time . " </td> </tr> </table> </div>"; } else if( $type == 4 ) { echo "<div class='dropdown_news_item'> <table width='100%'> <tr> <td width='30%'> <center> " . $new_value . " </center> </td> <td width='50%'> " . $fdname . " had changed their display picture. </td> <td width='20%'> " . $time . " </td> </tr> </table> </div>"; } } echo "</div>";   Now i want it that when you click the arrow it will slideDown() the dropdown_news div relative to the div where the arrow is clicked. as you can probably see its possible for more than one arrow to be on the screen, and in that sense i cant use an id i need a class, and there can also be more than one div with the class dropdown_news. When i click the arrow, obviously, all the divs with the class dropdown_news slideDown(). here is my jquery: // Drop down arrow $(".dropdown_news").hide(); $(".up_arrow").hide(); $(".dd_arrow").hover(function() { this.src = 'img/dropdown_arrow_over.png'; }, function() { this.src = 'img/dropdown_arrow.png'; }); $(".dd_arrow").click(function() { $(".dropdown_news").slideDown(); $(this).hide(); $(".up_arrow").show(); }); // Up arrow $(".up_arrow").hover(function() { this.src = 'img/up_arrow_over.png'; }, function() { this.src = 'img/up_arrow.png'; }); $(".up_arrow").click(function() { $(".dropdown_news").slideUp(); $(this).hide(); $(".dd_arrow").show(); });   I don't know how to tackle this problem :/ any help would be appreciated.

HTML was my first language, I picked it up easily enough, after that it was php, then css, then VB then Java then JQuery lol

Well that worked fine. But now I have another problem which is somewhat related. I have an image of an arrow, and its on a div created by an array. Here's my file, should be easy enough to understand what's going on in it. $fr_sql = $db->query("SELECT * FROM friends WHERE (user1_id = '$userid') OR (user2_id = '$userid')"); while( $fr_ar = mysqli_fetch_array($fr_sql)) { if( $fr_ar['user2_id'] == $userid ) { $fr_id = $fr_ar['user1_id']; } else if( $fr_ar['user1_id'] == $userid ) { $fr_id = $fr_ar['user2_id']; } $fd_sql = $db->query("SELECT * FROM users WHERE userid = '$fr_id'"); $fd_ar = mysqli_fetch_array($fd_sql); $fdname = $fd_ar['display_name']; $fdpic = $fd_ar['display_pic']; $ru_sql = $db->query("SELECT * FROM recent_updates WHERE userid = '$fr_id' ORDER BY ru_id DESC LIMIT 5"); $ru_nr = mysqli_num_rows($ru_sql); if( $ru_nr > 1 ) { echo "<div class='update'> <table width='100%'> <tr> <td width='30%'> " . $fdpic . " </td> <td width='50%'> " . $fdname . " has changed some of their details. </td> <td width='20%'> <img src='img/dropdown_arrow.png' class='dd_arrow' /> <img src='img/up_arrow.png' class='up_arrow' /> </td> </tr> </table> </div> <div class='dropdown_news'>"; while( $ru_ar = mysqli_fetch_array($ru_sql)) { $type = $ru_ar['type']; $time = $ru_ar['time']; $old_value = $ru_ar['old_value']; $new_value = $ru_ar['new_value']; if( $type == 1 ) { echo "<div class='dropdown_news_item'> <table width='100%'> <tr> <td width='30%'> <center> " . $fdpic . " </center> </td> <td width='50%'> " . $old_value . " has changed their display name to: <b>" . $new_value . "</b> </td> <td width='20%'> " . $time . " </td> </tr> </table> </div>"; } else if( $type == 2 ) { echo "<div class='dropdown_news_item'> <table width='100%'> <tr> <td width='30%'> <center> " . $fdpic . " </center> </td> <td width='50%'> " . $fdname . " has changed their status from: <b>" . $old_value . "</b> to: <b>" . $new_value . "</b> </td> <td width='20%'> " . $time . " </td> </tr> </table> </div>"; } else if( $type == 3 ) { echo "<div class='dropdown_news_item'> <table width='100%'> <tr> <td width='30%'> <center> " . $fdpic . " </center> </td> <td width='50%'> " . $fdname . "<br /> " . $new_value . " </td> <td width='20%'> " . $time . " </td> </tr> </table> </div>"; } else if( $type == 4 ) { echo "<div class='dropdown_news_item'> <table width='100%'> <tr> <td width='30%'> <center> " . $new_value . " </center> </td> <td width='50%'> " . $fdname . " had changed their display picture. </td> <td width='20%'> " . $time . " </td> </tr> </table> </div>"; } } echo "</div>";   Now i want it that when you click the arrow it will slideDown() the dropdown_news div relative to the div where the arrow is clicked. as you can probably see its possible for more than one arrow to be on the screen, and in that sense i cant use an id i need a class, and there can also be more than one div with the class dropdown_news. When i click the arrow, obviously, all the divs with the class dropdown_news slideDown(). here is my jquery: // Drop down arrow $(".dropdown_news").hide(); $(".up_arrow").hide(); $(".dd_arrow").hover(function() { this.src = 'img/dropdown_arrow_over.png'; }, function() { this.src = 'img/dropdown_arrow.png'; }); $(".dd_arrow").click(function() { $(".dropdown_news").slideDown(); $(this).hide(); $(".up_arrow").show(); }); // Up arrow $(".up_arrow").hover(function() { this.src = 'img/up_arrow_over.png'; }, function() { this.src = 'img/up_arrow.png'; }); $(".up_arrow").click(function() { $(".dropdown_news").slideUp(); $(this).hide(); $(".dd_arrow").show(); });   I don't know how to tackle this problem :/ any help would be appreciated.

Thanks a lot, worked perfectly :)

Ok, so I'm trying to use JQuery to change the background color and the font style for a div I have. The problem is that there are multiple divs with the same id, created from an array. The array is pulled from the database. Here is the PHP code which creates my divs: while($f_ar = mysqli_fetch_array($f_sql)) { if( $f_ar['user2_id'] == $userid ) { $fr_id = $f_ar['user1_id']; } else if( $f_ar['user1_id'] == $userid ) { $fr_id = $f_ar['user2_id']; } $sfu_sql = $db->query("SELECT * FROM users WHERE userid = '$fr_id'"); $sfu_ar = mysqli_fetch_array($sfu_sql); $f_dname = $sfu_ar['display_name']; $f_dpic = $sfu_ar['display_pic']; $f_status = $sfu_ar['status']; $f_pm = $sfu_ar['personal_message']; echo "<tr> <td> <a href='viewuser.php?id=" . $fr_id . "'> <div id='friend_list_idv'> <table width='50%'> <tr> <td width='40%'> " . $f_dpic . " </td> <td width='60%'> <p id='friend_details'>" . $f_dname . "<br /> <font size='2px'> " . $f_status . "<br /> " . $f_pm . "</font></p> </td> </tr> </table> </div> </a> </td> </tr>"; }   The div in question is #friend_list_idv And now my jquery file is simply:   $(document).ready(function() { $("#friend_list_idv").hover(function() { $(this).addClass("fli_hover"); $("#friend_details").addClass("fd_hover"); }, function() { $(this).removeClass("fli_hover"); $("#friend_details").removeClass("fd_hover"); }); });   and finally my css classes are: [CSS] #friend_list_idv { border-width: 2px; border-style: groove; border-color: #282828; } .fli_hover { background-color: #505050; } #friend_details { color: #C0C0C0; text-decoration: none; } .fd_hover { font-style: italic; } [/CSS] When you hover over the first div, voila, it works, when you hover over the second one, it doesn't. Here are some screenshots of my problem: [ATTACH=CONFIG]1087[/ATTACH] [ATTACH=CONFIG]1088[/ATTACH] [ATTACH=CONFIG]1089[/ATTACH] I know that you cannot see the mouse cursor, but if you look at the bottom of the last two screenshots you will see a change between viewuser.php?id=2 and viewuser.php?id=3 Any help would be extremely appreciated.

ah thank you :)