change php variable value in index.php with ajax and without reloading the page

Question

I need to load $message1 and $message2 back into index.php when the corresponding anchors are clicked, with ajax, so that the new values are displayed in index.php without the page resfreshing. this code functions as is, I just can't figure out how to do this, could anybody help me figure out how? I've never written this type of script before and have gotten a little advice on how to do it but I'm still very confused.

this is my general.js file

$(".vote").click(function() {
var id = $(this).attr("id");
var name = $(this).attr("name");
var eData = $(this).attr("data-options");
var dataString = 'id='+ id + '&' + eData ;
var parent = $(this);

if(name=='up')
{
   $(this).fadeIn(200).html('');
   $.ajax({
      type: "POST",
      url: "up.php",
      data: dataString,
      cache: false,
      success: function(html){
         parent.html(html);
      }
   });
}
else
{
   $(this).fadeIn(200).html('');
   $.ajax({
      type: "POST",
      url: "down.php",
      data: dataString,
      cache: false,
      success: function(html){
         parent.html(html);
      }
   });
 }
 });

here is the html from my index.php

 <?php

 $sql = mysql_query("SELECT * FROM blogData ORDER BY id DESC");
 $sql2=mysql_query("SELECT * FROM messages WHERE mod(mes_id,2) = 0 ORDER BY mes_id DESC");
 $sql3=mysql_query("SELECT * FROM messages WHERE mod(mes_id,2) = 1 ORDER BY mes_id DESC");

 $count_variable = 0;

    while(($row = mysql_fetch_array($sql))AND($row2 = mysql_fetch_array($sql2))AND($row3 = mysql_fetch_array($sql3)) ){
        $id = $row['id'];
        $title = $row['title'];
        $content = $row['content'];
        $category = $row['category'];
        $podcast = $row['podcast'];
        $datetime = $row['datetime'];

        $message1=$row2['msg'];
        $mes_id1=$row2['mes_id'];
        $totalvotes1=$row2['totalvotes'];

        $message2=$row3['msg'];
        $mes_id2=$row3['mes_id'];
        $totalvotes2=$row3['totalvotes'];


    ?>

<table class="content">
 <tr>
 <td>


 <div id="main">
 <div id="left">
 <span class='up'><a href="" class="vote" name="up" data-options="key1=<?php echo $mes_id1;?>&key2=<?php echo $mes_id2;?>"><img src="up.png" alt="Down" /></a></span><br />
 <?php echo $totalvotes1; ?><br />
 </div>
 <div id="message">
 <?php echo $message1; ?>
 </div>
 <div class="clearfix"></div>
  </div>
 <div id="main">
 <div id="right">
 <br />
 <?php echo $totalvotes2; ?><br />
 <span class='down'><a href="" class="vote" name="down" data-options="key1=<?php echo $mes_id1;?>&key2=<?php echo $mes_id2;?>"><img src="down.png" alt="Down" /></a></span>
 </div>
 <div id="message">
 <?php echo $message2; ?>
 </div>
 <div class="clearfix"></div>
 </div>
 </td>
 </tr>
 </table>

 <?php
  }
  ?>

and here is my up.php file

 <?php

 session_start();
 include("config.php");

 $ip=$_SERVER['REMOTE_ADDR']; 

 $mes_id1 = $_POST['key1'];
 $mes_id2 = $_POST['key2'];
 $totalvotes1 = $_POST['key3'];

 $ip_sql=mysql_query("select ip_add from Voting_IP where mes_id_fk='$mes_id1' and ip_add='$ip'");
 $count=mysql_num_rows($ip_sql);

 $ip_sql2=mysql_query("select ip_add from Voting_IP where mes_id_fk='$mes_id2' and ip_add='$ip'");
 $count2=mysql_num_rows($ip_sql2);

 // if the user has already voted, execute script
 if($count==0 && $count2!=0)
 {
 $sql = "update Messages set totalvotes=totalvotes+1  where mes_id='$mes_id1'";
 mysql_query( $sql);

 $sql_in = "insert into Voting_IP (mes_id_fk,ip_add) values ('$mes_id1','$ip')";
 mysql_query( $sql_in);

 $sql = "update Messages set totalvotes=totalvotes-1  where mes_id='$mes_id2'";
 mysql_query( $sql);

 $sql_in = "DELETE FROM Voting_IP WHERE mes_id_fk='$mes_id2'";
 mysql_query( $sql_in);


 // if the user has not voted, execute script
 }
 else if($count==0 && count2==0)
 {
$sql = "update Messages set totalvotes=totalvotes+1  where mes_id='$mes_id1'";
 mysql_query( $sql);

 $sql_in = "insert into Voting_IP (mes_id_fk,ip_add) values ('$mes_id1','$ip')";
 mysql_query( $sql_in);

 }
 ?>

