0

I have the following hidden input field with a dynamic value. 

<input id='max' type='hidden' value='<?php echo $num_rows; ?>'>

I'm wanting to update that value based on $num_rows that are returned from a ajax_load_profile_friends.php page.

Here is what I have so far:

    $("#viewAllFriends").click(function(){
        counter = counter+16;

            $.ajax({

                url:'includes/handlers/ajax_load_profile_friends.php',
                type:'POST',
                data:{'username':username, 'num_friends':num_friends, 'counter':counter},

                    success: function(data) {
                        $('#data_friends').html(data);
                        $('#max').val("??");
                            }

                    });
            });

With each successive click of View More Friends button, I get a new value for $num_rows. Being new to Ajax I'm not sure how to return it to the success function and then update the value in the hidden input.

$num_rows returns like this $num_rows = $result->num_rows; in ajax_load_profile_friends.php.

This is part of a larger problem I was having earlier but have narrowed it down to this and tried to simplify my question. Any help, examples, links would be super!

Raylene
  • 296
  • 2
  • 13

1 Answers1

1

Change the PHP so it returns JSON. So instead of

echo $html;

it should do:

echo json_encode(array('num_rows' => $num_rows, 'html' => $html));

Then in the JavaScript you can extract both return values:

        $.ajax({

            url:'includes/handlers/ajax_load_profile_friends.php',
            type:'POST',
            dataType: 'json',
            data:{'username':username, 'num_friends':num_friends, 'counter':counter},

            success: function(data) {
                $('#data_friends').html(data.html);
                $('#max').val(data.num_rows);
            }

        });
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • hmmm...The button goes dead with this script and I get some console errors. – Raylene Feb 26 '19 at 03:26
  • Is `#viewAllFriends` inside `#data_friends`? – Barmar Feb 26 '19 at 03:27
  • If you're overwriting any elements that have event bindings, see https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Barmar Feb 26 '19 at 03:30
  • no `#viewAllFriends` is just below the `#data_friends div` . – Raylene Feb 26 '19 at 03:30
  • Then I can't think of any reason why the button would go dead. Unless there's a syntax error that's causing this function not to run at all. – Barmar Feb 26 '19 at 03:30
  • `data->html` and `data->num_rows` should have been `data.html` and `data.num_rows`, of course. – Barmar Feb 26 '19 at 03:31
  • Maybe I'm not implementing this correctly: `echo json_encode(array('num_rows' => $num_rows, 'html' => $html));` – Raylene Feb 26 '19 at 03:32
  • The errors I'm getting are: `Uncaught SyntaxError: Unexpected Token` and `GET about:blank net::ERR_UNKNOWN_URL_SCHEME` – Raylene Feb 26 '19 at 03:34
  • There's no `about:blank` in my answer, that's not related. – Barmar Feb 26 '19 at 03:36
  • `data->htm` and `data->num_rows` should have been `data.html` and `data.num_rows`. I changed this and am not getting the errors now, but the button is still unresponsive. it no longer runs my queries. – Raylene Feb 26 '19 at 03:37
  • Did you replace `$html` with the actual variable in your script that holds the output? That was just intended as a placeholder. – Barmar Feb 26 '19 at 03:39
  • I just did that yes. It's sitting in a while loop and returning the following: `$html = " ";` It's only friend at a time now. weird – Raylene Feb 26 '19 at 03:43
  • Does the Network tab show that the AJAX call is being sent? Do you see the response coming back? – Barmar Feb 26 '19 at 03:45
  • It's only returning one friend in` #data_friends` now and the hidden input is still sitting at the default value of 8. – Raylene Feb 26 '19 at 03:49
  • my success function is as follows: `success: function(data) {$('#data_friends').html(data.html);$('#max').val(data.num_rows);}` – Raylene Feb 26 '19 at 03:51
  • I switched it back so that `echo json_encode(array('num_rows' => $num_rows));` and removed `dataType: 'json',` The queries run fine again and my div populates with user images, but the value in the hidden input field remains unchanged. It is echoing `{"num_rows":43}` with each successive click up to 43 which is the total number of records. is there a way to get this to update `$('#max').val(data.num_rows);` in the success function without changing the `dataType`? – Raylene Feb 26 '19 at 04:10
  • You could call `JSON.parse(data)` in the success function, but that's what jQuery does when you use `dataType: 'json'`. If you don't include the HTML in the JSON array, then you won't have anything to put in `#data_friends`. I can't figure out why it's not working when you follow my answer exactly. – Barmar Feb 26 '19 at 17:07
  • Hello Barmar. Me neither. I did raise a new question based on your method here: https://stackoverflow.com/questions/54879979/php-variables-not-returning-to-success-ajax-jquery-post-correctly-using-json-enc/54880010?noredirect=1#comment96531318_54880010 when I declare `$html='';` and concatenate `$html .=` I get a return of 40 records, but not 43, weird. I also, still do not get my hidden input value to change. The new question shows my `ajax_load_profile_friends.php` in more detail. Do you see anything here where I might be missing with `json_encode`? – Raylene Feb 26 '19 at 23:58
  • I can't see anything wrong there, it really should work. I suspect the problem has something to do with your HTML. Is your web page accessible on the Internet? – Barmar Feb 27 '19 at 19:02