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
Related
I have a canvas element to collect users signature, I then have a button with an onclick function to save the signature to the server, this runs an ajax script to POST the data to a php file.
The problem I have is that although the data gets saved, i have to click the button and then do a page refresh for the save event to actually occur.
Please help me to see where I've gone wrong as I don't wan tto have to do a manual refresh.
The code is below.
Canvas HTML element:
<div class="signature-pad--body">
<canvas id="signCanvas"></canvas>
</div>
<div class="signature-pad--footer">
<div class="description">Sign above</div>
<div class="signature-pad--actions">
<div>
<button type="button" class="button clear" data-action="clear">Clear</button>
<button type="button" class="button" data-action="undo">Undo</button>
</div>
<div>
<input type="button" class="button save" onclick="signUploader()" id="signReady" value="Upload above Signature" />
</div>
</div>
</div>
</div>
JS Ajax script:
<script type="text/javascript">
function signUploader() {
// Generate the image data
var pic = canvas.toDataURL('image/png');
pic = "data="+pic;
console.log(pic); //just for seeing that it's working
$.ajax({
url: "includes/signSave.php",
type: "POST",
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
dataType: "text",
data: pic ,
beforeSend : function() {
$("#signCanvas").fadeOut(); }
});
}
</script>
signSave.php
<?php
$img = $_POST['data'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$fileData = base64_decode($img);
$file = '../../uploads/signature' . time() . '.png';
file_put_contents($file, $fileData);
?>
This is my first time playing with ajax, so please help me out, and explain if there are errors in there.
Thanks
I think you should return true from signSave.php and in success, you can reload the page like below.
'success' : function(data) {
window.location.reload();
}
add
location.reload();
to refresh page after your ajax , since you are not returning anything to ajax
I have spent the better half of a day looking for an answer to this problem, I can just not wrap my head around it. I have an Index.php that requires the head element.
Head element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="requires/style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="requires/scripts.js"></script>
<title>Frontends</title>
</head>
<body>
<div class="grid-container">
<div class='header' style="background-color: #0059B3;">
<a href='index.php'>
<img src="assets/hhe logo.PNG"/>
</a>
</div>
This is required into the index.php file, this file looks like so:
<?php
require_once 'requires/head.html';
require 'requires/connect.php';
$string = "";
?>
<script type="text/javascript">
</script>
<div class='content' style='border-radius: 4px;'>
<div class="formcentre">
<input class="searchform" type="text" id="search" placeholder="Søger så snart du skriver." onkeyup="submitter();" autocomplete="off"/>
</div>
<div class='menu' style=' margin-top:10px;'>
<dl>
<dt>Tilføj</dt>
<dd>
<a href='opret.php'>Artikel</a><br>
Enhed<br>
Kategori<br>
</dd>
<dt>Slet</dt>
<dd>
Enhed<br>
Kategori
</dd>
</dl>
</div>
<table id="results">
</table>
⌃
</div>
</div>
<script type="text/javascript" src="requires/scripts.js"></script>
</body><!--Is opened in the reuired head.html-->
</html><!--Is opened in the reuired head.html-->
There is ofcourse a scripts.js file that looks like this:
function goBack() {
window.history.back();
}
function submitter() {
var search = document.getElementById("search").value;
/*AJAX the searchstring*/
$.ajax({
type: 'post',
url: 'ajax/searcher.php',
data: { searchString : search },
success: function(response){
$('#results').html(response);
}
});
return false;
}
$(document).ready(
function submitter() {
var search = document.getElementById("search").value;
/*AJAX the searchstring*/
$.ajax({
type: 'post',
url: 'ajax/searcher.php',
data: { searchString : search },
success: function(response){
$('#results').html(response);
}
});
return false;
}
function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 20) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
This all fine and well, I suffer from the problem that I get this specific error when i try to search for anything:
Uncaught ReferenceError: submitter is not defined at HTMLInputElement.onkeyup (index.php:27)
So the question is: should I not be able to do it this way?
Edit:
I would like to add that, apparently the browser may cache a JS file. So, yeah clear the cache. that's what actually did the trick including point number four on the marked solution. Thank you very much for the help.
Please, let's do two things:
Do not mix JavaScript and jQuery (although both are JavaScripts).
Use unobtrusive code.
These are the changes I have done:
Remove the onkeyup from the element:
<input class="searchform" type="text" id="search" placeholder="Søger så snart du skriver." autocomplete="off"/>
Add the event listener using the document's ready event:
$(function () {
$("#search").keyup(function () {
submitter();
});
});
Still better, you can do it this way:
$(function () {
$("#search").keyup(submitter);
});
Thanks to Chris G.
Use a single way:
function submitter() {
$.ajax({
type: 'post',
url: 'ajax/searcher.php',
data: {
searchString: $("#search").val()
},
success: function(response) {
$('#results').html(response);
}
});
return false;
}
Remove the duplicate occurrences of submitter() function definition. Just have only one inside the document's ready event.
I want to pass value to popup windows by using a tag with href when I click a
get values form db into hidden layer how to passing values by js.
A tag code
<a 'href=index.php?id=3'></a>
Hidden layer
<div class='wrap'>
<div class='content'>
<h2>Well Hello!</h2>
<p>
<? if ( isset($_GET['id'])){
$id = $_GET['id'];
echo $id ;} ?>
</p>
</div>
</div>
js code
$('a').on('click', function(){
$('.wrap, a').toggleClass('active');
return false;
});
If you want to do this the javascript way, see this example.
$(document).ready(function() {
$('a.toggle-wrap').on('click', function(e) {
e.preventDefault(); // prevent default behaviour of the link that would reload the page
$('.wrap, a.toggle-wrap').removeClass('active'); // remove class active on every link clicking
var target_id = $(this).attr("data-id"); //get the desired id from link
var wrap_element = $('.wrap[data-target=' + target_id + '] p');
var link_element = $('a[data-id=' + target_id + ']');
link_element.toggleClass('active');
$.ajax({
type: "GET",
url: "someOtherScriptThatOnlyOutputsResults.php",
data: "id="+target_id,
success: function(resultData) {
wrap_element.html(resultData).toggleClass('active'); // only toggle desired ids
}, error: function() {
wrap_element.html('Could not load data').toggleClass('active');
}
});
});
});
.wrap {
display: none;
}
.wrap.active {
display: block;
}
a {
color: green;
}
a.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggle-wrap" data-id="3">Link 3</a>
<a class="toggle-wrap" data-id="4">Link 4</a>
<div class="wrap" data-target="3">
<div class="content">
<h2>Well Hello content 3!</h2>
<p>Your db content related to id 3 from database, using php.
</p>
</div>
</div>
<div class="wrap" data-target="4">
<div class="content">
<h2>Well Hello content 4!</h2>
<p>Your db content related to id 4 from database, using php.
</p>
</div>
</div>
Add identifiers to the hidden wrap(s) and the link(s) and work with those. By using queries as seen in the js snippet, you can target certain HTML tags. Use CSS display to hide and show your wrap tag.
Create a new PHP file someOtherScriptThatOnlyOutputsResults.php to get and return data:
<?php
if(isset($_GET['id'])) {
$pdo = new PDO('mysql:host=someHost;dbname=someDatabase', 'someUser', 'somePass');
$statement = $pdo->prepare("SELECT columnWithContent FROM yourContentTable WHERE id = ?");
$statement->execute(array($_GET['id']));
$row = $statement->fetch();
$content = $row['columnWithContent'];
echo $content;
}
?>
hi guys i am trying to call a function on the onload event of a div but i can't find anything that would help me call a function on the onload event.
i did try to call it using this "oQuickReply.swap" but it didn't work as that would only swap the position. so can you tell me how can i add a onload event on a div?
my question is different as i have a function that can only be called in a loop to take the 'post_id' value to the function the onload event i want is to call my function select_comment() which would get me all the comments from my database to the page. let me show you my code and if there is something you dont understand tell me beforehand i will detail it.
<script type="text/javascript">
$(window).load(function(e){
// grab the scroll amount and the window height
loadmore();
select_likes();
select_share();
// get_recieve_friend_requests();
// get_sent_friend_requests();
});
function loadmore(){
var lastID = $('.load-more').attr('lastID');
// alert(lastID);
jQuery.ajax({
type:'POST',
url:'<?php echo base_url("user/get_all_post"); ?>',
data: {id: lastID },
dataType: 'json',
beforeSend:function(data){
$('.load-more').show();
},
success:function(data){
var ParsedObject = JSON.stringify(data);
var json = $.parseJSON(ParsedObject);
if (json=="") {
$("#bottom").append('<div class="btn btn-default col-md-6" >'+'No More Results'+'</div>');
$("#Load_more_data").hide()
}else{
$postID=json[json.length-1].id;
$('.load-more').attr('lastID', $postID);
$.each(json, function (key, data) {
var post_id=data.id;
var post_status=data.status;
var status_image=data.status_image;
var multimage=data.multimage;
if(!post_status=="" && !status_image==""){
$("#status_data").append('<div class="panel-footer" onload="select_comment('+post_id+');"><div class="row"><div class="col-md-12">13 people like this</div></div><ul class="media-list"><li class="media_comment"></li><li class="media"><div class="media-left media-top"><?php echo img($user_file_image); ?></div><div class="media-body"><div class="input-group"><form action="" id="form_content"><textarea name="textdata" id="content_comment" cols="25" rows="1" class="form-control message" placeholder="Whats on your mind ?"></textarea><button type="submit" id="comment_button" onclick="comment_here('+post_id+');">Comment</button></form></div></div></li></ul></div></div>');
});
}
}
});
}
function select_comment(post_id)
{
alert(post_id);
var User_id = $('.id_data').attr('value');
jQuery.ajax({
type:'POST',
url:'<?php echo base_url("user/select_comment"); ?>',
data: {Post_id:Post_id,User_id:User_id},
dataType: 'json',
success:function(data)
{
alert('you have like this');
}
});
}
now you see that's how i want to use my function to call when that div loads.
Please Refer Below Code. may Be help you
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
#divstyle {
text-align: center;
background-color: cadetblue;
width: 550px;
height: 180px;
margin-left: 100px;
}
</style>
</head>
<body onload="myFunction()">
<div id="divstyle">
<h2>Welcome to the tutorial for onload event!</h2>
<hr />
<h3>The function will be executed once the page is fully loaded.</h3>
</div>
<script>
function myFunction() {
alert("Hello, User!");
}
</script>
</body>
</html>
use jQuery to this:
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script>
$('.when-element-with-this-class').ready(function() {
alert( "ready!" );
});
</script>
<div class="when-element-with-this-class">
when this div is ready, js procced function with alert command
</div>
https://jsfiddle.net/g7re6khu/
you can use ready function on any element, window or document. Once the targeted element is loaded the required block is executed. Below is example for same.
$("#myid").ready(function(){
//block will be loaded with element with id myid is ready in dom
})
I made the code to load the pages inside the content div; however; when I want to submit, it doesn't redirect to the div when submitting. How can I make this possible.
//test.php is the index
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#content').load('home.php');
$('ul#menu li a').click(function(){
var page = $(this).attr('href');
$('#content').load(page + '.php');
return false;
});
});
</script>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>Math</li>
</ul>
Menu left
<div id="content"></div>
MenuRight
</body>
</html>
//////////////////////home.php is the first link and welcome page
<?php
echo "HOME PAGE";
?>
//////////////////////math.php is the second link and the one I'm having problems with.
<?php
if($_POST){
$a=$_POST['a'];
$b=$_POST['b'];
$c=$a+$b;
echo $c;
}
else{
echo"
<form name=f method=post action=math.php>
<input name=a>+<input name=b>=?
<input id='buttoncalc' name=calc type=submit value=Calc>
</form>
";
}
?>
Thank you.
You mean that this form should works in ajax either?
$('#buttoncalc').on('click', function(e){
e.preventDefault();
var form = $(this).closest('form');
$.post( form.attr('action') , form.serialize(), function( data ) {
alert( "Data Loaded: " + data );
});
});
Function click won't works on dynamically created content. You need to use on() and send data by post. When you receive, you can insert it into #content again.