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.
Adding preventDefault() method in $('#pdf').on("click",function() {}) had solve error URI Too Large.
The preventDefault() method stops the default action of a selected element from happening by a user. This method does not accept any parameter and works in two ways:
It prevents a link from following the URL so that the browser can't go another page.
It prevents a submit button from submitting a form.
Code:
$('#pdf').on("click",function(e)
{
e.preventDefault();
$.ajax({
type:"POST",
url :"index_debug_uritoolarge_2.php",
data:{
pdf :$('#ta').val(),
},
success: function(data)
{
alert('successfully posted!');
$('#content').html(data);
}
});
})
Reference: post_textarea_content_in_ajax