PHP and AJAX: How to append json_encode data to multiple unique IDs <DIV>'s?

Question

I'm trying to append the data inside json_encode to my DIVs that are being created in my PHP WHILE loop. To be more clear here is my fiddle for demonstration.

I have one DIV with a unique ID: desks(the small box you see). When my "aht" button is clicked it runs show_aht.php.

I want my data "time" from show_aht.php to replace the number inside every appropriate "desk" DIV, so display the "time" value being retrieved from my script.

Problem: It is not displaying, I'm having problem how to append/replace using my unique ID

thanks in advance!

map.php WHILE loops that executes queries to create Desk and Station DIV:

//desks
while($row = mysqli_fetch_assoc($desk_result)){ 
                //naming values from coordinates table
                $id       = $row['coordinate_id'];
                $x_pos    = $row['x_coord'];
                $y_pos    = $row['y_coord'];
                $sec_name = $row['section_name'];
                $sta_num  = $row['station_number'];
                $position = $row['ver_hor'];

                //draw a DIV box at its X,Y coordinate   
                //if the desks belong in the section names below then assign the class name to make desks horizontal
                $class = "desk_box_ver"; //by default make desks vertical, by assigning class name

                if($position == "horizontal"){
                    $class = "desk_box_hor";//assign the class name to make desks horizontal
                }

THIS IS WHERE I WANT THE DATA "TIME" TO REPLACE the $sta_number value by using id = test_$id

                    //output all desks being read from the query
                    echo '<div class="' . $class . ' id="test_'.$id.'" data-rel="' . $id . '" style="left:' . $x_pos . 'px;top:' . $y_pos.'px;">' . $sta_num . '</div>' . "\n";
            }//end while

map.php AJAX How can I append in the the FOR loop below my DIV with id = test_$id?

<div id="aht"><!--aht button--> 
    <button id="aht_button">AHT</button>    
</div><!--aht button-->

<script type="text/javascript">
            $(document).ready(function() {
                $('#aht').click(function(){
                    $.ajax({
                    type:"GET",
                    url : "show_aht.php",
                    data:{} , // do I need to pass data if i'm GET ting?
                    dataType: 'json',
                    success : function(data){
                         alert(data);
                         //NOT WORKING PLEASE HELP
                         for(i = 0; i < data.length; i++){
                            $("#test_"+id).html(data[i])
                         }
                      }//end success
                });//end ajax
              });//end click
            });//end rdy
        </script>

show_aht.php - json_encode part

/**comparing usernames from both arrays*/
    $res = array();
    foreach($memo_data as $m){
        foreach($user_data as $u){
            //if theres a matching username 
            //display user and time
            if( ($m['memo_code'] == $u) && ($m['avg_handle_time'] != null) ){
                $res[] = substr($m['avg_handle_time'],0,-3);//removing decimals
            }
            //else if matching user but no time, do not display time
            elseif( ($m['memo_code'] == $u) && ($m['avg_handle_time'] == null) ){
                $res[] = "NA";
            }
        }
    }

    $final_res = json_encode($res);
    echo $final_res;

Can you add the results of a console.log(data); (in the success function) to your question? — jeroen
– jeroen, Commented Nov 10, 2014 at 18:20
Now look at your browser console to see the actual data. It's a debugging tool. It doesn't change whether or not your code works. — Sonny
– Sonny, Commented Nov 10, 2014 at 19:09
It should be a javascript object and the exact contents and structure determine how you should loop through it and then you need to decide where you add what. — jeroen
– jeroen, Commented Nov 10, 2014 at 19:15
I was asking the wrong question sorry, I updated everything please look above. — alda1234
– alda1234, Commented Nov 10, 2014 at 20:15

Marcus McLean · Accepted Answer · 2014-11-10 18:25:11Z

1

I'd do what @jeroen suggests. console.log(data); right after success. You could also try a complete: function(data) { ... and log the data that way there will always be a result.

Also, is there a particular reason you're using POST? It seems to me that you're GETting data.

answered Nov 10, 2014 at 18:25

Marcus McLean

1,3983 gold badges13 silver badges26 bronze badges

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

3 Comments

alda1234 Over a year ago

yes I think thats one of the problems, I need to use GET instead of POST. Ill update it now. I still dont see how using console.log will help me append the result to the different DIVs in my WHILE loop ?

Marcus McLean Over a year ago

Using .append() as you had it before will accomplish that. You're just using console.log() as a debugging tool.

alda1234 Over a year ago

I was asking the wrong question sorry, I updated everything please look above. thanks

Kelwen Souza · Accepted Answer · 2014-11-11 14:44:58Z

0

//NOT WORKING PLEASE HELP
   for(i = 0; i < data.length; i++){
    $("#test_"+id).html(data[i])
   }

Of course it's not working, Inside your .success function, where are you trying to get the variable id ($("#test_"+id)) from? As far as I'm concerned you're using id, as a javascript variable. So.. is it initialized globally in the scope of javascript? If so, does the variable has any value? Analyzing this, I concludes that right there, the JQuery is not appending due to id error.

If you use $.POST, make sure you pass on purpose some irrelevant data, just for tests. But sure, use $.GET.

Post some feedback to see what's going on after you fix it, or explain what is happening right there.

answered Nov 11, 2014 at 14:44

Kelwen Souza

1096 bronze badges

4 Comments

alda1234 Over a year ago

on the console it does say "id is is undefined". How can I initialize the "id" so I may use it for every "desk" DIV? I've been going on circles looking online

Kelwen Souza Over a year ago

You did a for (i = 0; i < data.length; i++), right? Cause you want to add some data into divs/anything with id #test_1, #test_2 and so on, am I right? So you can easily use variable i from the loop, instead of id, put $("#test_"+i), and then you'll get #test_1, #test_2, and etc. Test it. But of course, the variable i is starting at 0, so make sure to handle it with your named ids to match.

alda1234 Over a year ago

It didn't do anything. I think I know where the problem is. I need to compare the username from show_aht.php with username from map.php. If they match thats how I will append the data inside the DIV.. im just a bit confused on how to do it first

Kelwen Souza Over a year ago

In the other hand, we from stackflow are just a bit confused with exactly what you want to do hehe. If the problem was appending to the matching divs, follow my instructions, otherwise, I dont know what the real problem is hehe.

alda1234 · Accepted Answer · 2014-11-17 17:53:40Z

0

I found my own solution here is the answer:

success : function(data){
console.log(data);
for(var i = 0; i < data.length; i++) { // loop over results
    var divForResult = $('#desk_' + data[i]['station']); // look for div for this object
    if (divForResult.length) { // if a div was found
        divForResult.html(data[i]['aht_value']); // set inner HTML
    }
}

} // end success

answered Nov 17, 2014 at 17:53

alda1234

2041 gold badge4 silver badges15 bronze badges

Collectives™ on Stack Overflow

PHP and AJAX: How to append json_encode data to multiple unique IDs <DIV>'s?

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related