jquery textarea get error if i am using space between text

Question

in this code if i am write only string so it worked but if i am write any whitespace or spacial character or ' and "" this following code give me error syntex error how can i fix it. jquery cause error js script

<script type="text/javascript">
    $(document).ready(function() {
        $('#content').keyup(function() {
            content = $('#content').val();
            $('#editor-result').html('&nbsp;').load( 'http://127.0.0.1:8000/ask/req_pass/?content=' + content);
        });
    });
</script>

html code:

<div class="row"><label for="title" class="col-md-1">Title:</label><input class="col-md-8" type="text" name="title" id="title"></div>
    <div class="row" style="padding-top: 1em"><textarea class="form-control" rows="12" id="content" name="content"></textarea>
    </div>
        <div class="row">
            <div class="col-md-12" id="editor-result" ></div>
        </div>
</div>

Are you really sure you want to be making an HTTP request for every single keystroke? Usually you would want to "debounce" or rate-limit the function. — Niet the Dark Absol, Aug 14 '17 at 20:11
i want to show live preview of user post so yes i have to do it on every keystroke and i don't know about debounce @NiettheDarkAbsol — conol, Aug 14 '17 at 20:13
You probably want to use [`encodeURI()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI) before appending it as a query string — Terry, Aug 14 '17 at 20:15
you have any good idea for live preview of posts like stackoverflow is doing when we ask questions? @Momus — conol, Aug 14 '17 at 20:21
@JunedRajbhara A live preview would be much better implemented in JavaScript, as this uses the browser rather than hammering your server with requests. — Niet the Dark Absol, Aug 14 '17 at 21:09

Momus · Accepted Answer · 2017-08-14T20:26:58.073

0

It's because you're attempting to pass the content of the text field "content" as part of the query string in your URL ('http://127.0.0.1:8000/ask/req_pass/?content=' + content) where those characters are not allowed. If you absolutely must do that then you will need to escape the characters in order for them to be allowed in the querystring, but you would probably be better off using the .ajax() function instead.

$.ajax({
  url: "http://127.0.0.1:8000/ask/req_pass",
  type: "POST",
  data: {content : content}
});

Also - do you really want to make a call to a server on every keypress in the text area? Right now that's what will happen. You can get the preview of what is written by doing this:

$(document).ready(function() {
$('#content').keyup(function() {
        content = $('#content').val();
        $('#editor-result').html('&nbsp;' + content);
    });
});

...removing the call to the server entirely.

edited Aug 14 '17 at 20:26

answered Aug 14 '17 at 20:18

Momus

394
2
13

You may also want to use debounce if you're going to make the calls to the server: https://stackoverflow.com/questions/27787768/debounce-function-in-jquery – Momus Aug 14 '17 at 20:22
can you suggest any other idea for not making this request everytime? you have any idea for live preview of posts like stackoverflow is doing when we ask questions? – conol Aug 14 '17 at 20:25
The second code snippet will cause a live preview without the call to the server. I don't know what the server does with the requests so I can't say what was being displayed before, but if you take your HTML and the modified javascript and plug it into jsfiddle (https://jsfiddle.net/) you will see that it outputs characters as you type in the text area. I also added the code for changing your load() to an ajax() call to my original answer btw. – Momus Aug 14 '17 at 20:30

score 0 · Answer 2 · answered Aug 14 '17 at 20:22

Not a good idea call an AJAX in every keyup event. But related to the error given, it is because you are putting a text in the URL, which needs to be escaped in order to work properly. Use the encodeURIComponent function, and in the backend you should decode the encoded URL-query, See these examples: Escaping Special Characters

var url =
    'http://127.0.0.1:8000/ask/req_pass/?content=' + encodeURIComponent(content);

Related to the keyup event, consider debounce the AJAX call after X seconds of after typing a minimum of characters, or combining both.

How to properly debounce ajax requests

jquery textarea get error if i am using space between text

2 Answers2