Fullcalendar used twice, event display only works once

Question

Note: There are quite a few questions regarding Adam Shaw's FullCalendar plugin; I haven't been able to solve this issue using existing discussions but please point me to a relevant thread if one exists.

Using PHP/MySQL

---

I would like to display a calendar in two scenarios:

1. When a user checks their own information
2. When a user searches for another user's information

Case 1 works fine. Case 2 displays the calendar but not the event information, despite using what I believe is the same logic.

Each case has a database connection/query file, which ends in an echoed JSON array. These files both work - the output I get from both is copied below:

Case 1:

[{"title":"100","start":"2015-04-01"},{"title":"200","start":"2015-04-02"},{"title":"300","start":"2015-04-03"},{"title":"-2","start":"2014-04-04"},{"title":"-3","start":"2015-04-05"},{"title":"-1","start":"2015-04-04"},{"title":"-1","start":"2015-04-06"},{"title":"-300","start":"2015-04-07"},{"title":"-10","start":"2015-04-12"},{"title":"-10","start":"2015-04-13"},{"title":"-10","start":"2015-04-14"}]

Case 2:

[{"title":"800","start":"2015-04-08"},{"title":"900","start":"2015-04-09"},{"title":"1000","start":"2015-04-10"},{"title":"5000","start":"2015-04-15"}]

Each case also has its own configuration file:

Case 1 (currently working):

    <!--FullCalendar things -->
    <link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
    <link rel='stylesheet' href='fullcalendar/fullcalendar.print.css' media="print" />
    <script src='fullcalendar/lib/moment.min.js'></script>
    <script src='fullcalendar/lib/jquery.min.js'></script>
    <script src='fullcalendar/fullcalendar.js'></script>


    <script> 
    $(document).ready(function() {


            $('#calendar').fullCalendar({

        weekNumbers: true,
        allDayDefault: true,
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        events: 'db_connect.php'


            });
        }); 
    </script>

Case 2:

    <!--FullCalendar things -->
    <link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
    <link rel='stylesheet' href='fullcalendar/fullcalendar.print.css' media="print" />
    <script src='fullcalendar/lib/moment.min.js'></script>
    <script src='fullcalendar/lib/jquery.min.js'></script>
    <script src='fullcalendar/fullcalendar.js'></script>

    <script> 
    $(document).ready(function() {


            $('#search_calendar').fullCalendar({

        weekNumbers: true,
        allDayDefault: true,
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        events: 'search_results_db_connect.php'

            });
        }); 
    </script>

Again, in Case 2 the calendar itself shows up, but not the events. If I remove the 'weeknumbers' option from Case 2 the weeknumbers disappear from the correct page, so everything seems to communicate appropriately. I've quadruple-checked spelling and file structures, and I'm stumped. Any help is much appreciated - thank you!

Edit: I should also note that when I copy the Case 2 JSON array directly into the configuration file, the calendar works. I.e.:

    <script> 
    $(document).ready(function() {


            $('#search_calendar').fullCalendar({

        weekNumbers: true,
        allDayDefault: true,
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        events: //'search_results_db_connect.php'
                [{"title":"800","start":"2015-04-08"},{"title":"900","start":"2015-04-09"},{"title":"1000","start":"2015-04-10"},{"title":"5000","start":"2015-04-15"}]
            });
        }); 
    </script>

Edit 2: search_results_db_connect.php (Logic does not cover all cases at this point.)

    <?php
            //Creates variable $step_connect = mysqli_connect($servername, $username, $password, $database);
            include('/includes/step_dbc.php');

            // Check connection
            if (!$step_connect) {
                die("Connection failed: " . mysqli_connect_error());
            }

            if (isset($_GET['query'])) {
                $search_id = trim(htmlspecialchars($_GET['query']));

            $q_user = "SELECT * FROM users WHERE first_name LIKE '%$search_id%'
                OR last_name LIKE '%$search_id%' OR email LIKE '%$search_id%'";
            $r_user = mysqli_query($step_connect, $q_user);

            }

            if (mysqli_num_rows($r_user) == 1) {

                    $row = mysqli_fetch_assoc($r_user);
                    $q_user_id = $row['id'];

                    $q_steps = "SELECT steps, `date` FROM steps WHERE user_id = '$q_user_id'";
                    $r_steps = mysqli_query($step_connect, $q_steps);

                    if (mysqli_num_rows($r_steps) >0) {
                                while ($row = mysqli_fetch_assoc($r_steps)) {
                                        $step_array[] = array(
                                        'title' => $row['steps'],
                                        'start' => $row['date'],
                                    );
                                } 
                            } else {
                                echo "No recorded steps";
                            }
                        echo json_encode($step_array);
                    }

            ?>

the above code outputs the Case 2 JSON shown above.

Answer 1

There doesn't appear to be anything wrong with the code you have posted. I know you say it works, but you might want to post the search_results_db_connect.php code.

In the end you probably need to debug some more regarding the retrieval of the JSON data. To start, you could include an error callback to see if the ajax call results in an error response.

$('#search_calendar').fullCalendar({
    weekNumbers: true,
    allDayDefault: true,
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    events: {
        url: 'search_results_db_connect.php',
        error: function(jqXHR jqXHR, String textStatus, String errorThrown) {
            alert('Error: jqXHR.responseText: ' + jqXHR.responseText
                  + 'textStatus: ' + textStatus
                  + 'errorThrown: ' + errorThrown);
        }
    }
});

---

I think you can also add a success callback to see if the JSON is really being returned as you think it is.

    events: {
        url: 'search_results_db_connect.php',
        error: function(jqXHR jqXHR, String textStatus, String errorThrown) {
            //...
        },
        success: function(result) {
            alert('type: ' + (typeof result) + 'result: ' + result);
        }
    }