Error in Image resizing JavaScript - javascript

I am resizing image before upload with JavaScript library the link is here https://gist.github.com/dcollien/312bce1270a5f511bf4a It has successfully created the blob.My html form is here:
<form action="/" class="data-form" method="POST" enctype="multipart/form-data">
<table>
<tr>
<td><?php echo $form['title']->renderLabel(); ?> </td>
<td><?php echo $form['title']->render(); ?>
<?php echo $form['title']->renderError(); ?>
</td>
</tr>
<tr>
<td><?php echo $form['patient_name']->renderLabel(); ?> </td>
<td><?php
echo $form['patient_name']->render();
echo $form['patient_name']->renderError(); ?>
</td>
</tr>
<tr>
<td><?php echo $form['thumbnail']->renderLabel(); ?> </td>
<td><?php
echo $form['thumbnail']->render();
echo $form['thumbnail']->renderError(); ?>
</td>
<td><img id="preview">
</td>
</tr>
<input class="button" type="Submit" value="Save" />
</form>
My JavaScript code is here:
<script>
document.getElementById('clinic_stories_thumbnail').onchange = function(evt) {
ImageTools.resize(this.files[0], {
width: 300, // maximum width
height: 250 // maximum height
}, function(blob, didItResize) {
// didItResize will be true if it managed to resize it, otherwise false (and will return the original file as 'blob')
document.getElementById('preview').src = window.URL.createObjectURL(blob);
$("#clinic_stories_thumbnail").attr('value',blob);
});
};
I am stuck how to upload the resized blob to server. I have appended the blob with input field through its value attribute. But the field does not get this and the form is submitted with the original image.So please advice how should I send the blob with same POST request. I don't want to submit a separate request for the blob. I want to submit the blob to server with the existing post request.

Related

Display alert on button submission

