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
Just thought I would post my Json version which solved the problem:
Mysql data retrieval code:
Ajax code:
return data from feedback_ajax.php in json format as follows:-
receive data in json format and proceed