Develop Reference

Reloading div only if database has new records

I have below code which is reloading new records if inserted.
On page load it works fine But after reloading div when get new data, it is keep reloading again and again and also not including a file which is included in order_new_orders.php.
I want only reload the div if new record inserted and then keep close.
order_new_orders.php
**EXAMPLE:**
$sqla = "select order_id from orders where status = 0
and store_id = '".$_SESSION['ses_user_idx']."'";
$sqlb = $dba2->query($sqla);
while ($sqlc = $sqlb->fetch_assoc()){
include ('inc/afile.php');
echo $sqlc['name'];
}
Code:
var currentNewOrders = "";
function auto_loadNewOrders(){
$.ajax({
type: 'POST',
url: 'order_new_orders.php',
success: function(data){
if(currentNewOrders !== data) {
$("#newOrderRefresh").html(data);
currentNewOrders = data;
}
}
});
}
auto_loadNewOrders();
setInterval(auto_loadNewOrders,1000);

PHP
order_new_orders.php
<?php
//Dummy Data
$datas = array(
array('id' => 1, 'name' => 'Dummy Name1', 'age' => 25),
array('id' => 2, 'name' => 'Dummy Name2', 'age' => 28),
array('id' => 3, 'name' => 'Dummy Name2', 'age' => 28),
);
if (isset($_GET['checkNew']) && isset($_GET['lastDataID'])) {
if (count($datas) > $_GET['lastDataID']) {
echo 1;
} else {
echo 'No new Data';
}
exit;
}
//Data Output structure
$htm = "<table border='1'>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
";
foreach ($datas as $row) {
$htm.="<tr class='data-row' data-row-id='$row[id]'>
<td>$row[name]</td>
<td>$row[age]</td>
</tr>";
}
$htm.="</table>";
echo $htm;
exit;
HTML & jQuery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newOrderRefresh"></div>
<script>
$(document).ready(function() {
auto_loadNewOrders();
setInterval(checkForNew, 1000);
});
function auto_loadNewOrders() {
$.ajax({
type: 'POST',
url: 'order_new_orders.php',
success: function(data) {
$("#newOrderRefresh").html(data);
}
});
}
function checkForNew() {
var lastData = $('.data-row').last().attr('data-row-id');
$.ajax({
type: 'POST',
url: 'order_new_orders.php?checkNew&lastDataID=' + lastData,
success: function(data) {
if (data == 1) {
auto_loadNewOrders();
}
}
});
}
</script>

How to update image with AJAX in Laravel

I'm having problems updating a record with an image. I don't what I need to do. My image is stored in a public folder called 'img/products'
ProductController.php
This is my controller. It works well without modifying the image.
public function update(Request $request, $id)
{
$validator = Validator::make($request->input(), array(
'name' => 'required',
'category_id' => 'required',
'description' => 'required',
'price_neto' => 'required',
'iva' => 'required',
'price_total' => 'required',
'image' => '',
));
if ($validator->fails()) {
return response()->json([
'error' => true,
'messages' => $validator->errors(),
], 422);
}
$products = Product::find($id);
$products->name = $request->input('name');
$products->category_id = $request->input('category_id');
$products->description = $request->input('description');
$products->price_neto = $request->input('price_neto');
$products->iva = $request->input('iva');
$products->price_total = $request->input('price_total');
$products->image = $request->input('image');
$products->save();
return response()->json([
'error' => false,
'products' => $products,
], 200);
}
Product.js
All I know is that I have to use var formData = new FormData ($ ("# frmAddProduct") [0]); as in the store function. I can enter records with images but not edit them. My image is stored in a public folder called 'img/products'
$(document).ready(function() {
$("#btn-edit").click(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: 'PUT',
url: '/product/' + $("#frmEditProduct input[name=product_id]").val(),
data: {
name: $("#frmEditProduct input[name=name]").val(),
category_id: $("#frmEditProduct select[name=category_id]").val(),
description: $("#frmEditProduct input[name=description]").val(),
price_neto: $("#frmEditProduct input[name=price_neto2]").val(),
iva: $("#frmEditProduct input[name=iva2]").val(),
price_total: $("#frmEditProduct input[name=price_total2]").val(),
image: $("#frmEditProduct input[name=image]").val(),
},
dataType: 'json',
success: function(data) {
$('#frmEditProduct').trigger("reset");
$("#frmEditProduct .close").click();
window.location.reload();
},
error: function(data) {
var errors = $.parseJSON(data.responseText);
$('#edit-product-errors').html('');
$.each(errors.messages, function(key, value) {
$('#edit-product-errors').append('<li>' + value + '</li>');
});
$("#edit-error-bag").show();
}
});
});
});
function editProductForm(product_id) {
$.ajax({
type: 'GET',
url: '/product/' + product_id,
success: function(data) {
$("#edit-error-bag").hide();
$("#frmEditProduct input[name=name]").val(data.products.name);
$("#frmEditProduct select[name=category_id]").val(data.products.category_id);
$("#frmEditProduct input[name=description]").val(data.products.description);
$("#frmEditProduct input[name=price_neto2]").val(data.products.price_neto);
$("#frmEditProduct input[name=iva2]").val(data.products.iva);
$("#frmEditProduct input[name=price_total2]").val(data.products.price_total);
$("#frmEditProduct file[name=image]").val(data.products.image);
$("#frmEditProduct input[name=product_id]").val(data.products.id);
$('#editProductModal').modal('show');
},
error: function(data) {
console.log(data);
}
});
}

