CODEWITHSUNDEEP
phpjavascriptjquery
Hugo Firth
Hugo Firth

Reputation: 43

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

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>"); 

    });
   });

Upvotes: 4

Views: 911

Answers (4)

Nick Craver
Nick Craver

Reputation: 630389

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.

Upvotes: 0

Alex Reitbort
Alex Reitbort

Reputation: 13696

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

Upvotes: 1

Andy E
Andy E

Reputation: 344567

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/

Upvotes: 3

Jake N
Jake N

Reputation: 10583

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

Upvotes: 0

Related Questions