0

I have a div that I'm using in a WYSIWYG editor, and when the user is done writing it gets submitted using an AJAX POST request. But I've been running into a problem: anytime the text contains an "&" character it would cut off everything after it. I spent way too much time looking at my server-side code, but the issue turned out to be on the client side (the whole URL encoding thing). So I looked into how to fix this on the JavaScript side, and came up with "encodeURIComponent". Based on the pages I read (links below), it is currently the best way to do URL encoding (escape is deprecated and encodeURI doesn't encode certain characters.

When are you supposed to use escape instead of encodeURI / encodeURIComponent? Should I use encodeURI or encodeURIComponent for encoding URLs?

But encodeURIComponent isn't working. Here's how I used it:

var wysiwyg = encodeURIComponent(document.getElementById("wysiwyg").innerHTML);

The contents of this div get submitted (so I know it's not my AJAX call), but it doesn't fix the "&" characters, and I haven't been able to find any alternatives on Google or SO. I've got a few shots in the dark about what could potentially be going on, but that's all they are (no research, just general guesses based on experience): - Maybe some kind of cross-browser wonkiness (not supported in Firefox or something stupid like that)? - Some other parameter I haven't found documentation for (maybe encoding types like UTF-8 or whatever)? - Some undocumented gotcha with using innerHTML?

So I'm grasping at straws here. Are there any known bugs with encodeURIComponent? Are there any alternatives available (apart from doing a ton of string replace work - which btw I'm actually considering if I can't get it to work)? Any workarounds, links, suggestions or clues would be greatly appreciated. Thanks.

Community
  • 1
  • 1
user2403876
  • 239
  • 2
  • 4
  • 16
  • No, `encodeURIComponent` does properly (and consistently) encode `?` signs to `%26`. Please check the value of `wysiwyg`, and possibly post it here. Check in the network tab of your devtools what is actually sent to the server. And then make sure it's not a serverside issue with decoding those characters. – Bergi Jun 03 '15 at 00:41
  • Please show your complete code including some example input values and the expected output that the server should see. – Bergi Jun 03 '15 at 00:42
  • Well the input is crazy basic - I've tried it with things like "Rock & Roll!" and "This & That", and simple HTML tags like >u>etc.. Beyond that I'm not sure what you need... I could show you my AJAX function but you could get it off w3schools lol. btw what are the network tab and DevTools? Some kind of new IDE? – user2403876 Jun 03 '15 at 00:56
  • http://webmasters.stackexchange.com/q/8525 – Bergi Jun 03 '15 at 01:20
  • If you just copied your ajax code from w3schools, it's likely that it contains mistakes and is not appropriate for your task. Yes, please show us your exact code. Btw, you might be better of with using MDN as a learning ressource (https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) – Bergi Jun 03 '15 at 01:22

0 Answers0