I have text area where I need to load image to <img> tag. Then, I want to post content of text area to generate_pdf.php to generate pdf. I have encauntered URI Too Largeerror when I post text area content by $.ajax({}).
Method 1-$.ajax({}) in $().on("click",function(){}) of submit button
<?php
//image from sql
$image =$array_image[0]['file'];
$encode_img ='"data:image/jpeg;base64,'.base64_encode($image).'"';
?>
<!DOCTYPE html>
<html>
<head>
<script src="../../library/jquery/jquery-3.4.1.min.js"></script>
<script>
$( document ).ready(function()
{
let hd = document.createElement('div'); // Create new DIV
hd.style.display = "none"; // Hide new DIV
hd.innerHTML = document.querySelector('#ta').value; // set its innerHTML to textarea's
document.body.prepend(hd); // Add to body
document.querySelector('#test').src = <?php echo $encode_img;?>;
document.querySelector('#ta').value = hd.innerHTML;
content =$('#ta').val();
$('#test').src = <?php echo $encode_img;?>;
//submitted uri too large
//-(<form id="text_editor" name="text_editor" >)
$('#pdf').on("click",function()
{
$.ajax({
type:"POST",
url :"generate_pdf.php",
data:{
'pdf ' :content,
}
,
success:function(data)
{
alert('successfully posted!');
$('#content').html(data);
}
});
})
})
</script>
</head>
<body>
<form id="test_img" name="test_img" >
<textarea id="ta" name="ta">
<img alt="test" id="test">
</textarea>
<input type="submit" value="Submit" name="pdf" id="pdf">
</form>
<div id="content" name="content"></div>
</body>
</html>
Then , I tried using $.post in $().submit(function(event){}). This able to submit without this error.
Method 2-$.post in $().submit(function(event){}) of form
<?php
//image from sql
$image =$array_image[0]['file'];
$encode_img ='"data:image/jpeg;base64,'.base64_encode($image).'"';
?>
<!DOCTYPE html>
<html>
<head>
<script src="../../library/jquery/jquery-3.4.1.min.js"></script>
<script>
$( document ).ready(function()
{
let hd = document.createElement('div'); // Create new DIV
hd.style.display = "none"; // Hide new DIV
hd.innerHTML = document.querySelector('#ta').value; // set its innerHTML to textarea's
document.body.prepend(hd); // Add to body
document.querySelector('#test').src = <?php echo $encode_img;?>;
document.querySelector('#ta').value = hd.innerHTML;
content =$('#ta').val();
$("#test_img").submit(function(event)
{
event.preventDefault();
var $form = $( this ),
url = $form.attr( 'action' );
var posting = $.post( url, { pdf:content} );
posting.done(function( data )
{
$('#content').html(data);
});
})
})
</script>
</head>
<body>
<form id="test_img" name="test_img" method="POST" action="generate_pdf.php" >
<textarea id="ta" name="ta">
<img alt="test" id="test">
</textarea>
<input type="submit" value="Submit" name="pdf" id="pdf">
</form>
<div id="content" name="content"></div>
</body>
</html>
$.post is a shorthand for $.ajax.But, why method 2 able to submit successfully and first method could not? In method 1, content of data that we posting included in url. But, in second method, not included. Thanks in advance.
