Impossible de faire fonctionner .replaceWith() de jQuery?

Question

Fondamentalement, j'essaie d'avoir jQuery remplacer le bouton avec le formulaire et div d'état une fois cliqué. Je suis nouveau à jQuery et à peine un programmeur avancé donc je suis sûr que la solution sera relativement simple. D'autre part, je suis à mon avis avec ce problème et toute aide serait grandement appréciée. Je vous remercie.

EDIT: solution trouvée. Il est intéressant de noter que cela n'a fonctionné que lorsque je l'ai mis dans un fichier .js distinct et je l'ai référencé, et non quand je l'avais dans les balises de la page php. Merci encore à tous ceux qui ont répondu!

---

$(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

Les lignes de fin ne sont pas valides à l'intérieur des littéraux de chaîne sauf si vous les échappez avec \. Il suffit de mettre, soit compresser la chaîne à une ligne ou ajouter \ à la fin de chaque ligne:

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

    }); 
});​ 

Exemple de travail - http://jsfiddle.net/rd4w9/

Answer 2

Essayez d'utiliser les append(), prepend() et html() fonctions pour manipuler le DOM. En faisant cela, vous risquez de vous confondre et de rencontrer toutes sortes de problèmes.

Vous devriez pouvoir

• Masquer le bouton
• Append le code HTML de votre formulaire à l'élément le bouton est en

Et puis faire facilement ce qui suit une fois que votre fait avec le formulaire

• Afficher à nouveau le bouton
• Supprimer le formulaire

Answer 3

Pourquoi ne pas simplement cacher le bouton clic, et afficher le formulaire ?

Answer 4

Vous ne pouvez pas avoir des déclarations de retour dans votre chaîne comme ceci en JavaScript, vous devez déclarer comme une chaîne multi-ligne à l'aide \ à la fin de chaque ligne, comme ceci:

$(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 .