You should check if the file exists before trying to delete, for example:
$product = Product::find($id);
if(!$product)
{
return response()->json(['error' => 'Product not found'], 404);
}
if (Storage::disk('local')->exists('img/products/'.$product->image)) {
Storage::disk('local')->delete('img/products/'.$product->image);
}
Take a look one example only:
public function update(UpdateProductFormRequest $request, $id)
{
$product = Product::find($id);
$data = $request->only('name','category_id','description',
'price_neto','iva','price_total');
if(!$product)
{
return response()->json(['error' => 'Product not found'], 404);
}
// when saving the file, delete the old file first
if ($request->hasFile('image')) {
$file = $request->file('image');
$original_filename = $file->getClientOriginalName();
// $mime = $file->getMimeType(); // Suggestion
$extention = $file->getExtension();
// $size = $file->getClientSize(); // Suggestion
$stored_filename = $original_filename; // md5($original_filename); // Suggestion
$file_path = storage_path('public/img/products/');
if (Storage::disk('local')
->exists("public/img/products/{$stored_filename}.{$extention}"))
{
Storage::disk('local')
->delete("public/img/products/{$recordSet->stored_filename}.{$extention}");
}
$file_moved = $file->move($file_path, "{$stored_filename}.{$extention}");
$data->image = "{$stored_filename}.{$extention}";
}
// Updating data
$result = $product->update($data);
if ($result) {
/* return redirect()
->route('products.index')
->withSuccess('Product was successfully updated'); */
return response()->json([
'message' => 'Product was successfully updated'
'product' => $product
]); // You don't have to put 200 because it's the default
}
/* return back()
->withErrors(['Unable to update the product'])
->withInput($request->input()); */
return response()->json(['error' => 'Unable to update the product'], 400);
}
It would be better if you create a form request to do your validations.
Don't forget to create links to the storage path:
php artisan storage:link
I think it would be helpful:
$("#btn-edit").click(function() {
var formData = new FormData($("#frmAddProduct")[0]);
formData.append('_method', 'put');
formData.append('_token', "{{ csrf_token() }}"); // if you are using Blade
var route= "{{ route('products.update', ['id' => ':id']) }}"; // if you are using Blade
route= route.replace(':id', $("#frmEditProduct input[name=product_id]").val())
$.ajax({
method: 'post',
url: route,
data: formData,
dataType: 'json',
success: function(data) {
$('#frmEditProduct').trigger("reset");
$("#frmEditProduct .close").click();
window.location.reload();
},
error: function(data) {
var errors = $.parseJSON(data.responseText);
$('#edit-product-errors').html('');
$.each(errors.messages, function(key, value) {
$('#edit-product-errors').append('<li>' + value + '</li>');
});
$("#edit-error-bag").show();
}
});
});
Is your js script in "Blade" ? If so, try it this way:
var image = '{{ asset("/img/products/_image_file") }}'
image.replace('_image_file', data.products.image)
$("#frmEditProduct file[name=image]").val(image)
Note that we can first use the "asset ()" helper to create the full path to use to find the image, but with a "_image_file" placeholder
After that, we use the replace () function to change the "_image_file" placeholder with the actual image file brought from the ajax response.

