Unusual issue with jQuery's AJAX functionality

Question

Unusual issue with jQuery's AJAX functionality

Utilizing jQuery AJAX, I am fetching data from a PHP page and displaying a loading GIF image in the placeholder to indicate that results are being processed.

$(".project").change(function(){
            $(".custName").html("<img src='/admin/images/ajax-loader.gif' />");
            $(".projectDesc").html("<img src='/admin/images/ajax-loader.gif' />");
            var project_num=$(this).val();
            var dataString = 'project='+ project_num;

                $.ajax
                    ({
                        type: "POST",
                        url: "customerfilter.php",
                        dataType: "json",
                        data: dataString,
                        cache: false,
                        success: function(data)
                        {
                            $(".custName").html(data.message1);
                            $(".projectDesc").html(data.message2);
                        }
                    });


        });

After clicking the trigger and checking the Firebug console, I can see the POST request being sent and received with correct data. However, the loading gif remains visible and is not replaced by the actual data - unable to determine the reason behind this issue!

Here is a screenshot from Firebug showing the RESPONSE window:

PHP code handling the response:

while ($row = mysql_fetch_array($result)) {
                echo json_encode(array(
                    "message1" => $row['cust_name'],
                    "message2" => $row['description'],
                ));

$result corresponds to a mysql_query

php jquery ajax post preloader

Answer 1

Answer №1

The data you received is not in valid JSON format. You can fix this by using the following code:


$output = [];
while ($row = mysqli_fetch_array($result)) {
                $output[] = [
                    "name" => $row['customer_name'],
                    "description" => $row['product_description'],
                ];
}
echo json_encode($output);

UPDATE: Don't forget to update your 'success' callback function in JavaScript as well:


success: function(response) {
  $(".customerName, .description").empty();
  for(var x in response) {
     $(".customerName").append(response[x].name);
     $(".description").append(response[x].description);
  }
}

Answer 2

The data you received is not in valid JSON format. You can fix this by using the following code:


$output = [];
while ($row = mysqli_fetch_array($result)) {
                $output[] = [
                    "name" => $row['customer_name'],
                    "description" => $row['product_description'],
                ];
}
echo json_encode($output);

UPDATE: Don't forget to update your 'success' callback function in JavaScript as well:


success: function(response) {
  $(".customerName, .description").empty();
  for(var x in response) {
     $(".customerName").append(response[x].name);
     $(".description").append(response[x].description);
  }
}

Answer 3

Answer №2

Encountering similar issues arises when the data type is set to JSON. If PHP does not return accurate JSON, jQuery will not execute the success function.

Follow these steps:

Add a
```
console.log("success was called")
```
statement inside the success method to track its execution.
Validate that your PHP code generates valid JSON using the json_encode function.
Share any new details you have for further assistance in debugging :-)

Answer 4

Encountering similar issues arises when the data type is set to JSON. If PHP does not return accurate JSON, jQuery will not execute the success function.

Follow these steps:

Add a
```
console.log("success was called")
```
statement inside the success method to track its execution.
Validate that your PHP code generates valid JSON using the json_encode function.
Share any new details you have for further assistance in debugging :-)

Unusual issue with jQuery's AJAX functionality

Answer №1

Answer №2

Similar questions

NodeJs took an unexpected turn

Using jQuery to automatically select a specific radio button after the load() function is executed

Implementing CSS styles to Iframe content

Comparing two tables in jQuery/Javascript for matching data

Stopping jQuery fadeOut from setting the display property to 'hidden'

Saving information from MySQL database into a CSV file using PDO through a web browser

The BBCode seems to be malfunctioning

Step-by-Step Guide: Crafting a Non-Ajax Popup Chat Application

Is there a way to update page content without having to refresh the entire page?

Modify the error message in jQuery validation when the dropdown selection changes

What could be causing the console to display undefined?

In order for Jquery's html() and dialog functionalities to work seamlessly, the inclusion of an alert box is imperative

Form containing unchecked checkbox

Array offset is undefined even though it exists in the array

Django: Utilizing AJAX to send a POST request for a form submission and updating the

What is the best way to incorporate arrow buttons on my website in order to unveil various sections on the homepage?

What is the best way to incorporate an if else condition using the <?php if($loggedin): ?> statement within JavaScript code to display a button push or pop response from the server side?

What is causing the inability to update fields in Laravel?

Using jQuery to incorporate a variable into JSON schema markup

What is preventing me from accessing the JSON return values in my .NET MVC project?