使用AJAX的功能引发了“Unexpected Token}”，Chrome控制台

Question

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>&nbsp;
    <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>&nbsp;' +
        '<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>&nbsp;' +
            '<a href="" class="no_link" onclick="showDeleteOfferModal(' + offers[i].Offer_ID + ');">Delete</a> |&nbsp;' +
            '</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>&nbsp;' +
    '<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.

Answer 1

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}