Jquery: cyrillic signs turn into question marks upon submit - asp.net-mvc-3

I use jquery and ajax to submit UTF-8 text, to ensure everything is utf-8, I've put the following in web.config:
<globalization
fileEncoding="utf-8"
requestEncoding="utf-8"
responseEncoding="utf-8"
culture="en-US"
uiCulture="en"
/>
Jquery code:
$.ajax({
url: "#Url.Content("~/Home/EditProductTranslations/")",
type: "POST",
data: $(this).serialize(),
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
scriptCharset: "utf-8" ,
success: function (result) {
//$('##resultDiv').html(result);
var info = $("<span class='successMsg'></span>").hide().html(result);
info.insertAfter(curSubmit).fadeIn(300).delay(2700).fadeOut(400, function () {
$(this).remove();
});
}
});
I've also verified it's UTF-8 data by using notepad++ to convert it to UTF-8 (though when it was pasted it said it was UTF-8 already and the data displays perfectly on a UTF-8 site). But I just get ???????? instead of cyrillic signs when I save the form.
The Layout file of the project also has UTF-8 declaring meta-tags, I've done all the usual stuff. Tried to run the submit on firefox with firebug running and it seems everything is submitted correctly? Do I need to declare UTF-8 inside the controller or what?

Add ;CharSet=utf8 to the connection string

Related

Special characters encoding in JSON response

I need to spend Spanish text in json response. I have tried all the possible ways but the message still shows weird characters on the UI. The message I want to show is,
Número de Seguro Social
But it shows up as,
N�mero de Seguro Social
On the Java side,
//response.setContentType("application/json");
//response.setCharacterEncoding("UTF-8");
response.setContentType("application/json;charset=utf-8");
OutputStream out = null;
out = response.getOutputStream();
out.write(jsonResponse.toString().getBytes());
out.close();
added meta tag in head section.
<meta http-equiv="content-type" content="text/html;charset=utf-8">
I have also set the content type in ajax call
$.ajax({
async: false,
cache: false,
type: get,
contentType: "application/json; charset=utf-8",
url: //url,
data: //data,
dataType: //dataType,
success: //callbackfn,
error: //errorfn
});
Nothing seem to work. Is there anything else I can do to get the special characters work as I intended?
I would test where the error is occurring first by sending the string:
"N\u00famero de Seguro Social"
To the browser that is showing the UTF string, just to make sure that it is capable of understanding and displaying the UTF string you're trying to display.
But the actual problem is probably in:
out.write(jsonResponse.toString().getBytes());
As getBytes will get the bytes for the default charset for the system, which may not be UTF-8. You can check this by calling Charset.defaultCharset();
I'm guessing jsonResponse is your own class for storing the response data and then converting it to JSON at the end. I'd recommend using a library from http://www.json.org/ like the Google JSON library for doing the JSON conversion, as there are lots of little gotchas like this one, that are solved problems, so long as you use a decent library to do the encoding/decoding.
$.ajax({
type: "Get",
url: your url,
data: { inputParam : JSON.stringify(inputParam)},
dataType: "json",
success: //callbackfn,
error: //error
});

Need some help combining 2 jQuery scripts and behaviors

