This is very abnormal. I am trying to solve this error for 3 days but it's not getting on my nerves now. So, I have a button and a textbox that submits the data in the textbox to a PHP page. There the data is stored into my database.
Here's the PHP File:
if(Class_Name::Function_Name($_POST["id"], $_POST["text"])) $data["status"] = "success";
else $data["status"] = "error";
echo json_encode($data);
Here's the JS function:
function editPostOffer(postId, offer_id, edited_content) {
$.post("admin/post_offer/edit_post_offer.php", {id: offer_id, text: edited_content.value}, function(data) {
if(data.status == "success") {
window.location.href = "post.php?id="+postId;
} else {
console.log("A");
}
}, 'json');
}
Here's the button + textarea(in the generated form):
<div class="content">
<p class="content" style="display: none;">areebaaa</p>
<textarea class="hide span12" id="edited_content" style="display: inline-block;">areebaaa</textarea>
<button type="button" onclick="editPostOffer(" 13 ",=" " "56 ",=" " "assa ");"="" style="display: inline-block;">Save Edits</button>
<button type="button" class="hide btn btn-primary btn-small cancel_edits" style="display: inline-block;">Cancel Edits</button>
</div>
But the original JS creating HTML is here:
var offers = <? php echo Class_Name::Function_Name($_GET["id"]); ?> ;
for (var i = 0; i < offers.length; i++) {
var date = offers[i].Date.split(" ");
document.write('<div class="row-fluid offer">' +
'<div class="span2">' +
'<img class="profile_picture" src="' + offers[i].Picture_Path + '" />' +
'</div>' +
'<div class="span10">' +
'<div class="row-fluid">' +
'<div class="username">' +
'<p style="font-weight: bold;">' + offers[i].Name + '</p>' +
'</div>' +
'</div>' +
'<div class="row-fluid">' +
'<div class="content">' +
'<p class="content">' + offers[i].Text + '</p>' +
'<textarea class="hide span12" id="edited_content">' + offers[i].Text + '</textarea>' +
'<button type="button" class="hide btn btn-primary btn-small" id="save_edits" onclick=' + editPostOffer("13", "56", "assa") + '>Save Edits</button> ' +
'<button type="button" class="hide btn btn-primary btn-small cancel_edits">Cancel Edits</button>' +
'</div>' +
'</div>' +
'<div class="row-fluid">' +
'<div class="date">' +
'<p class="pull-right"><strong><span class="muted">Offered on: </span></strong>' + date[0] + '</p>' +
'</div>');
if (offers[i].Username == "<?php echo $_SESSION["
username "]; ?>") {
document.write('<div class="controls pull-right">' +
'<a href="" class="no_link edit_offer">Edit</a> ' +
'<a href="" class="no_link" onclick="showDeleteOfferModal(' + offers[i].Offer_ID + ');">Delete</a> | ' +
'</div>');
}
document.write('</div>' +
'</div>' +
'</div>' +
'<hr />');
}
I know the error is here: .. onclick="editPostOffer(" 13 ",=" " "56 ",=" " "assa ");"=""...
There is a mesh up of EQUALTOS and COMMAS but I am not getting that why are they coming? Is there any way I can solve this?
UPDATE:
I've updated my code now the error that is only coming is that the JS is not able to find the textarea
...
'<div class="content">' +
'<p class="content">' + offers[i].Text + '</p>' +
'<textarea class="hide span12" id="edited_content">' + offers[i].Text + '</textarea>' +
'<button type="button" class="hide btn btn-primary btn-small" id="save_edits" onclick=\'editPostOffer("<?php echo $_GET["id"]; ?>","' + offers[i].Offer_ID + '","' + $("#edited_content") + '");\'>Save Edits</button> ' +
'<button type="button" class="hide btn btn-primary btn-small cancel_edits">Cancel Edits</button>' +
'</div>' +
...
Here's the updates JS:
function editPostOffer(postId, offer_id, edited_content) {
console.log(postId);
console.log(offer_id);
console.log(edited_content);
$.post("admin/post_offer/edit_post_offer.php", {id: offer_id, text: edited_content.val()}, function(data) {
if(data.status == "success") {
window.location.href = "post.php?id="+postId;
} else {
console.log("A");
}
}, 'json');
}
When I output the data into the console this comes up:
13
56
Uncaught TypeError: Object [object Object] has no method 'val'
The error in the last line means that the object is null and that is because the jQuery was not able to find the textarea.
Unclear what you want to pass to that onclick function, try using different/escaping quotes here:
onclick="editPostOffer(' 13 ',\'=' ' '56 '\',\'=' ' 'assa '\');"
or
onclick="editPostOffer(' 13 ',=' ' '56 ',=' ' 'assa ');"
EDIT:
after you added more code to your post I suggest this:
onclick="' + editPostOffer("13", "56", "assa") + '">
^ ^ //added quotes here
About the text area, you are passing id, so maybe you should try this:
{id: offer_id, text: $('#'+edited_content).val()}
or
{id: offer_id, text: document.getElementById('edited_content').value}
instead of
{id: offer_id, text: edited_content.value}
Change your JS HTML creation line:
'<button type="button" class="hide btn btn-primary btn-small" id="save_edits" onclick=' + editPostOffer("13", "56", "assa") + '>Save Edits</button> ' +
to:
'<button type="button" class="hide btn btn-primary btn-small" id="save_edits" onclick=\'editPostOffer("13", "56", "assa")\'>Save Edits</button> ' +
In your JavaScript when you add the onclick onclick=' + editPostOffer("13", "56", "assa") + '> here it is just a string no need to get it out of the string.
Try doing it like this - onclick="editPostOffer(\"13\", \"56\", \"assa\")" >