Page 1 of 1

AJAX Chat MOD 2.0.0 Beta8 in Portal 3 side block: need Help

Posted: 5. August 2009 17:34
by Alexandrej
Hello everyone,

I have phpBB v3.0.4 with ProSilver and Portal3 v1.0.3 installed. I have installed the AJAX Chat MOD 2.0.0 Beta8 from Handyman and it works great.
I have downloaded the center block for the Portal from your site and it works great too. Thak you for your site: great source of info and Mods !!! ;)
Now, having gone through all the threads to find a side block for Portal3, I have not found anything to my liking (sorry my high school German is pretty rough so I couldn't read all posts in German :oops: ), so I decided to go ahead and to modify the central block one to make it into a side block si I could keep the style and look of it.
I think I have nailed it in the html file but I have one last issue that I can not figure out, despite mucking around with the html file for more than one day. :scratch: Getting on my nerves now... :grin:

Image Image

As you can see, when I type the message, and and press [ENTER], I get the post totally screwed up (left image), but as soon as I refresh my page (F5 in IE), it shows normally (right image).
I thought that had to do with the formating of the html file before and after the javascript block in the middle of the html file. So I made the code the same inbetween both <!-- BEGIN chatrow --> and <!-- BEGIN whoisrow --> sections... but no change. :(

I am at a loss right now and I am not sure what I am missing. The soilution may be in the CCS modules, but I am a newbie at this. Your assistance would be greatly appreciated, so when this works fine I can post the code on the forum for everyone to use. I apologize in advance if I have missed the solution (probably one is available in a German thread), but I have been through all the posts and have tried all html files offered on the thread, but you never know, I could have missed the one... :D

Here is my chat_mini.html :

Code: Select all

<!-- IF S_GET_CHAT -->
   <!-- IF S_READ or S_ADD -->
               <!-- BEGIN chatrow -->
                  <div id="p{chatrow.MESSAGE_ID}" class="post bg{chatrow.CLASS}">
                     <div class="inner"><span class="corners-top"><span></span></span>
                        <!-- IF U_ACP or U_MCP -->
                              <ul class="profile-icons">
                                 <li class="delete-icon">
                                    <a href="javascript:void({chatrow.MESSAGE_ID})" title="{L_DELETE_POST}" onClick="delete_post('{chatrow.MESSAGE_ID}')"><span>{L_DELETE_POST}</span></a>
                                 </li>
                              </ul>
                        <!-- ENDIF -->
                        <span id="profile{postrow.POST_ID}">
                          {chatrow.USERNAME_FULL} :<br />{chatrow.MESSAGE}
                        <span class="corners-bottom"><span></span></span>
                     </div>
                  </div>
               <!-- END chatrow -->
      <!-- IF S_WHOISONLINE -->--!--
         <!-- BEGIN whoisrow -->
            <div>
               <div class="inner">
                  <div class="user"><img src="{T_IMAGESET_PATH}/{whoisrow.USER_STATUS}.png" class="online_img" /> {whoisrow.USERNAME_FULL}</div>
               </div>
            </div>
         <!-- END whoisrow -->--!--{LAST_TIME}--!--{DELAY}--!--{LAST_POST}
      <!-- ENDIF -->
   <!-- ENDIF -->
<!-- ELSE -->
   <!-- IF S_CHAT -->
      <!-- INCLUDE overall_header.html -->
   <!-- ENDIF -->
   <script type="text/javascript">
   <!--
   var fieldname = 'chat';
   var last_time = 0;
   var xmlHttp = http_object();
   var last_id = {LAST_ID};
   var type = 'receive';
   var post_time = {TIME};
   var read_interval = 15000;
   var interval = setInterval('handle_send("read", last_id);', read_interval);

   function handle_send(mode, f)
   {
      if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
      {
         indicator_switch('on');
         type = 'receive';
         param = 'mode=' + mode;
         param += '&last_id=' + last_id;
         param += '&last_time=' + last_time;
         param += '&last_post=' + post_time;
         param += '&read_interval=' + read_interval;

         if (mode == 'add' && document.text.message.value != '')
         {
            type = 'send';
            for(var i = 0; i < f.elements.length; i++)
            {
               elem = f.elements[i];
               param += '&' + elem.name + '=' + encodeURIComponent(elem.value);
            }
            document.text.message.value = '';
         }
         else if (mode == 'delete')
         {
            type = 'delete';
            param += '&chat_id=' + f;
         }
         xmlHttp.open("POST", '{FILENAME}', true);
         xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
         xmlHttp.onreadystatechange = handle_return;
         xmlHttp.send(param);
      }
   }

   function handle_return()
   {
      if (xmlHttp.readyState == 4)
      {
         if (type != 'delete')
         {
            results = xmlHttp.responseText.split('--!--');
            if (results[1])
            {
               if (last_id == 0)
               {
                  document.getElementById(fieldname).innerHTML = results[0];
               }
               else
               {
                  document.getElementById(fieldname).innerHTML = results[0] + document.getElementById(fieldname).innerHTML;
               }
               last_id = results[1];
               if (results[2])
               {
                  document.getElementById('whois_online').innerHTML = results[2];
                  last_time = results[3];
                  if (results[4] != read_interval * 1000)
                  {
                     window.clearInterval(interval);
                     read_interval = results[4] * 1000;
                     interval = setInterval('handle_send("read", last_id);', read_interval);
                     document.getElementById('update_seconds').innerHTML = results[4];
                  }
                  post_time = results[5];
               }
            }
         }
         indicator_switch('off');
      }
   }

   function delete_post(chatid)
   {
      document.getElementById('p' + chatid).style.display = 'none';
      handle_send('delete', chatid);
   }

   function indicator_switch(mode)
   {
      if(document.getElementById("act_indicator"))
      {
         var img = document.getElementById("act_indicator");
         if(img.style.visibility == "hidden" && mode == 'on')
         {
            img.style.visibility = "visible";
         }
         else if (mode == 'off')
         {
            img.style.visibility = "hidden"
         }
      }
   }

   function http_object()
   {
      if (window.XMLHttpRequest)
      {
         return new XMLHttpRequest();
      }
      else if(window.ActiveXObject)
      {
         return new ActiveXObject("Microsoft.XMLHTTP");
      }
      else
      {
         document.getElementById('p_status').innerHTML = 'Status: Cound not create XmlHttpRequest Object.  Consider upgrading your browser.';
      }
   }
   -->
   </script>
   <style type="text/css">
   <!--
      #act_indicator {
         visibility:hidden;
      }
      .shouts {
         width: 200px;
         height:200px;
         overflow:auto;
         text-align: left;
      }
      #chat {
         width: 90%;
         overflow:hidden;
         text-align:left;
      }
      .postprofile {
         min-height: 5px !important;
      }
      .chatform {
         width: 90%;
         text-align:center;
      }
      .onlinelist {
         width: 200px;
         height:50px;
         vertical-align:text-top;
         text-align:left;
         overflow:auto;
      }
      .users {
         width: 90%;
         text-align: left;
         margin-left:auto;
         margin-right:auto;
      }
      .user {
         width: 95%;
         text-align: left;
         font-size: 0.9em;
         font-family:Verdana, Arial, Helvetica, sans-serif;
      }
      #act_indicator {
         visibility: hidden;
      }
      .chatinput {width: 90% !important;}
      .online_img {
         vertical-align:middle;
      }
   -->
   </style>
      <div class="forabg">
         <div class="inner">
            <span class="corners-top"><span></span></span>
               <div class="header">
               <div style="float: left"><h4 style="color:white;">&nbsp;<img src="{T_THEME_PATH}/images/icon_chat.gif" alt="" />&nbsp;<!-- IF not S_CHAT --><a href="{U_CHAT}">{L_CHAT_EXPLAIN}</a><!-- ELSE -->{L_CHAT_EXPLAIN}<!-- ENDIF --></h4></div>
               <div style="text-align: center">
   <!-- IF S_USER_LOGGED_IN -->
               <form name="text" id="text" method="post" action="javascript:void(0);" onSubmit="handle_send('add', this)" autocomplete="off">
                  <strong style="color: white;">{L_MESSAGE}:</strong> <input type="text" tabindex="1" name="message" id="message" class="inputbox chatinput" />
                  <input type="submit" class="button1" value="{L_SUBMIT}" name="submit" tabindex="6" accesskey="s"/><br />
               </form>
   <!-- ELSE -->
   <b style="color: white;"><br /><br />{L_OFFLINE_MESSAGE}</b>
   <!-- ENDIF -->
               </div>
               </div>
            <span class="corners-bottom"><span></span></span>
         </div>
      </div>
   <div align="left">
      <div class="inner">
         <span class="corners-top"><span></span></span>
         <div class="shouts">
            <div id="chat">
               <!-- BEGIN chatrow -->
                  <div id="p{chatrow.MESSAGE_ID}" class="post bg{chatrow.CLASS}">
                     <div class="inner"><span class="corners-top"><span></span></span>
                        <!-- IF U_ACP or U_MCP -->
                              <ul class="profile-icons">
                                 <li class="delete-icon">
                                    <a href="javascript:void({chatrow.MESSAGE_ID})" title="{L_DELETE_POST}" onClick="delete_post('{chatrow.MESSAGE_ID}')"><span>{L_DELETE_POST}</span></a>
                                 </li>
                              </ul>
                        <!-- ENDIF -->
                        <span id="profile{postrow.POST_ID}">
                          {chatrow.USERNAME_FULL} :<br />{chatrow.MESSAGE}
                        <span class="corners-bottom"><span></span></span>
                     </div>
                  </div>
               <!-- END chatrow -->
            </div>
         </div>
         &nbsp; <strong>{L_ONLINE_LIST}:</strong><br />
         <div class="onlinelist">
            <div class="users" id="whois_online">
               <!-- BEGIN whoisrow -->
                  <div>
                     <div class="inner">
                        <div class="user"><img src="{T_IMAGESET_PATH}/{whoisrow.USER_STATUS}.png" class="online_img" /> {whoisrow.USERNAME_FULL}</div>
                     </div>
                  </div>
               <!-- END whoisrow -->
            </div>
         </div>
         <span class="corners-bottom"><span></span></span>
      </div>
   </div>
      <div class="navbar">
         <div class="inner">
            <span class="corners-top"><span></span></span>
            <div class="chatform" align="center">
               {L_DETAILS} <img src="{T_IMAGESET_PATH}/act_indicator.gif" id="act_indicator" /> <strong>{L_UPDATES} <span id="update_seconds">{DELAY}</span> {L_UNIT}</strong>
            </div>
            <span class="corners-bottom"><span></span></span>
         </div>
      </div>
   <!-- IF S_CHAT -->
      <!-- INCLUDE overall_footer.html -->
   <!-- ENDIF -->
<!-- ENDIF -->
Here is the website : http://www.torontois.com

Thanks in advance for your assistance and if you need more info, please let me know and I will provide.
Tchuss.
Alexandre

Re: AJAX Chat MOD 2.0.0 Beta8 in Portal 3 side block: need Help

Posted: 24. January 2010 10:29
by ardienne
Are there any IDE's available, to develop website using Ajax? I am having a project, in which I have to develop a website using Ajax, and hardcoding ajax is very difficult and time consuming. So are there any Ajax IDE's available which can help in rapid development of web-site?
___________________
UK matrimonials

Re: AJAX Chat MOD 2.0.0 Beta8 in Portal 3 side block: need H

Posted: 30. August 2010 13:48
by Mess
Did you get this fixed Alexandrej?
I am looking for the same solution. :)