Develop Reference

How to keep text \r\n formatting on a textarea when you pull the text via javascript

Long story short, I have a textarea and I want to preserve the formatting with the proper line breaks. I'm getting the value of the text area with the following javascript call.
var letterText = document.getElementById("cnl-lettertext").value;
After that I sent it through an Ajax call and rest api to be saved to a database. I can't seem to get it to keep the \r\n characters or line breaks in the variable for some reason when I'm setting it.
I've tried setting white-space: pre on my css for it but that doesn't seem to work. I also don't want to just use .replace because that disrupts other functions.
ajax call:
$.ajax({
url : url, //url is built dynamically for a rest api.
timeout : 5000,
dataType : "json",
statusCode : { },
success : function(data) {
}
});

When you send a request to a URL with line breaks, the browser will remove those line breaks, which are not URL-compatible. They need to be encoded.
You could do it manually with encodeURIComponent, but since you're using jQuery, take advantage of it, and pass query parameters the right way, with the data option. They will be encoded correctly by jQuery:
$.ajax({
url : 'https://www.example.com/endpoint', // don't add query params here
timeout : 5000,
dataType : "json",
data: { // Add them here, they will be encoded automatically
letterText: letterText,
// ...
},
statusCode : { },
success : function(data) {}
});

jQuery how to return value without encoding it?

