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

Question

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 <div> which will contain information when a user opens one of these "blocks". Basically, the user will:

Click "<div class="block0">
Click Open
A new overlay-type div will contain more information about the specific "block" they clicked. Think of it was like a "Read More" type of scenario.

Please provide more details on where hello.php is involved in this whole process. What we can see based on your code sample is a simple array manipulation and a post to process.php. — Dan H
– Dan H, Commented Apr 17, 2016 at 1:40

Charas · Accepted Answer · 2016-04-17 01:58:14Z

1

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.

answered Apr 17, 2016 at 1:58

Charas

1,8374 gold badges27 silver badges62 bronze badges

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

1 Comment

Amath1an Over a year ago

You're the man! Worked like a charm ... so simple, but for some reason it just didn't click with me. Thanks!

Nelson Melecio · Accepted Answer · 2016-04-17 01:44:08Z

0

JQuery AJAX have a function that will do what you just need.

success() function:

A function to be called if the request succeeds. The function gets passed three arguments: The data returned from the server, formatted according to the dataType parameter or the dataFilter callback function, if specified; a string describing the status; and the jqXHR (in jQuery 1.4.x, XMLHttpRequest) object.

You can do your ajax like this:

$.ajax({
            url: "process.php",
            data: elements,
            type: "POST",
            success: function(data) {

               // data is a variable coming from process.php as return value

            }
        });

Best of luck buddy!

answered Apr 17, 2016 at 1:44

Nelson Melecio

1,5143 gold badges14 silver badges21 bronze badges

1 Comment

Amath1an Over a year ago

Thanks for the information! Just out of curiosity, since I'm a little new to Ajax (if you can't tell yet) and this doesn't logically make sense to me, how does the Jquery know what specifically to grab from the process.php script? For example, if I set $c=1 in process.php, how would the success function know how to grab that?

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related