Can't get jQuery's .replaceWith() to work?

Question

Hi.

Basically I am trying to have jQuery replace the button with the form and status div once clicked.

I am new to jQuery and hardly an advanced programmer so I am sure the solution will be relatively simple. On the other hand I am at my wits end with this issue and any help would be greatly appreciated. Thank you.

EDIT: Solution found. Interestingly enough it also only worked when I put it in a separate .js file and referenced it, not when I had it within tags on the php page. Thanks again to everyone who responded!

---

$(document).ready(function() { 
   $("#repbutton").click(function() {
   $("#repbutton").replaceWith("<form id=\"reputation_form\" method=\"post\">
    Give positive reputation to <?=$reply_user['username']?> for their reply?
    Comment: <input type=\"text\" name=\"comment\" id=\"comment\" /> 
             <input type=\"hidden\" id=\"uid\" value=\"<?=$reply_user['id']?>\">
             <input type=\"hidden\" id=\"rid\" value=\"<?=$replies_row['id']?>\">
             <input type=\"hidden\" id=\"urid\" value=\"<?=$user_row['id']?>\">
             <input type=\"submit\" value=\"Give Reputation\" />
</form>
<div id=\"status\">
        <p></p>
    </div>"); 

    });
   });

Answer 1

Try using the append(), prepend() and html() functions for manipulating the DOM. Doing this your likely to confuse yourself and run into all sorts of problems.

You should be able to

• Hide the button
• Append the HTML for your form to the element the button is in

And then easily do the following once your done with the form

• Show the button again
• Remove the form

Answer 2

Newlines aren't valid inside string literals unless you escape them with \. Simply put, either compress the string to one line or add \ to the end of each line:

$(document).ready(function() { 
   $("#repbutton").click(function() {
   $("#repbutton").replaceWith("<form id=\"reputation_form\" method=\"post\">\
    Give positive reputation to <?=$reply_user['username']?> for their reply?\
    Comment: <input type=\"text\" name=\"comment\" id=\"comment\" /> \
             <input type=\"hidden\" id=\"uid\" value=\"<?=$reply_user['id']?>\">\
             <input type=\"hidden\" id=\"rid\" value=\"<?=$replies_row['id']?>\">\
             <input type=\"hidden\" id=\"urid\" value=\"<?=$user_row['id']?>\">\
             <input type=\"submit\" value=\"Give Reputation\" />\
</form>\
<div id=\"status\">\
        <p></p>\
    </div>");

    });
});​

Working example - http://jsfiddle.net/rd4w9/

Answer 3

Why not just hide the button on click, and display the form?

Answer 4

You can't have return statements in your string like this in JavaScript, you need to declare it as a multi-line string using \ on the end of each line, like this:

$(document).ready(function() { 
   $("#repbutton").click(function() {
   $("#repbutton").replaceWith("<form id=\"reputation_form\" method=\"post\"> \
    Give positive reputation to <?=$reply_user['username']?> for their reply? \
    Comment: <input type=\"text\" name=\"comment\" id=\"comment\" /> \
             <input type=\"hidden\" id=\"uid\" value=\"<?=$reply_user['id']?>\"> \
             <input type=\"hidden\" id=\"rid\" value=\"<?=$replies_row['id']?>\"> \
             <input type=\"hidden\" id=\"urid\" value=\"<?=$user_row['id']?>\"> \
             <input type=\"submit\" value=\"Give Reputation\" /> \
</form> \
<div id=\"status\"> \
        <p></p> \
    </div>"); 

    });
});​

You can give it a try here.