I have a problem with encoding/decoding some text.
On my page I have a picture:
<img id ="pcs" src="xxx.jpg" game="Hellblade: Senua’s Sacrifice ">
Then use ajax to send data to php server:
$('#pcs').click(function(){
if($(this).attr('src') == "xxx.jpg" ) {
$(this).fadeOut(100, function() {
var cookie = "dummy";
var game = $(this).attr('game');
$.ajax({
url: "http://example/notif_games.php",
type: "POST",
data: ({'cook_':'cookie', 'game_': game}),
});
The problem is the data are somehow encoded and recieved as: Hellblade: Senua’s Sacrifice
Instead, I need it to be recieved as: Hellblade: Senua’s Sacrifice
Even where I try
var game = $(this).attr('game');
alert(game);
it returns the 'encoded' value.
It's needed with the ’ part because I then put it in DB and compare it with another tables where the value is with the ’.

This is a browser issue and not a jquery one. Your browser is rendering the text already before jquery touches it. You need to decode it on the server side when you ajax it up.
With php you can do $data = htmlentities($data);

script doesn't load after ajax response

I was trying to make an ajax call and show an html part inside a div class. For that i used the following way.
$.ajax({
type: "get",
url: "{{url('searchByCheckbox')}}",
dataType: 'html',
success: function(html)
{
$(".infinite-scroll").html(html)
}
});
But the problem is there is a script inside that html part which i wanted to load when i make first ajax call it's not loaded but for the second one it's loaded the script.
suppose the html response like this :
<script>
alert()
</script>
// html
How do i make it work?
I put the script above the html page which i'm getting as response.
(those who are marking the Question as duplicate should read at least what i want and what they wanted )

Im sure that the error is happening because of the script, because you are closing the </script> tag inside the html.
The best solution is to return the data from your ajax call as a json
To do that you should:
1- add a dataType to your ajax parameter as the below:
$.ajax({
type: "get",
dataType: "json",
2- In the php file handling the ajax call, you must resurn the values as a json as below:
Assume that currently you are doing the following:
echo $html
You should change it to match the below:
$retArr = array(
"html" => $html, //Your html code without the javascript function
"jsFunc" => $jsFunc //Your java script function parameters
) ;
echo json_encode($retArr) ;
And then your ajax success must be as the below:
success: function(data)
{ //You can access all the object parametes by calling the object name `data` followed by a dot `.` and then by the parameter key
data.jsFunc // Your javascript function params
$(".infinite-scroll").html(data.html) ;
}

Web page becomes unresponsive after ajax call

I have a webpage in which I am getting some data from the server.I have used servlet to get the data from server.I need to fetch the data in every 5 seconds time inerval.I have used ajax call in my script, but after several calls the webpage becomes unresponsive.I have found one thing that here I have replaced the entire html page again , how can I seperate a particular div from the output html content (here page_html). I want to replace the div only
setInterval("update_content();", 5000);
function update_content(){
$.ajax({
url: "url", // post it back to itself - use relative path or consistent www. or non-www. to avoid cross domain security issues
type: "POST",
async: true,
cache: false, // be sure not to cache results
})
.done(function( page_html ) {
var newDoc = document.open("text/html", "replace");
newDoc.write(page_html);
newDoc.close();
});
}

how can I seperate a particular div from the output html content (here page_html). I want to replace the div only
You can simply change the contents of a div using jQuery html() method.
<div id="yourDivId">
</div>
JS:
function update_content(){
$.ajax({
url: "url", // post it back to itself - use relative path or consistent www. or non-www. to avoid cross domain security issues
type: "POST",
async: true,
cache: false, // be sure not to cache results
})
.done(function(page_html) {
$("#yourDivId").html(page_html);
});
}
This method will load the HTML using AJAX, and then replace HTML contents of #yourDivId with loaded data. This is what AJAX usually used for.

Save chart image with open flash chart2

I am using Open Flash Chart 2 to create some graphs. I want to be able to save an image of the graph, which OFC2 supplies some methods to accomplish this. I used the example on the OFC2 site to directly display the raw image data on the page, but that does not work in IE6, which most of our users are using (I know, I know).
I switched to using the OFC2 method, post_image to post the raw image data to the server. I use a Perl script to receive the image data, save it to a file, and I can view the image. The unfortunate part about using the post_image method is that ActionScript throws an error when saving the image:
Error #2101: The String passed to URLVariables.decode() must be a URL-encoded query string containing name/value pairs.
Which apparently is a bug in Adobe - see this page. Because of this error, the post_image method does not complete successfully, so the javascript callback won't ever fire - I basically don't have a way to tell if the image was saved successfully.
So, I thought I would use the get_img_binary method of OFC2 to get the binary data of the image, and use jQuery to post the binary data to my Perl script.
I cannot figure out how to send the binary data correctly, or how to let my Perl script receive the binary data correctly, or both.
Here is my jQuery function:
var chartObj = $("#chart_object").get(0);
$.ajax({
type: "POST",
url: 'download_image.pl',
//contentType: 'application/octet-stream',
contentType: 'image/png',
//processData: false,
//data: { imgData: chartObj.get_img_binary() },
data: chartObj.get_img_binary(),
dataType: "text",
success: function(data) {
console.log( data );
}
});
You can see from some of my commented out lines that I have tried various contentTypes and other settings of the Ajax call.
The Ajax call is sending some data, but it doesn't appear to be binary. I think it is a base64 representation of the binary data.
Does anyone have any ideas on how to send binary data from javascript to the server?
The Perl script I have works fine for the post_image method, so I don't think the problem is there?
Thanks in advance!

I seem to have stumbled onto the solution.
Here is my ajax call:
var chartObj = $("#chart_object").get(0);
$.ajax({
type: "POST",
url: 'download_image.pl',
contentType: 'application/octet-stream',
processData: false,
data: imgData,
dataType: "text",
success: function(data) {
console.log( data );
}
});
And here is my Perl snippet to process/save the image:
use CGI qw(:standard);
use MIME::Base64;
...
my $img64 = param('POSTDATA');
my $img = decode_base64( $img64 );
...
#then print $img out to a file in binary mode
I had to decode the base64 representation of the PNG file, and then save it to a file.

i've got trouble too with using IE6 and OFC2 for saving image... So here are the scripts i use (javascript + PHP)
i know it's not very beautifull but jQuery doesn't want to work in a popup created via window.open('') on my IE6 so i decided to use a "old school method" to get it...
// javascript in the page displaying the flash chart
OFC = {};
OFC.jquery = {
name: "jQuery",
image: function(src) { return '<img src="data:image/png;base64,' + $('#'+src)[0].get_img_binary() + '" \/>'},
popup: function(src) {
var img_tag = OFC.jquery.image(src);
var img_win = window.open('', 'imagesave');
img_win.document.write('<html><head><title>imagesave<\/title><\/head><body>'+ img_tag + '<\/body><\/html>');
img_win.document.close();
},
popupie: function(src) {
var img_data = "image/png;base64,"+$("#"+src)[0].get_img_binary();
var img_win = window.open('', 'imagesave');
with(img_win.document) {
write('<html>');
write('<head>');
write('<title>imagesave<\/title>');
write('<\/head>');
write('<body onload="document.forms[0].submit()">');
write('<form action="\/ofc\/base64post.php" method="post">');
write('<input type="hidden" name="d" id="data" value="'+img_data+'" \/>');
write('<\/form>');
write('<div><img src="\/ofc\/ajax-loader.gif" border="0" alt="" \/><\/div>');
write('<div style="font-family: Verdana;">Please wait<br \/>After you can save the image<\/div>');
write('<\/body>');
write('<\/html>');
}
img_win.document.close();
}
}
function save_image() { // this function is automatically called
if ($.browser.msie)
OFC.jquery.popupie("my_chart"); // only for IE navigators
else
OFC.jquery.popup("my_chart"); // for the others
}
so, when we use the save_image() function (which is automaticaly called when you right clic dans select "Save Image Locally" on the flahs chart)
the image of the chart is tranfered to the popup and the data (base64 binary image) are posted to a php script /ofc/base64post.php that rander the picture :
<?php
// base64post.php
$data = split(';', $_POST['d']);
$type = $data[0];
$data64 = split(',', $data[1]);
$pic = base64_decode($data64[1]);
header("Content-type: $type");
echo $pic;
?>
hope that help someone !