Something like this?
ProductController.php
public function update(Request $request, $id)
{
$validator = Validator::make($request->input(), array(
'name' => 'required',
'category_id' => 'required',
'description' => 'required',
'price_neto' => 'required',
'iva' => 'required',
'price_total' => 'required',
'image' => '',
));
if ($validator->fails()) {
return response()->json([
'error' => true,
'messages' => $validator->errors(),
], 422);
}
$products = Product::find($id);
if ($request->hasFile('image')) {
$productImage = $request->file('image');
$productImageName = rand() . '.' . $productImage->getClientOriginalExtension();
if (Storage::disk('local')->exists("img/products/{$productImageName}")) {
Storage::disk('local')->delete("img/products/{$recordSet->$productImageName}");
}
$file_moved = $productImage->move(public_path('img/products'), $productImageName);
$data->image = "{$productImageName}";
}
$products->save([
'name' => $request->name,
'category_id' => $request->category_id,
'description' => $request->description,
'price_neto' => $request->price_neto,
'iva' => $request->iva,
'price_total' => $request->price_total,
'image' => $productImageName,
]);
return response()->json([
'error' => false,
'products' => $products,
]);
}
Product.js
$("#btn-edit").click(function() {
var formData = new FormData($("#frmEditProduct")[0]);
formData.append('_method', 'put');
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: 'POST',
url: '/product/' + $("#frmEditProduct input[name=product_id]").val(),
data: formData,
dataType: 'json',
success: function(data) {
$('#frmEditProduct').trigger("reset");
$("#frmEditProduct .close").click();
window.location.reload();
},
error: function(data) {
var errors = $.parseJSON(data.responseText);
$('#edit-product-errors').html('');
$.each(errors.messages, function(key, value) {
$('#edit-product-errors').append('<li>' + value + '</li>');
});
$("#edit-error-bag").show();
}
});
});

Passing data in PHP file to JS file in JSON format

I am trying to build a small program on a webpage that shows a drop-down list input type with the makes of cars (Ford and BMW in this case). Once a selection is made, the user clicks the submit button and below the form, a list of models specific to the make will appear in the results div.
I was provided with 4 files:
index.php:
<form id="form">
<label for="make">
Make
<select name="make" id="make">
<option value="" selected="selected">None</option>
<option value="Ford">Ford</option>
<option value="BMW">BMW</option>
</select>
</label>
<input name="submit" value="submit" type="submit" id="submit">
</form>
<div id="results">
</div>
<script src="js/main.js"></script>
data.php:
<? php
function data() {
$data = array(
array(
'make' => 'Ford',
'model' => 'Fiesta'
),
array(
'make' => 'Ford',
'model' => 'Focus'
),
array(
'make' => 'Ford',
'model' => 'Mustang'
),
array(
'make' => 'BMW',
'model' => '320'
),
array(
'make' => 'BMW',
'model' => 'X3'
),
array(
'make' => 'BMW',
'model' => 'X5'
),
);
}
ajax.php:
<?php
require_once( 'data.php' );
$data = data();
$json_data = array();
And main.js:
$(document).ready(() => {
var run_ajax = function() {
results = $('#results');
$.ajax({
type: 'post',
url: 'ajax.php',
data: formData,
dataType: 'json',
beforeSend: function() {
},
success: function(response) {
},
});
}
$('#submit').on('submit', function(e) {
e.preventDefault();
run_ajax();
});
});
How do I access the data in data.php from main.js? I'd appreciate a thorough explanation of possible. Thank you in advance.