Quick comment, look here: var eData = $(this).attr("data-options"); var dataString = 'id='+ id + '&' + eData ; You are sending an improper data string with Ajax.. ever value needs to have 'key=value' and those must be separated with '&'. eData doesn't have a key here. — Klik
– Klik, Commented Feb 20, 2013 at 2:36
i just posted the rest of the index.php where I declared the variables — trickpatty
– trickpatty, Commented Feb 20, 2013 at 2:47
@TheWeirdNerd the script works right now without doing that... the values are carried over and changed in my DB. or are you saying that changing the script you posted will make it function so that it displays back into index.php without reloading....? — trickpatty
– trickpatty, Commented Feb 20, 2013 at 2:49

Klik · Accepted Answer · 2013-02-20 03:18:19Z

3

In your first Ajax request, for example, you have set the url to up.php

   $.ajax({
      type: "POST",
      url: "up.php",
      data: dataString,
      cache: false,
      success: function(html){
         parent.html(html);
      }
   });

That means that you'll be retrieving data from up.php. The way that an Ajax request works is that ANY data displayed on the php page, after it's done loading, will be returned as a string to the page that sent the Ajax request.

In your up.php page, you have not put any echo statements or any html code. Thus there is no data in your success function being returned. Which makes parent.html(html) redundant.

You also cannot update variables on one php page from an Ajax request like you have specified. What you need to do is update the HTML data, or build the up.php page so that it returns a variable which you want to set to a Javascript variable in your success function....

i.e.

In up.php you must do the sql statement again, to retrieve the data that you want to change $message to and then echo that...

More or less like this: (very generalized I know)

$data = $_POST['ajaxRequestData'];
//do something with the data to create a new SQL statement

//do the sql statement and extract the value of $message that you're looking for
//THEN****
echo $message;

Next in your Ajax success function...

$.ajax({
      type: "POST",
      url: "up.php",
      data: dataString,
      cache: false,
      success: function(data){
         //here data will be equal to the value that you echoed in the up.php page.
         //do whatever you want to do with it... You will not have access to the php variable on this page with Javascript. 
         //Server sided languages like PHP do not talk directly with client sided languages like Javascript except with Ajax.

         updateMessage(data); //what I would do is create a function to send the variable to, to perform the necessary modifications to update your webpage.
      }
});
//Note that as soon as the success function ends, the returned data is no longer available to you 
//so you must pass it to a function (or a global variable) to be able to use it.

edited Feb 20, 2013 at 3:18

answered Feb 20, 2013 at 2:49

Klik

1,7861 gold badge23 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

trickpatty Over a year ago

i edited the script and posted where i decalre the variables in index.php and all the variables are being defined and manipulated correctly right now with my php and in my database. the only issue is displaying them back into index.php

trickpatty Over a year ago

so are you saying in my up.php file, I need to declare $eData = $_POST['eData']; and then post the $eData variable in my anchor?

trickpatty Over a year ago

Thank you! ok so, $message1 = 1 and then up.php is executed and now $message1 = 2, and if I implement this script correctly it should be able to display that value back into the html in my index.php file...?

Klik Over a year ago

You cannot update $message1 with an Ajax request. Forget about trying to update the PHP variable. Instead update the div with the id message with a variable returned from an Ajax request.

Klik Over a year ago

Any more questions? Also if you managed to figure out your problem based on my answer, it would be nice to mark as an answer. Just sayin.

|

Collectives™ on Stack Overflow

change php variable value in index.php with ajax and without reloading the page

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related