Space in keywords via GET are cut off

Question

I am making a call via jquery to load a piece of HTML from the Django server.

$('#search_result').load(url, function(){       
        ...
    });

The url is created like this:

url = url + '&' + keyword + '=' + value;    

As long as the keywords have no space, its working fine, but something like "Fixed Bid" gets cut off to simply "Fixed", which is a problem.

/deals/?ajax&sales_term=Fixed

Should I replace the space by something else? It would be great if I could replace it with a character that Django recognizes as space and converts it back upon retrieval. That would be really efficient.

Answer 1

You have to encode your URL. Try this: encodeURIComponent. The issue is, you need to represent the space with %20, which encodeURIComponent would take care of.

Answer 2

Just use jQuery.param

url = {};
url[keyword] = value;

'?' + $.param(url); // ?keyword=value

Answer 3

Url encode your url, a space in the url indicates the existence of a selector which will be used to filter out content to load into the element.

Loading Page Fragments
The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

We could modify the example above to use only part of the document that is fetched:

$('#result').load('ajax/test.html #container');
When this method executes, it retrieves the content of ajax/test.html, but then jQuery parses the returned document to find the element with an ID of container. This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.

jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as , , or  elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.

http://api.jquery.com/load/