New to ajax

doddsey_65 · September 20, 2010

okay so im new to ajax. Not to php or html though. What i want is a quick reply box like on most forums, but the quick reply will be sent to the server and the reply will be displayed in the posts section without having to refresh the page or go to another page. I heard ajax could do this. So any help? where should i look for tutorials on this? can someone maybe explain the process?

gamesmstr · September 20, 2010

I did a short summary of what does what in this thread. If it still confuses you, then feel free to ask.

http://www.phpfreaks.com/forums/index.php/topic,309994.0.html

doddsey_65 · September 21, 2010

I did a short summary of what does what in this thread. If it still confuses you, then feel free to ask.

http://www.phpfreaks.com/forums/index.php/topic,309994.0.html

thanks for the reply but im still confused. so i will need more than one file to process this data?

gamesmstr · September 22, 2010

Not necessarily... You can put the Javascript in the <head> section of your page and have it call the same file it is in.

Lets see if I can explain this in a non code way and see if it makes sense.

Think of your browser and the server as 2 sides of a deep ravine and you want to build a cable car to cross it. First off we need to find a spot to make that crossing. That part is our target <div> </div>. Next we need to construct the cable mechanism that actually will enable transportation across. That part is our createXMLHttpRequest() function from my example in the thread I mentioned earlier. Next we need the cable car to actually transport things across. This would be the AJAX() function. This particular function is capable of sending our variables back and forth across the divide between server and client and getting the output of the designated PHP file and bringing the output back across to the client side at our <div> location.

Does that help any?

doddsey_65 · September 22, 2010

i would love to say that makes perfect sense and i get it but i dont sorry. I learnt php by myself and im not a good learner lol. lets see if i can make my request simpler. I have this in test.php:

<SCRIPT>
function createXMLHttpRequest() {
   if (typeof XMLHttpRequest != 'undefined') {
      return new XMLHttpRequest();
   }
   try {
      return new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
         try {
            return new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {}
   }
   return false;
}</SCRIPT>


<SCRIPT>
function AJAX(var1) {
   var xmlHttp = createXMLHttpRequest();
//var1 is passed with the function call, var2 is form data that can be retrieved
   var var2 = document.getElementById("var2data").value;
//this sets up the parameters to be sent using the POST method later
   params = "var1=" + var1 + "&var2=" + var2;
//this opens the target php file and tells it what method data will be sent in
   xmlHttp.open("POST","test.php", true);
   xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   xmlHttp.onreadystatechange = function() {
      if(xmlHttp.readyState == 4 && xmlHttp5.status == 200) {
//this tells it where to put the output of the target php file
         document.getElementById("dynamic_update").innerHTML = xmlHttp.responseText;
      }
   }
//This sends the var1 and var2 variables we defined earlier via the POST method
   xmlHttp.send(params);
}
</SCRIPT>

<div id="dynamic_update">
</div>

<form name="test" action="">
<textarea name=""></textarea>
<input type="submit" value="Submit" name="submit_btn" />
</form>

when the user hits submit the div is instantly populated with the contents of textarea.

how would i do that

gamesmstr · September 23, 2010

test.php should read something like this:

<html>
  <head>
    <script type="text/javascript">
      function createXMLHttpRequest() {
        if (typeof XMLHttpRequest != 'undefined') { 
          return new XMLHttpRequest(); 
        } 
        try { 
          return new ActiveXObject("Msxml2.XMLHTTP"); 
        } catch (e) {
            try { 
              return new ActiveXObject("Microsoft.XMLHTTP"); 
            } catch (e) {}
        }
        return false; 
      }
    
      function AJAX(action) {
        var xmlHttp = createXMLHttpRequest();
			var input=document.getElementById("input").value;
        params = "action=" + action + "&input=" + input;
        
        xmlHttp.open("POST","test.php", true);
        xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    
        xmlHttp.onreadystatechange = function() {
          if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            document.getElementById("dynamic_update").innerHTML = xmlHttp.responseText;
            refresh_stats();
          }
        }
        xmlHttp.send(params);
      }
    </script>
  </head>
  <body>
  	<?php
	$action=$_POST['action'];
	$input=$_POST['input'];
	if ($action=''){
		?>
    <div id="dynamic_update"></div>
    <textarea id="input"></textarea>
    <input type="button" value="Submit" onClick="javascript:AJAX('update');">
      <?php
	}else if($action='update'){
		echo"$input";
	}
	?>
  </body>
