Append new MySQL data to DIV with already fetched MySQL data rows

Good day all, I am starting to learn PHP, Mysql(i) and CSS5 for a month now but ive come across an issue wich iam unable to solve with just PHP alone. Jquery and Ajax have to be used to solve it and I have no idea where to start. I want to learn, not just to copy&paste codes...

My situation: 2 Divs: messages and tinymce

(Div)Messages contains all the messages users have posted (Div)Tinymce contains an input textbox with tinymce loaded.

The entire messaging system works fine but it would be nice to get new messages without reloading an entire DIV. The goal is to add the new row to the already fetched data from the MySQL database, that way the content (like Youtube movies) will not be refreshed. The new data can come from any user who makes an entry and have to be added to data already present.

For what I can understand this can be done with JQuery and something with comparing date/time to one and other.

Answers


Well, let me know if I understand your issue. You want that people enter to your web site and see a with messages and other with a and a textbox where you will enter a message, then a button to save the message and automatically you want that the with messages, autoload the data from the data base. is that your issue?

Well if it's ok.

I have some ideas that you can use with jQuery.

  1. You have to link the jquery file.
  2. Inside a < script> tags, put the function $(document).ready();
  3. Inside the .ready function put a function with .click. In this function you have to put the function that you want do when people make click in the button to save the data. I supose you have a file to receive the data with php and process the data, so I will put a .post() to send the data. And I will use the .serialize() to get the data from your . Whe you send the .post() in the variable "dataReturn" you can catch a return from the process of save the data. for example "0" if there is an error or "1" if all it's ok and here we will send a function loadMessages to load the messages from the database. An example:
  4. The loadMessages function, here you can put a .post() function to get the messages from the data base, you make a post to an php file to read and I suguess use a json encode from php, to read the messages and then with jquery read that Json and put the messages in the . I will guess that you are using a < li> for the messages, but you can edit that part and make it different.
  5. And finally, here you will load the messages every time that you send new messages but if you don't send a message, maybe other user send one, so you need and interval to make the function loadMessages every 5 seconds or 10. The function is setInterval you can learn about this in the w3school, it's a javascript function 1st parameter the function, 2nd the interval to send the function in miliseconds.

This is an easy way to do what you want, you can use other features to make this faster but you can start with this and then you can make it better. for example using dates to determinate wich messages are new, but this is part of the PHP. :)

$( document ).ready(function() {

  $( "#yourButtonId" ).click(function() {

      var data = $( "#yourFormId" ).serialize();

      $.post( "yourPHPfileToSave.php", data,function( dataReturn ) {

         if(dataReturn==0){
                alert("There's an error.");
         }else{
              loadMessages();
         }
     });
   });
   setInterval(loadMessages(), 5000);
});

function loadMessages(){

    $.post( "yourPHPfileToRead.php",function( dataReturn ) {
           $.each( data, function( key, val ) {
              oldMessages = $("#YouMessagesDivId").html();
             $("#YouMessagesDivId").html(oldMessages+"<li>"+val+"</li>");
         });

     });
}

If you have a problem, let me know :) Regards. Have a nice day.


Need Your Help

AlphaAnimation over SurfaceView?

android surfaceview android-animation android-view

I am trying to use a fade-in (AlphaAnimation) effect. My view root contains a full-screen SurfaceView (not GLSurfaceView), and if I use mSurfaceView.startAnimation(mMyAnimation), it does not work,

How to download Qt4.8 on a Mac

macos qt qt4 qt-creator osx-mavericks

I'm new to Qt and was trying to download Qt version 4.8 from their website. I downloaded the Qt libraries 4.8.5 for Mac (185 MB) and debug libraries (480 MB). After installing both of them I found ...