Ι need to use a combination of the following 2 scripts but despite all the combinations I've done so far, I fail to get it to work 100%.
I use a colorbox to display products detail pages in which there is a form with various fields for adding the items to the cart. Upon submitting the form, I want to show an alert and then close the colorbox so that the underlying page (that opened the colorbox in the forst place) stays as is.
With this script
$("#productadd").submit(function(){ // WORKS FINE EXCEPT THE ENCODING
$.post(
$(this).attr('action'),
$(this).serialize(),
function(data){
alert('Product was added to your order');
$().colorbox.close();
});
everything works fine except for the encoding which in my case is iso-8859-7 (greek).
If I use this script then encoding is ok but the post is being made with the default behaviour, redirection to the url defined in the form's action.
$("#productadd").submit(function(){ //ENCODING OK, COLORBOX.CLOSE() AND ALERT FAIL
$.ajax({
data: data,
type: "POST",
url: $(this).attr('action'),
dataType: 'json',
beforeSend : function(xhr) {
xhr.setRequestHeader('Accept', "text/html; charset=iso-8859-7");
},
success: function(json) {
alert('Product added to cart!'),
$().colorbox.close(),
itemAddCallback(json);
},
error: function (xhr, textStatus, errorThrown) {
$("#error").html(xhr.responseText);
}
});
If there's a jQuery equivalent for xhr.setRequestHeader('Accept', "text/html; charset=iso-8859-7") I'd be more than happy to use it. Also, what do I declare as data: so I dont get a 'data is not defined' error? (despite the error, date submits fine).
UPDATE: After various suggestions from those who answered so far, this is what my code looks like:
$("#productadd").submit(function(){
$.ajax({
data: $(this).serialize(),
type: "POST",
url: $(this).attr('action'),
dataType: 'text',
mimeType: "text/html; iso-8859-7",
success: function() {
alert('Item added to your order'),
$().colorbox.close();
},
error: function (xhr, textStatus, errorThrown) {
$("#error").html(xhr.responseText);
}
});
My only problem is that although it submits and displays the alert etc, the submitted data is encoded in utf-8 instead of iso-8859-7, any ideas?
Please check the documentation:
http://api.jquery.com/jQuery.ajax/
Find mimeType property.
mimeType(added 1.5.1)String
A mime type to override the XHR mime type.
Therefore you need to add following:
$.ajax({
data: data,
type: "POST",
mimeType: "text/html; charset=iso-8859-7"...
In the shorthand POST request you send $(this).serialize() as data, so I suppose you want to send the same form data in the other request.
To debug the requests, use your browsers net panel and find out if the requests actually fire and what the responses are (F12 then Net > XHR).
Hope this helps!

Grails: Passing a javascript variable to a template

I am new to ajax so maybe this is obvious. I've tried many different not-working approaches. I have javascript that when you click on a button:
an ajax call that grabs some data from a controller - returns an object
display that data in a template that I will show on the page
Here is the javascript/ajax:
<script type="text/javascript">
$("#show").click(function () {
$.ajax({ url: '/Myproject/result/index',
type: "POST",
data: { id: id},
success: function(result) {
alert("Success:" + result); // Can see getting object back.
}});
$(".resulttable").show();
});
Here is the key line in grails view template:
<g:each in="${allResults}" status="i" var="result">
How do I get the data from the javascript to the gsp code (ie allResults)?
Do I have to "refresh" this template to display new data?
thanks.
You just can't make your javascript/jquery code populate things in the gsp, since the gsp is processed server-side and javascript is processed client-side, after the gsp rendered all html documents and populated them with your model. You need to be aware that your page was already processed, so things like ${variables} won't be reloaded anymore. So when you do this:
$(".resulttable").show();
It's not gonna show the result you're waiting for. You have to use javascript code to reload your result table.
So if you're using ajax here, you should use the function success to alter your html table via javascript/jquery since you already have the response you wanted. Maybe this read can help you. Oh, and I think it would be better if in your ajax call, you would define a dataType (json works great in your case), like this:
$("#show").click(function () {
$.ajax({ url: '/Myproject/result/index',
type: "POST",
data: { id: id},
dataType: 'json',
success: function(result) {
alert("Success:" + result); // Can see getting object back.
}});
$(".resulttable").show();
});
Just to make clear what kind of response you're getting from the controller.
You do not need to write your ajax calls the hard way. There are some Grails intern tags you can use inside your html:
http://grails.org/doc/latest/ref/Tags/remoteFunction.html
http://grails.org/doc/latest/ref/Tags/submitToRemote.html
http://grails.org/doc/latest/ref/Tags/remoteLink.html
Following the links you will find some nice examples...

base64 is not encoding in ajax

I want to send base64 string through ajax
I encoded it through JavaScript function escape
data = escape"data:image/png;base64,iVBOR w0K+GgoAAAAN+SUhEUgAAAU oAA+ADmCAYAAAC+zgMwkAAAgAElEQ+VR4Xu1de3BVx3n");
It worksfine and encode it as
data%3Aimage/png%3Bbase64%2CiVBOR%20w0K+GgoAAAAN+SUhEUgAAAU%20oAA+ADmCAYAAAC+zgMwkAAAgAElEQ+VR4Xu1de3BVx3n
But when I send it through ajax
$.ajax({
url: 'http://fiveriverstech.com',
type: 'POST',
data: "data="+data,
success: function(response){
console.log(response)
}
});
It replaces the + sign whit white spaces
as data:data:image/png;base64,iVBOR w0K GgoAAAAN SUhEUgAAAU oAA ADmCAYAAAC zgMwkAAAgAElEQ VR4Xu1de3BVx3n
How I can prevent to do this
JS Fiddle
You probably want to use encodeURIComponent() instead of escape(). escape() is not intended to be used for URLs and form data.
Even easier would be to use
data: { data: 'data:image/png;base64,...' }
in your $.ajax() options, without bothering to encode it; jQuery will take care of everything.

Get a part of another page

I am trying to fetch a part of the page from another domain. I could directly embed as a
frame. But i need to retrieve a part of it. How can i? I use:
$.ajax({
type: "POST",
url: "marketToday.php",
data: "symbol=" + symbol,
success: function(html)
{
alert(html);
}
});
in marketToday.php:
I retrieve a page using curl
PHP has built-in libraries (usually included by default) for DOM manipulation. Essentially you would need to use curl or file_get_contents() and then parse the source code with DOM or XPATH.

Resources