skip to Main Content

I have a bit of a mystery. I’ve done code like this several other times with expected results, but this time it is behaving oddly.

The text coming from the Mysql database through AJAX to the main calling program is getting 3 extra carriage or line returns and each time I display it, it adds these unwanted line returns to the textarea box for further editing.

The steps:
1. Store textarea content to database. Example data could be: ‘The fox jumped high’
2. Retrieve the data and display in another textarea box for editing
3. The textarea shows the retrieved text, but has extra 3 line returns.

My Storage Call: main program

$(document).on('click', '#submit2', function(){
        event.preventDefault();
        var comment = $("#comment2x").val();        
        update = 'yes'//chooses to update not insert new
        console.log(comment);
        $.ajax({
                url:"/modules/feedback/feedback_ajax.php",
                method:"POST",
                data:{action:'save',
                      user_id:user_id,//global variable set at beginning
                      comment:comment,
                      details:details,
                      tab:tab,
                      update:update,
                      feedback_id:feedback_id
                  },
                success:function(data){;
                      //console.log(data);
                      $('#comment2x').val('');//clear text area
                      $(window).scrollTop(scroll_position);
                }
            }); 
     });

The SQL Update Code: feedback_ajax.php

if($_POST['action']=='save'){   
    $user_id = $_POST['user_id'];
    $comment = $_POST['comment'];
    $details = $_POST['details'];
    $tab = $_POST['tab']; 
    $update = $_POST['update'];//'yes' = update existing entry, 'no' = insert new entry
    $feedback_id = $_POST['feedback_id'];

    //insert into database    
    $sql = "INSERT INTO feedback (user_id,comment,details,tab,status) VALUES (?,?,?,?,?)";
    $db->prepare($sql)->execute([$user_id,$comment,$details,$tab,'New']);

I look in the database using phpMyAdmin and it shows no extra spaces or line returns.

My AJAX Call: main program

$.ajax({//get raw comment from database
    url:"/modules/feedback/feedback_ajax.php",
    method:"POST",
    data:{action:'get_raw_comment',feedback_id:feedback_id},
    success:function(data){
        console.log('EDIT');
        console.log(data);
        $('#comment2x').val(data);
        $("#comment2x").height( $("#comment2x")[0].scrollHeight );//adjusts height of textarea to fit text
    }
});

The other end returning the data: feedback_ajax.php

if($_POST['action']=='get_raw_comment'){   
    $feedback_id = $_POST['feedback_id'];
        $sql = "SELECT comment FROM feedback WHERE feedback_id=".$feedback_id;
        $stmt = $db->prepare($sql); 
        $stmt->execute(); 
        $row = $stmt->fetch();
        $comment = $row['comment'];
        echo $comment;
}

I use Xdebug and the variable $comment shows NO extra spaces or line returns.

In the Ajax call, console.log(data); shows the data returned – the Chrome console shows extra line returns!!!

When the AJAX success call $(‘#comment2x’).val(data); places it in the textarea, the textarea shows extra line returns – 3 to be exact.

The HTML for the textarea is:

<textarea class="form-control" name="article" id="comment2x"></textarea>

What more can I do to troubleshoot this and eliminate these extra line returns showing up?

2

Answers


  1. Chosen as BEST ANSWER

    Just thought I would post my Json version which solved the problem:

    Mysql data retrieval code:

    if($_POST['action']=='get_raw_comment'){   
        $result = array();
        $feedback_id = $_POST['feedback_id'];    
            $sql = "SELECT comment FROM feedback WHERE feedback_id=".$feedback_id;
            $stmt = $db->prepare($sql); 
            $stmt->execute(); 
            $row = $stmt->fetch();
            $comment = $row['comment'];
            $result['comment']=$comment;
            echo json_encode($result);
    }
    

    Ajax code:

    $.ajax({//get raw comment from database
        url:"/modules/feedback/feedback_ajax.php",
        method:"POST",
        dataType: 'json',
        data:{action:'get_raw_comment',feedback_id:feedback_id},
        success:function(data){
            console.log(data);               
            $('#comment2x').val(data.comment);
            $("#comment2x").height( $("#comment2x")[0].scrollHeight );//adjusts height of textarea to fit text
        }
    });
    

  2. return data from feedback_ajax.php in json format as follows:-

    $result = array();
    if($_POST['action']=='get_raw_comment'){   
        $feedback_id = $_POST['feedback_id'];
            $sql = "SELECT comment FROM feedback WHERE feedback_id=".$feedback_id;
            $stmt = $db->prepare($sql); 
            $stmt->execute(); 
            $result['success'] =  $stmt->rowCount();
            if($result['success'])
              $row = $stmt->fetch();
    
            $result['comment'] = $result['success'] ? $row['comment'] : ""; 
    }
    echo json_encode($result);
    

    receive data in json format and proceed

    $.ajax({//get raw comment from database
        url:"/modules/feedback/feedback_ajax.php",
        method:"POST",
        dataType: 'json',                         //IMPORTANT TO RECEIVE DATA IN JSON
        data:{action:'get_raw_comment',feedback_id:feedback_id},
        success:function(data){
          if(data.success)
           {
              $('#comment2x').val(data.comment);
              $("#comment2x").height( $("#comment2x")[0].scrollHeight );//adjusts height of textarea to fit text
           }else
           {
              console.log(data);  //to check what data coming
           }
    
    
        }
    });
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search