Every thing is done seeing your provided code you have to just connect them but first you need to change the data.php file to the following
<?php
function data() {
return array(
array(
'make' => 'Ford',
'model' => 'Fiesta'
),
array(
'make' => 'Ford',
'model' => 'Focus'
),
array(
'make' => 'Ford',
'model' => 'Mustang'
),
array(
'make' => 'BMW',
'model' => '320'
),
array(
'make' => 'BMW',
'model' => 'X3'
),
array(
'make' => 'BMW',
'model' => 'X5'
),
);}
then your ajax.php file to the following
<?php
require_once( 'data.php' );
$data = data();
$make = $_POST['make'];
// print_r($data);exit;
foreach($data as $car){
if(in_array($make,$car)){
$filtered[]=$car;
}
}
echo json_encode($filtered);
then change your main.js function to the following
$(document).ready(() => {
var run_ajax = function () {
results = $('#results');
$.ajax({
type: 'post',
url: 'ajax.php',
data: $("form").serialize(),
dataType: 'json',
beforeSend: function () {},
success: function (response) {
for (var key in
response) {
$("#results").append(" <div > Make: " + response[key]['make'] +
", Model:" + response[key]['model'] + " </div>");
}
},
});
}
$('#form').on('submit', function (e) {
e.preventDefault();
run_ajax();
});
});
hope that sorts out
EDIT
Actually, we have to send the select dropdown's selected make and filter out the cars with the same make to be responsed back and shown in the lower div have to change a few more things inside the ajax.php file

Your data() function must first return an array:
function data(){
$data = array('key'=>'value');
return $data;
}
Then echo or print() the json_encoded array:
$data = data();
echo json_encode($data);

Firstly your you dont need to define a function in your data.php file, since it is included in the ajax.php file, any variable there would be accessible
data.php:
<? php
$data = array(
array(
'make' => 'Ford',
'model' => 'Fiesta'
),
array(
'make' => 'Ford',
'model' => 'Focus'
),
array(
'make' => 'Ford',
'model' => 'Mustang'
),
array(
'make' => 'BMW',
'model' => '320'
),
array(
'make' => 'BMW',
'model' => 'X3'
),
array(
'make' => 'BMW',
'model' => 'X5'
),
);
the ajax.php file reads the data from data.php file filters the array and put the models of the selected make into a new array and echo as json string
ajax.php:
<?php
require_once('data.php');
$filtered_make = [];
$make = $_POST['make'];
foreach ($data as $car) {
if (strtolower($make) == strtolower($car['make'])) $filtered_make[] = $car['model'];
}
echo json_encode($filtered_make);
index.php:
<form id="form">
<label for="make">
Make
<select name="make" id="make">
<option value="" selected="selected">None</option>
<option value="Ford">Ford</option>
<option value="BMW">BMW</option>
</select>
</label>
<input name="submit" value="submit" type="submit" id="submit">
</form>
<div id="results">
</div>
<script src="http://www.izivote.com/res/js/jquery.min.js"></script>
<script src="js/main.js"></script>
onsuccess, in the main.js file, the returned list of models in the json object from ajax.php is put in a list and displayed in the result container
main.js:
$(document).ready(() => {
var run_ajax = function() {
results = $('#results');
var formData = $('#form').serialize();
$.ajax({
type: 'post',
url: 'ajax.php',
data: formData,
dataType: 'json',
beforeSend: function() {
},
success: function(response) {
var resultHTML = "<ul>";
for(var index in response){
resultHTML += "<li>" + response[index] + "</li>";
}
resultHTML += "</ul>";
results.html(resultHTML);
},
});
}
$('#form').on('submit', function(e) {
e.preventDefault();
run_ajax();
});
});
I hope this helps

return the data() as an array.
then encode the $data to json.
<?php
require_once( 'data.php' );
$data = data();
$json_data = json_encode(array());
and ajax:
$.ajax({
type: 'post',
url: 'ajax.php',
data: formData,
dataType: 'json',
beforeSend: function() {
},
success: function( response ) {
console.log(response); // check the return result
$.each(response, function(key, val){
$("#results").append("<div>Make:"+key+" , Model:"+val+"</div>");
});
},
error: function (msg) {
alert("Error: check console");
console.log(msg);
}
});
not tested but hope it helps

