删除 AJAX 响应中的空白

Question

I have a php script which returns 0.28 . This is then fetched to HTML using AJAX, and inserted into a span. The problem is, it is inserted with 5 spaces and what appears to be a newline. jQuery then sees that as a change and updates the existing span with the new value when there is no change. It appears that the whitespace does not come from the php. I have tried:

• to trim() and ltrim() the php to get rid of whitespace
• remove php exit tag
• white-space-collapsing: discard; in the css and using the !important tag (this is not being read and the chrome yellow alert is on it)
• trimming the response with jquery
• using html notes to cut the space

Dumping the php variable:

string(4) "0.28"

This is how my browser returns it

   <span id="response1" style="display: inline;">*5spaceshere*    
   0.28</span>

This is my script

$(function () {
    function update() {
        $.ajax({
            type: "GET",
            url: "balancefetch.php",
            dataType: "html",
            success: function (response) {
                var trimmedResponse = $.trim(response)
                if (trimmedResponse != $("#response1").html()) {
                    $("#response1").fadeOut(200, function () {
                        $("#response1").html(response);
                        $("#response1").fadeIn();
                    });
                } else {}
            }

        });
    }
    setInterval(update, 5000);
    update();
});

And my html

<div id="balance-div"><!--
--><p class="balance">Balance<span id="response1">Loading...</span></p><!--
--></div>

php

$balance = ltrim($balance);
echo $balance;

$balance holds 0.26

Answer 1

So after testing and going trough several methods finding where the problem is, the source for this problem was found.

The main part why not using technics like trim or a RegEx to remove whitespaces is, because that would fix the current problem, but not the source, so this would be just a bad workaround, so it was important to find the source.

The source problem was inside the configuration file, which had some whitespaces inside it and after including it inside the script, which is loaded via AJAX, the whitespaces also were included.

Solution : Remove the whitespaces of the config file and/or just remove the ?> PHP-Ending Tag.

For further debuging steps, look into the comment section of the question.

Answer 2

solution found !

The problem was in the php file. I should not keep any white spaces between lines in my php file

here is my php file and i indicated in a comment where the white space was

<?php 
require_once '../includes/session.php';
require_once '../includes/functions.php';
require_once '../includes/validation_functions.php';
// white space is in the place of this comment here ! so i removed it and problem was solved
if (isset($_POST['reply_board_textarea'])) {
    $board_id = (int)$_GET['board_id'];
    $comment_id = (int)$_GET['comment_id'];
    $reply = mysql_prep($_POST['reply_board_textarea']);
    $reply_timestamp = time();
    $user_id = (int)$_SESSION['user_id'];

    // INSERT into table
    $query  = "INSERT INTO board_comment_reply_table ( ";
    $query .= "comment_id, board_id, user_id, reply, reply_timestamp";
    $query .= ") VALUES (";
    $query .= " $comment_id, $board_id, $user_id, '$reply', $reply_timestamp";
    $query .= ")";
    $result = mysqli_query($connection, $query);

    $reply_count = board_reply_count($comment_id);

    echo $reply_count;
}

?>

Answer 3

This happened to me too today (two line breaks always appeared in front of my ajax responses).

After finding this discussion, I started reviewing my code. Finally, I found the two-space newline after the closing tag of php?> in a.inc file that was included in my code.

Many Thanks

Answer 4

Use ob_clean() which clears buffer that had unwanted newline