Amath1an Amath1an - 7 months ago 9
Javascript Question

Using AJAX to Post to PHP -- Getting Values Back to Original Script

Sorry for the title gore -- I'm not even sure what I'm really asking.

I have a Jquery script which checks for a border color. If the color matches, then it will save it to an array and send it off to a PHP script.

var fields={};
fields[0]=$('.block0').css("border-color");
var divs={};
divs[0]=$('.block0 h2').html();
//The above are just examples sense the code is a little lengthy
var c=0;
var i=0;
var elements={};
while (c !== 24)
{
if (fields[c] == "rgb(129, 222, 252)")
{
elements[i]=divs[c];
alert (elements[i]);
i++;
}
c++;
}
$.ajax({
url: "process.php",
data: elements,
type: "POST",
});


These are all located within a "hello.php" file.

When done, as you can see, it will pass the variables to a PHP script called "process.php". Within this script, there are a couple things that happens, like grabbing more information from a MYSQL database, a config file, etc. then my GOAL is to pass this extra information BACK to the "hello.php" file.

The reason why I am doing it like this is because I'm trying (my best) to avoid any redirects or refreshes. I am not entirely sure if I am doing it the right way.
Anyways, I am at a little roadblock when trying to pass the extra information from "process.php" to "hello.php". Any and all suggestions are greatly appreciated!

EDIT: Here is some more, per request:

hello.php

var openIt=function()
{
var fields={};
fields[0]=$('.block0').css("border-color");
fields[1]=$('.block1').css("border-color");
fields[2]=$('.block2').css("border-color");
fields[3]=$('.block3').css("border-color");
fields[4]=$('.block4').css("border-color");
fields[5]=$('.block5').css("border-color");
fields[6]=$('.block6').css("border-color");
fields[7]=$('.block7').css("border-color");
fields[8]=$('.mmod2').css("border-color");
fields[9]=$('.mmod3').css("border-color");
fields[10]=$('.mmod4').css("border-color");
fields[11]=$('.mmod5').css("border-color");
fields[12]=$('.mmod6').css("border-color");
fields[13]=$('.mmod7').css("border-color");
fields[14]=$('.mmod8').css("border-color");
fields[15]=$('.mmod9').css("border-color");
fields[16]=$('.ttemp2').css("border-color");
fields[17]=$('.ttemp3').css("border-color");
fields[18]=$('.ttemp4').css("border-color");
fields[19]=$('.ttemp5').css("border-color");
fields[20]=$('.ttemp6').css("border-color");
fields[21]=$('.ttemp7').css("border-color");
fields[22]=$('.ttemp8').css("border-color");
fields[23]=$('.ttemp9').css("border-color");
var divs={};
divs[0]=$('.block0 h2').html();
divs[1]=$('.block1 h2').html();
divs[2]=$('.block2 h2').html();
divs[3]=$('.block3 h2').html();
divs[4]=$('.block4 h2').html();
divs[5]=$('.block5 h2').html();
divs[6]=$('.block6 h2').html();
divs[7]=$('.block7 h2').html();
divs[8]=$('.mmod2 h2').html();
divs[9]=$('.mmod3 h2').html();
divs[10]=$('.mmod4 h2').html();
divs[11]=$('.mmod5 h2').html();
divs[12]=$('.mmod6 h2').html();
divs[13]=$('.mmod7 h2').html();
divs[14]=$('.mmod8 h2').html();
divs[15]=$('.mmod9 h2').html();
divs[16]=$('.ttemp2 h2').html();
divs[17]=$('.ttemp3 h2').html();
divs[18]=$('.ttemp4 h2').html();
divs[19]=$('.ttemp5 h2').html();
divs[20]=$('.ttemp6 h2').html();
divs[21]=$('.ttemp7 h2').html();
divs[22]=$('.ttemp8 h2').html();
divs[23]=$('.ttemp9 h2').html();


var c=0;
var i=0;
var elements={};
while (c !== 24)
{
if (fields[c] == "rgb(129, 222, 252)")
{
elements[i]=divs[c];
alert (elements[i]);
i++;
}
c++;
}
$.ajax({
url: "process.php",
data: elements,
type: "POST",
});

}


It's ugly, I know ....

Here is another snippet of hello.php actually throwing in the headers and stuff:

<?php
$sql = "SELECT * FROM case_info";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0)
{
$row = array();
while($row[] = mysqli_fetch_array($result));
$max=count ($row);
$c=0;
while (($max-1) <> $c)
{
echo '<script>
var block'.$c.'=function(){
$(".block'.$c.'").css("border",".15vw solid #81DEFC");

}
</script>';
echo '<div onClick="block'.$c.'()" class="block'.$c.'">
<div class="headerbl"><h2>'.$row[$c]["id"].'</h2></div>
<p>'.$row[$c]["client"].'</p>
</div>';
$c++;
}
}

?>


Then finally, there will be a new which will contain information when a user opens one of these "blocks". Basically, the user will:


  1. Click "

  2. Click Open

  3. A new overlay-type div will contain more information about the speicifc "block" they clicked. Think of it was like a "Read More" type of scenario.


Answer

Use ajax callback function

$.ajax({
        url: 'process.php',
        type: 'POST',
        data: data,
        contentType: false,
        cache: false,
        processData: false,
        success: function(data) {
            var obj = $.parseJSON(data);
            alert(obj.result);                  
        }
});

Use json format data to pass the variables from your php script, in your php script should be something like this:

$jsonArray = array();
$jsonArray['result'] = 'result';
$jsonArray['data'] = 'data';
echo json_encode($jsonArray);

Then parse the json data in your javascript using parseJSON(), to use the variable, use obj.result or obj.data.