how can I use jquery variable in mysql query

At the moment, I am using a $_GET to query mysql and populate a select statement, which works fine. However, I now need to query db using jquery variable and am unable to find a way to use 'depts' instead of '$_GET['dept']'.
I have declared the var global, but realise that you cannot use var in query.
I would be grateful if someone could show me how to amend my code to achieve this. Thanks
php code to populate select
<?php
$conn = mysql_connect("localhost", "root", "");
mysql_select_db("sample", $conn);
$result = mysql_query("SELECT * FROM boxes where department = '{$_GET['dept']}' and status = 1 ORDER BY custref ASC");
?>
<select name="boxdest[]" id="boxdest" size="7" multiple="multiple">
<?php
$i=0;
while($row = mysql_fetch_array($result)) {
?>
<option value="<?php echo $row["custref"];?>"><?php echo $row["custref"];?></option>
<?php
$i++;
}
?>
</select>
jQuery change event code
<script type="text/javascript">
var depts;
$('#dept').on('change', function() {
depts = $('#dept option:selected').html();
if (depts === 'Select a Department') {
$('#deptResult').html('<p>ERROR: You must Select a department to proceed<p/>').css({'color':'red'});
$( "#submit" ).prop( "disabled", true );
return;
}
$('#deptResult').html('<p>SUCCESS: You have selected the following dept: ' + depts + '</p>').css({'color':'black'});
});
</script>

Use jquery ajax() like:
$.ajax({
url : 'process.php',
method : 'get',
async : false,
data : {
variable : value,
// you can pass multiple variables like this and this is available in php like $_REQUEST['variable']
},
success : function(response){
// do what ever you want with the server resposne
}
});
process.php:
$variable = $_REQUEST['variable']; // you can use $variable in mysql query

Can you? Yes
You have to use AJAX. I can recommend crafting simple API for this task. Example using JSON:
api.php
<?php
function output($arr) {
echo json_encode($arr);
exit();
}
if (!isset($_GET['dept'])) {
output([
'success' => false,
"message" => "Department not defined"
]);
}
$mysqli = new mysqli("localhost", "root", "", "test");
if ($mysqli->connect_errno) {
output([
'success' => false,
'dept' => $_GET['dept'],
'message' => "Connect failed: ". $mysqli->connect_error
]);
}
$result = $mysqli->query("SELECT DISTINCT(`department`) FROM `boxes`");
if (!$result) {
output([
'success' => false,
'dept' => $_GET['dept'],
'message' => "Query failed"
]);
}
$departments = [];
while($row = $result->fetch_array(MYSQLI_ASSOC)) {
$departments[] = $row['department'];
}
if (!in_array($_GET['dept'], $departments)) {
output([
'success' => false,
'dept' => $_GET['dept'],
'message' => "Department not present in database"
]);
}
$result = $mysqli->query("SELECT `custref` FROM `boxes` WHERE `department`='". $_GET['dept'] ."' ORDER BY `custref` ASC");
if (!$result) {
output([
'success' => false,
'dept' => $_GET['dept'],
'message' => "Query failed"
]);
}
$custref = [];
while($row = $result->fetch_array(MYSQLI_ASSOC)) {
$custref[] = $row['custref'];
}
output([
'success' => true,
'dept' => $_GET['dept'],
'custref' => $custref
]);
$result->free();
$mysqli->close();
$(function () {
$('select[data-key][data-value]').each(function (i, element) {
var key = $(element).data("key");
var value = $(element).data("value");
var $originSelector = $('[name="'+ key +'"]');
/**
* Get options from element by name
*/
function getOptions () {
var request = {};
request[key] = $originSelector.val();
$.ajax({
url: "./api.php",
method: "GET",
dataType: "json",
data: request
}).done(function(data) {
setOptions(data);
});
}
/**
* Remove old options
*/
function clearOptions () {
$(element).find('option').remove();
}
/**
* Put new options in input
*/
function setOptions (data) {
if (data['success'] && data[value] !== undefined) {
clearOptions();
$.each(data[value], function (i, option) {
$(element).append('<option value="'+ option +'">'+ option +'</option>');
});
}
}
getOptions();
$originSelector.on("change", function () {
getOptions();
});
});
});
<select name="dept">
<option value="accounting">Accounting</option>
<option value="it">Information technology</option>
</select>
<select name="boxdest[]" id="boxdest" size="7" multiple="multiple" data-key="dept" data-value="custref"></select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