</html>

I'm a tad tipsy right now, but his should be pretty close.

doddsey_65 · September 23, 2010

Thanks, i got it working and it is also sending the input to the database. However i dont want it to be displayed in a div above the input. I want the data to be displayed in a td. Here is the layout of the table that shows the poster and the post contents. when i send it to the database everything is getting sent and the tables are populated with the correct data. so how would i make it so that it appears in the td <td class="post_content"> I tried to give this td the id dynamic_update but that didnt work.

echo '<table class="post_table">
<tr>
<th class="post_header_name">Posted By</th>
<th class="post_content_header">Content</th>
</tr>';

  $sql1 = mysql_query("SELECT * FROM ".DB_PREFIX."posts
    WHERE topic_id = '$topic_id' ORDER BY post_time ASC $max")
     or die(mysql_error());
    
    while ($posts = mysql_fetch_object($sql1)) {

echo '<tr class="gradient">';

echo '    <td class="post_poster">';
        echo '<p class="post_poster">';
echo '</p></p></td>
        
        <td class="post_content">';
echo '</td></tr>';

}	
}

gamesmstr · September 23, 2010

try putting your div inside the TD

doddsey_65 · September 23, 2010

it works but the content is posted inside a td that already has content. I need it to make a new one.

basically; im using a while loop to pull all records from the database that have an id equal to the get value. the records are put into a table with the post information going in the left td and the content going in the right td. When the user hits quick reply i want their reply to be put into a new tr underneath the others and have the contents of the quick reply in the right td in the new tr.

gamesmstr · September 24, 2010

OK.. pull the inner html in as a variable, pass it to the php file, echo it 1st and then echo the new data.

doddsey_65 · September 26, 2010

sorry but im still having trouble. normally i would give up but i need this feature in.

so lets make it clear(hopefully lol)

posts.php which shows all the posts for that forum reads like this: (simplified for example)

<script type="text/javascript">
      function createXMLHttpRequest() {
        if (typeof XMLHttpRequest != 'undefined') { 
          return new XMLHttpRequest(); 
        } 
        try { 
          return new ActiveXObject("Msxml2.XMLHTTP"); 
        } catch (e) {
            try { 
              return new ActiveXObject("Microsoft.XMLHTTP"); 
            } catch (e) {}
        }
        return false; 
      }
    
      function AJAX(action) {
        var xmlHttp = createXMLHttpRequest();
	var input=document.getElementById("input").value;
        params = "action=" + action + "&input=" + input;
        
        xmlHttp.open("POST","test.php", true);
        xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    
        xmlHttp.onreadystatechange = function() {
          if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            document.getElementById("dynamic_update").innerHTML = xmlHttp.responseText;
            refresh_stats();
          }
        }
        xmlHttp.send(params);
      }
    </script>


<table>
<th>Poster</th>
<th>Content</th>
<tr>
<td>CONTENTS TO SHOW WHO POSTED IT</td>
<td>CONTENTS OF THE POST</td>
</tr></table>

then in test.php i want

<textarea id="input"></textarea>
<input type="button" value="Submit" onClick="javascript:AJAX('update');">

and some other code so that when the user hits submit a new table row is added with the 2 new <td>s so that when they do hit submit the textarea contents go into the <td> which holds the post content and their user information( i can handle this part) goes into the first <td> the one which tells you who posted it.

Sign In

New to ajax

Recommended Posts

doddsey_65

Link to comment

Share on other sites

gamesmstr

Link to comment

Share on other sites

doddsey_65

Link to comment

Share on other sites

gamesmstr

Link to comment

Share on other sites

doddsey_65

Link to comment

Share on other sites

gamesmstr

Link to comment

Share on other sites

doddsey_65

Link to comment

Share on other sites

gamesmstr

Link to comment

Share on other sites

doddsey_65

Link to comment

Share on other sites

gamesmstr

Link to comment

Share on other sites

doddsey_65

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information