So I have built a very basic application system. I have made one page where I can see all the applications in a table via MySQL query. I have also made so I can click a button to either approve or deny the application. Dependning on which button I press, the row with that specific user will be moved do the approved or denied table in the database. But, I want to display an alert when pressing the different buttons at the same time they send the row id to the PHP code.
Here is my code for the application table site: (register.php)
<?php
$query = "SELECT * FROM ansokningar";
$query_run = mysqli_query($link, $query);
?>
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th> ID </th>
<th> Förnamn </th>
<th>Efternamn </th>
<th>Mejladress</th>
<th>Ålder</th>
<th>Ansökt som</th>
<th>Läs Ansökning</th>
<th>Godkänn</th>
<th>Neka</th>
</tr>
</thead>
<tbody>
<?php
if(mysqli_num_rows($query_run) > 0)
{
while($row = mysqli_fetch_assoc($query_run))
{
?>
<tr>
<td><?php echo $row['id']; ?></td>
<td><?php echo $row['fornamn']; ?></td>
<td><?php echo $row['efternamn']; ?></td>
<td><?php echo $row['mejladress']; ?></td>
<td><?php echo $row['alder']; ?></td>
<td><?php echo $row['intresseradavyrket']; ?></td>
<td>
<form action="register.php" method="post">
<input type="hidden" id="deleteid" name="delete" value="<?php echo $row['id']; ?>">
<center> <button id="delete" type="submit" name="delete" class="btn btn-danger btn-circle btn-sm">
<i class="fas fa-trash"></i></button></center>
</form>
</td>
</tr>
<?php
}
}
else {
echo $ingaansokning;
}
mysqli_close($link);
?>
And here is my PHP code for moving the row: (neka.php)
<?PHP require '../db/dbconfig.php';
if(isset($_POST['id']))
{
$id = $_POST['id'];
$query = "
INSERT INTO nekade SELECT * FROM ansokningar WHERE id='$id';
DELETE FROM ansokningar WHERE id='$id';
";
$query_run = $link->multi_query($query);
if($query_run)
{
$_SESSION['success'] = '';
header('Location: ../../register.php');
exit();
How do I send the row ID from the first page to the second and display one alert when it's done?
I have tried this on the first page (register.php) but it doesn't work:
<script>
$(function(){
$('#delete').click(function() {
var id = <?php echo $row['id']; ?>;
$.ajax({
type: 'POST',
url: 'includes/ansokningar/neka.php',
data:{id: id},
success: function(data){
Swal.fire(
'Grattis!',
'Din ansökan är nu skickad!',
'success'
)
}
})
})
});
(Without the ajax stuff it works to move the user to the other table)
Thanks!

Popup content dependent on AJAX result

I am not that experienced in web developing, so sorry for rookie mistakes;)
In HTML, I want to create a dynamic popup window(div hidden by CSS). On the click of a button I am performing an AJAX post request. The result of the request is a string, which is stored in a hidden input field on the HTML page.
The popup contains a table with the content submitted by the string.
However now I want to retrieve the string via a PHP $_GET or $_POST request.
This is not working at the moment and I don't understand why.
Opening the popup window I am getting these errors:
Notice: Undefined index: popupcontenthidden in ...
Warning: Invalid argument supplied for foreach() in
The HTML:
<div class="popupcontent">
<span class="helper"></span>
<div>
<div class="popupclose">X</div>
<h3>UPDATE DATABASE ENTRY</h3>
<h4>Enter values:</h4>
<table id="popupresult">
<form name='form' action="" method='post'>
<input type='text' name='popupcontenthidden' id='popupcontenthidden'>
</form>
<tr>
<th>Field</th>
<th>Type</th>
<th>Null</th>
<th>Key</th>
<th>Default</th>
<th>Extra</th>
<th>Value</th>
</tr>
<?php
$rows = json_decode($_POST['popupcontenthidden']);
foreach ( $rows as $print ) {
?>
<tr>
<td><?php echo $print->Field; ?></td>
<td><?php echo $print->Type; ?></td>
<td><?php echo $print->Null; ?></td>
<td><?php echo $print->Key; ?></td>
<td><?php echo $print->Default; ?></td>
<td><?php echo $print->Extra; ?></td>
</tr>
<?php } ?>
</table>
</div>
The JS:
$.ajax({
type:'POST',
url: '../wp-content/plugins/ars-management/admin/ars-management-admin-ajax.php',
data: {function: "update", entries: entries},
success: function(response) {
var rows = response;
//hand data to html hidden input
document.getElementById("popupcontenthidden").value = rows;
//open popup on click
$(".popupcontent").show();
}
});
I understand that the second error is happening because $rows is empty.
But how can I fix the issue and retrieve the string from the input field? I can confirm that the string is correctly stored in the input field so all the AJAX stuff works.
Thank you so much!
A kind of solution here:
HTML:
<div class="popupcontent">
<span class="helper"></span>
<div class="popupclose">X</div>
<h3>UPDATE DATABASE ENTRY</h3>
<h4>Enter values:</h4>
<table id="popupresult">
<thead>
<tr>
<th>Field</th>
<th>Type</th>
<th>Null</th>
<th>Key</th>
<th>Default</th>
<th>Extra</th>
<th>Value</th>
</tr>
</thead>
<tbody id="myPopupContentTableBody"></tbody>
</table>
</div>
Javascript:
$.ajax({
type:'POST',
url: '../wp-content/plugins/ars-management/admin/ars-management-admin-ajax.php',
data: {function: "update", entries: entries},
success: function(response) {
$('#myPopupContentTableBody').html(response);
//open popup on click
$(".popupcontent").show();
}
});
PHP:
<?php
...
$rows = myPHPCalculation;
foreach ($rows as $print){
echo '
<tr>
<td>'.$print['Field'].'</td>
<td>'.$print['Type'].'</td>
<td>'.$print['Null'].'</td>
<td>'.$print['Key'].'</td>
<td>'.$print['Default'].'</td>
<td>'.$print['Extra'].'</td>
</tr>
';
}
...

jquery load data break modal

I have more and more problems :(
I try get a php table witch i use datatable.js for it to reload data without refresh page.
Data was load true jq with load:
$(document).ready(function () {
data_th1();
//data tablice
function data_th1(){
setInterval(function () {
$('#tablica_home_1').load('ajax/data.php')
});
}
});
And data is loaded and i can refresh it with function data_th1() BUT when data was loaded i have one + button for open modal to add some coments, ehh problem was that modal after load data true jq not work?
HTML CODE WHEN DATA WAS LOAD (index.php)
<div id="tablica_home_1"></div>
SCRIPT IN INDEX.PHP FOR LOAD
<script>
$(document).ready(function () {
data_th1();
//data tablice
function data_th1(){
setInterval(function () {
$('#tablica_home_1').load('ajax/data.php')
});
}
});
</script>
DATA.PHP
<?php
require_once("../includes/inc_files.php");
//tablica poziva
$sql7 = "SELECT * FROM svi_pozivi WHERE calltype='Outbound' AND status = 'NO ANSWER' OR calltype='Inbound' AND status = 'NO ANSWER' ORDER BY datum DESC";
$result7 = $database->query($sql7);
?>
<table id="example" class="display responsive-table datatable-example">
<thead>
<tr style="text-transform: uppercase;">
<th>ID</th>
<th>Pozivatelj</th>
<th>Primatelj</th>
<th>Datum</th>
<th>Status poziva</th>
<th>Komentar</th>
<th>Obrada</th>
<th>Funkcije</th>
</tr>
</thead>
<tbody>
<?php while ($row7 = $database->fetch_array($result7)){ ?>
<tr>
<td><?php echo $row7['id']; ?></td>
<td>
<?php
if ($row7['calltype'] == 'Outbound'){
echo $row7['src'];
}
else{
echo realbroj_ul($row7['src']);
echo ' <a href="index.php?stranica=imenik-add&broj=realbroj_iz($row7["dst"])" alt="Dodaj u imenik"><i class="material-icons" style="margin-top: -4px;position: absolute;color: blue;margin-left: 5px;">add_circle</i>';
}
?></td>
<td>
<?php
if ($row7['calltype'] == 'Outbound'){
echo realbroj_iz($row7['dst']);
echo '<a href="index.php?stranica=imenik-add&broj=realbroj_iz($row7["dst"])" alt="Dodaj u imenik"><i class="material-icons" style="margin-top: -4px;position: absolute;color: blue;margin-left: 5px;">add_circle</i>';
}
else{
echo $row7['dst'];
}
?></td>
<td><?php echo realdatum($row7['datum']); ?></td>
<td><?php echo realstatus($row7['status']); ?></td>
<td>
<?php
//komentar
$sql8 = "SELECT * FROM komentari WHERE call_id = '$row7[id]'";
$result8 = $database->query($sql8);
$row8 = $database->fetch_array($result8);
if ($row8['id'] != ''){
echo $row8['komentar'];
}
else{
echo 'Nema komentara';
echo '<a data-toggle="modal" class="modal-trigger" data-id="'.$row7["id"].'" href="#komentarM" alt="Kreiraj Komentar"><i class="material-icons" style="margin-top: -4px;position: absolute;color: blue;margin-left: 5px;">add_circle</i>';
}
?></td>
<td><?php echo statuskomentara($row7['k_status']);?></td>
<td>7</td>
</tr>
<?php } ?>
</tbody>
</table>
AND MODAL IN INDEX.PHP
<div id="komentarM" class="modal bottom-sheet">
<div class="modal-content">
<h4>KOMENTAR</h4>
<p>Dodajte svoj komentar</p>
</div>
<form id="koment_post">
<input type="hidden" name="id" value="">
<input type="hidden" name="agent" value="<?php echo $ime2; ?>">
<input style="width=80%;" type="text" name="komentar" placeholder="Unesite Vaš komentar...">
<div class="modal-footer">
<button type="submit" class=" modal-action modal-close waves-effect waves-green btn-flat">SPREMI</button>
</div>
</form>
</div>
ONE AGAIN: I have in data.php table with modal call a href, but when i call data.php with jq laod function modal was not work. I need to fix that modal show,
I am not using modal with ajax load, i am searching a lot of site and this problem was not solved.
Maybe i'm too late, but, just in case for you or another person who may want to know how to fix this:
The explanation for this, it's in here
I've used the element BODY to access my element, like this:
$('body').on('click', '.Class',function () {});
$('body').on('click', '#Id',function () {});
This are a few examples, but it worked for me. I hope it'll help u.

How to get values dynamically in js from php?

I want to get dynamic values from php in js in a dynamic manner...Let me elaborate: First I show the image then code:
<div id="">
<table border="1" width="820" style="margin-left:15px;">
<tr>
<th>Sr #</th>
<th>Commented Post</th>
<th>Commenter Name</th>
<th>Commenter Email</th>
<th>Comments</th>
<th>Status</th>
</tr>
<?php
$values = array();
while($row= mysqli_fetch_assoc($res)) {
$values[] = $row['comment_id'];
?>
<tr align="center" style="height:50px;">
<td><?php echo $row['comment_id']; ?></td>
<td><?php echo $row['post_title']; ?></td>
<td><?php echo $row['comment_name']; ?></td>
<td><?php echo $row['comment_email']; ?></td>
<td><?php echo $row['comment_text']; ?></td>
<td>
<?php
if($row['status']==0) { ?>
<div class="status_<?php echo $row['comment_id']; ?>" id="status_<?php echo $row['comment_id']; ?>">Unapproved</div>
<?php } else { ?>
Approved
<?php } ?>
</td>
</tr>
<?php }
?>
</table>
</div>
And Js here's:
<script type="text/javascript">
$(document).ready(function(){
var values = <?php echo json_encode($values); ?>;
var id = values[0];
$('.status_'+id).click(function(){
$("#status_"+id).html("<b>Test</b>");
});
var i = values[1];
$('.status_'+i).click(function(){
$("#status_"+i).html("<b>Test</b>");
});
});
</script>
I want to get all comment id's in js dynamically, so that on clicking each row link, it changes to text "Test"...As I have written the js code manually...how we obtain all the comment_id's dynamically in js..I hope you got the idea what I am trying to do...
There's no point in assigning unique ids to each of your elements. Why not do something like:
<tr>
<td>...</td>
<td><a href="#" onclick="toggle(this, <?php echo $id ?>)">Unapproved</td>
</tr>
then something like
function toggle(node, id) {
node.parentNode.innerHTML = '<b>test</b>';
... do something with "id" value? ...
}
No need for getElementById, assigning a massive pile of repetitive ids, etc.. just a single function call and a bit of DOM tree traversal.
Try to add a class to your status TD, like <td class="status" data-id="<?php echo $row['comment_id'] ?>">// your inital value</td>.
Using jQuery you can easily listen for events which are attached to a an event listener:
$(document).on('click', '.status', function() {
var id = $(this).attr('data-id');
$(this).html('<strong>Test</strong>');
// maybe to something with ajax?
$.ajax({
url: 'yourfile.php?call=doSomething&id=' + id,
type: 'post'
}).done(function(response) {
// console.log(response);
});
});
You dont appear to actually use the ids.
All you need to do is ascertain the clicked element, which use can do using this
html:
<div class="status">Unapproved</div>
js:
$(document).ready(function(){
$('.status').click(function(){
$(this).html("<b>Test</b>");
});
});

Load php file with ajax

Im using ajax to load the testNew.php file into the Cart.html file. It loads the testNew.php file but when i click on the button add which is in the testNew.php, 0 is being entered in the database and as soon as i click on the add button the page refresh by itself. My problem is that i dont want the page to refresh and want the add button to do the same action as in the testNew.php file(which works correctly).
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.js'>
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("#product").click(function() {
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "testNew.php",
dataType: "html", //expect html to be returned
success: function(response){
$("#responsecontainer").html(response);
//alert(response);
}
});
});
});
</script>
</head>
<body>
<table border="1">
<tr>
<td>
<input type="button" id="product" name="product"value="View all products"/>
</td>
</tr>
</table>
<div id="responsecontainer"></div>
Here is the testNew.php which works correctly.
<?php
include'connect.php';
$image = isset($_REQUEST['image']) ? $_REQUEST['image'] : "";
$id = isset($_REQUEST['id']) ? $_REQUEST['id'] : "";
$name = isset($_REQUEST['name']) ? $_REQUEST['name'] : "";
$price= isset($_REQUEST['price']) ? $_REQUEST['price'] : "";
$sql="SELECT * FROM product";
$result = mysql_query($sql);
if($result>0){
?>
<table border='1'>
<tr>
<th>Id</th>
<th>Image</th>
<th>Name</th>
<th>Price MUR</th>
</tr>
<?php
while ($row = mysql_fetch_array($result)){
?>
<tr>
<td><?php echo ($row['id']); ?></td>
<td><img src=<?php echo $row['image'] ?> width='120'
height='100'/></td>
<td><?php echo htmlspecialchars($row['name']); ?></td>
<td><?php echo htmlspecialchars($row['price']); ?></td>
<td>
<form method="POST" action="" >
<input type="hidden" name="id" value="<?php echo $row['id']; ?>" />
<input type="hidden" name="name" value="<?php echo $row['name']; ?>" />
<input type="hidden" name="image" value="<?php echo $row['image']; ?>" />
<input type="hidden" name="price" value="<?php echo $row['price']; ?>" />
<input id="submit" type="submit" name="submit" value='Add to cart'
onclick="add()"/>
</form>
</td>
</tr>
<?php
}
?>
</table>
<?php
}
$insert = "INSERT INTO product_add(id, name, price) VALUES ('$id', '$name','$price')";
$insertQuery=mysql_query($insert);
?>
Your error in thought is actually that you are including a form through AJAX of which the HTML is then loaded into your page after which the action attribute on the form refers to the page itself (loading HTML into your page with AJAX does not work the same as an iframe) which does not have the relevant code to actually parse and insert the database.
You need to make a separate page that only accepts a few parameters and inserts those into the database. However, before you do that you need to read this:
I'm going to go off on the safety of your code for a tad.
$_REQUEST refers to both $_GET and $_POST, you really want only $_POST as you just want to deal with what gets submitted through a form.
You never sanitize your input, this way a person could craft an URL with say phpNew.php?id='; DROP TABLE wooptiedoo. This is a simplified example but nevertheless you should take a closer look at the mysql_real_escape_string documentation and possibly some guides on "sql injection".
After that those same variables can be used for XSS which means someone can use your page to serve random HTML to people visiting that site and trusting your domain. I suggest you look up the htmlentities function and/or read up on "cross-site scripting" attacks.
And to end it all, the mysql_* functions are deprecated and you should probably be using mysqli_* functions.

Categories