CJuiAutoComplete onSelect not working - YII

New to YII. I have to load a page with AJAX call on selection from CJuiAutoComplete Field.
<?php
echo CHtml::label(Yii::t('location', 'PLZ'), 'GeoData_plz');
?>
</td><td>
<?php
$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
'name' => 'GeoData[plz]',
'source' => 'js:function(request, response) {getAutoCompleteData("plz", response);}',
'options' => array(
'minLength' => '0',
),
'htmlOptions' => array(
'size' => 8,
'maxlength' => 15,
'class'=>'addrChange'
),
'value' => $model->geo_data->plz));
?>
I tried adding onSelect of different plz in htmlOptions (to act as submit buttion) but its not working, Here I just want to submit plz in database on select of different plz below is the code.
echo CHtml::label(Yii::t('location', 'PLZ'), 'GeoData_plz'); ?></td><td><?php $this->widget('zii.widgets.jui.CJuiAutoComplete', array(
'id' => 'GeoData_plz',
'name' => 'GeoData[plz]',
'source' => 'js:function(request, response) {
getAutoCompleteData("plz", response);
}',
'options' => array(
'minLength' => '0',
//'select' => 'js:function(event, ui){ alert(ui.item.value) }',
),
'htmlOptions' => array(
'size' => 8,
'maxlength' => 15,
'class'=>'addrChange',
'onSelect' => 'CHtml::ajax({
url: "'.$this->createUrl('location/getAddressTabContent').'",
dataType: "json",
data: {
loc_id: ' . $model->id . '
},
success: function(data) {
$("#addressBricks").html(data.brick_table);
}
})'
),
'value' => $model->geo_data->plz
));
Thanks for the reply, But here i just want to submit data on select I used the code given by you but its not working
$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
'model'=>$model,
'attribute'=>'GeoData[plz]',
'source'=>'js: function(request, response) {
getAutoCompleteData("plz", response);
$.ajax({
url: "'.$this->createUrl('location/getAddressTabContent').'",
dataType: "json",
data: {
loc_id: ' . $model->id . '
},
success: function (data) {
$("#addressBricks").html(data.brick_table);
}
})
}',
'options'=>array(
'delay'=>300,
'minLength'=>0,
'select'=>'js:function(event, ui) {
$.ajax({
type:"POST",
url: "' . $this->createUrl('location/getAddressTabContent'') . '",
data: {selected: ui.item.value},
success:function(data) {$("#addressBricks").html(data.brick_table);}
});}'
),
'htmlOptions' => array(
'size' => 8,
'maxlength' => 15,
'class'=>'addrChange',
'value' => $model->geo_data->plz,
'id' => 'GeoData_plz',
),
));

It's in options array, not in htmlOptions:
'options'=>array(
.....
'select'=>'js:function(event, ui) {
//your ajax request here
//use $.ajax()
//your selected item = ui.item.id
}
Hope this will help.

I have edited your widget. Just use this widget to get it working.
$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
'model'=>$model,
'attribute'=>'GeoData[plz]',
'source'=>'js: function(request, response) {
$.ajax({
url: "'.$this->createUrl('location/getAddressTabContent').'",
dataType: "json",
data: {
loc_id: ' . $model->id . '
},
success: function (data) {
$("#addressBricks").html(data.brick_table);
}
})
}',
'options'=>array(
'delay'=>300,
'minLength'=>1,
),
'htmlOptions' => array(
'size' => 8,
'maxlength' => 15,
'class'=>'addrChange',
'value' => $model->geo_data->plz,
'id' => 'GeoData_plz',
),
));