Issues with ajax when using AppGini 5.81

If you're a new user of AppGini, feel free to ask general usage questions, or look for answers here.
Post Reply
labib saleh
Posts: 23
Joined: 2014-12-29 21:46

Issues with ajax when using AppGini 5.81

Post by labib saleh » 2020-02-06 00:36

I used to have the following code working with version 5.51 but it stopped when switched to 5.81, can't figure why. Using northwind application I have two hooks files:
ajax-product-price.php

Code: Select all

<?php
	$currDir = dirname(__FILE__) . '/..';
	include("$currDir/defaultLang.php");
	include("$currDir/language.php");
	include("$currDir/lib.php");
	
	/* grant access to all users who have acess to the order_details table */
	$od_from = get_sql_from('order_details');
	if(!$od_from){
		header('HTTP/1.0 401 Unauthorized');
		exit;
	}
	
	$pid = intval($_REQUEST['pid']);
	
	$data['UnitPrice'] = sqlValue("select UnitPrice from products where ProductID='{$pid}'");
	$data['Quantity'] = sqlValue("select QuantityPerUnit from products where ProductID='{$pid}'");
	@header('Content-Type: application/json'); 
	echo json_encode($data);
?>
order_details-dv.js

Code: Select all

$j(function(){
	/* on changing product, retrieve unit price from products table and populate unit price field */
	$j('#ProductID-container').on('change', function(){
		var pid = $j('#ProductID').val();
		
		if(pid == '{empty_value}'){
			$j('#UnitPrice').val('');
		}else{
			$j.ajax({
				url: 'hooks/ajax-product-price.php',
				data: { pid: pid },
				success: function(data){
					$j('#UnitPrice').val(data.UnitPrice);
					$j('#Quantity').val(data.Quantity);
				}
			});
		}
	});
})
It's supposed to return two values for Orders Items table, that is you select the first item (Alice Mutton) the function should populate '39.00' for unit price and '20 - 1 kg tins' for quantity based on northwind's database, and that works perfectly when the application is posted using version 5.51. But it doesn't pull these fields right when the application is posted using version 5.81, instead it pulls the fields of the item that was selected before (if any)

Any ideas how to fix this please?

User avatar
D Oliveira
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

Re: Issues with ajax when using AppGini 5.81

Post by D Oliveira » 2020-02-06 21:06

labib saleh wrote:
2020-02-06 00:36
I used to have the following code working with version 5.51 but it stopped when switched to 5.81, can't figure why. Using northwind application I have two hooks files:
ajax-product-price.php

Code: Select all

<?php
	$currDir = dirname(__FILE__) . '/..';
	include("$currDir/defaultLang.php");
	include("$currDir/language.php");
	include("$currDir/lib.php");
	
	/* grant access to all users who have acess to the order_details table */
	$od_from = get_sql_from('order_details');
	if(!$od_from){
		header('HTTP/1.0 401 Unauthorized');
		exit;
	}
	
	$pid = intval($_REQUEST['pid']);
	
	$data['UnitPrice'] = sqlValue("select UnitPrice from products where ProductID='{$pid}'");
	$data['Quantity'] = sqlValue("select QuantityPerUnit from products where ProductID='{$pid}'");
	@header('Content-Type: application/json'); 
	echo json_encode($data);
?>
order_details-dv.js

Code: Select all

$j(function(){
	/* on changing product, retrieve unit price from products table and populate unit price field */
	$j('#ProductID-container').on('change', function(){
		var pid = $j('#ProductID').val();
		
		if(pid == '{empty_value}'){
			$j('#UnitPrice').val('');
		}else{
			$j.ajax({
				url: 'hooks/ajax-product-price.php',
				data: { pid: pid },
				success: function(data){
					$j('#UnitPrice').val(data.UnitPrice);
					$j('#Quantity').val(data.Quantity);
				}
			});
		}
	});
})
It's supposed to return two values for Orders Items table, that is you select the first item (Alice Mutton) the function should populate '39.00' for unit price and '20 - 1 kg tins' for quantity based on northwind's database, and that works perfectly when the application is posted using version 5.51. But it doesn't pull these fields right when the application is posted using version 5.81, instead it pulls the fields of the item that was selected before (if any)

Any ideas how to fix this please?

use this instead:

Code: Select all


$pid = makesafe($_REQUEST['pid']);


	$con = mysqli_connect($dbServer, $dbUsername, $dbPassword);
	mysqli_select_db($con,$dbDatabase);

	$query = mysqli_query($con,"select * from tablename where ID= '{$pid}'");
	$tabledata = mysqli_fetch_array($query);

    echo json_encode($tabledata);


labib saleh
Posts: 23
Joined: 2014-12-29 21:46

Re: Issues with ajax when using AppGini 5.81

Post by labib saleh » 2020-02-07 01:39

Thanks D Oliveira.
I've tried to implement the code instead of what I have in "ajax-product-price.php" but it returns this now ([object Object]), don't have much of experience in PHP programming so maybe I implemented the code wrong?

not getting why the same code works for 5.51 and not for 5.81 :(

User avatar
D Oliveira
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

Re: Issues with ajax when using AppGini 5.81

Post by D Oliveira » 2020-02-07 17:23

labib saleh wrote:
2020-02-07 01:39
Thanks D Oliveira.
I've tried to implement the code instead of what I have in "ajax-product-price.php" but it returns this now ([object Object]), don't have much of experience in PHP programming so maybe I implemented the code wrong?

not getting why the same code works for 5.51 and not for 5.81 :(

in your ajax success function that starts here:

Code: Select all

success: function(data){

add this:

Code: Select all


if (data) {

var tbl = jQuery.parseJSON(data);

	$j('#UnitPrice').val(tbl.UnitPrice);
						
}


labib saleh
Posts: 23
Joined: 2014-12-29 21:46

Re: Issues with ajax when using AppGini 5.81

Post by labib saleh » 2020-02-08 05:16

Thanks Oliveira. It got me this error

Code: Select all

Uncaught SyntaxError: Unexpected token o in JSON at position 1
    at JSON.parse (<anonymous>)
    at Function.n.parseJSON (jquery-1.12.4.min.js:4)
    at Object.success (order_details-dv.js:16)
    at i (jquery-1.12.4.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-1.12.4.min.js:2)
    at y (jquery-1.12.4.min.js:4)
    at XMLHttpRequest.c (jquery-1.12.4.min.js:4)
Do I need to change something for the code in ajax-product-price.php?

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Issues with ajax when using AppGini 5.81

Post by jsetzer » 2020-02-08 06:04

console.log(data);

Watch the console output of your browser's developer tools.

I guess the server returns an error instead of a valid JSON string. Maybe there is something wrong with SQL command.

Regards,
Jan
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

labib saleh
Posts: 23
Joined: 2014-12-29 21:46

Re: Issues with ajax when using AppGini 5.81

Post by labib saleh » 2020-02-08 07:18

Thanks Jan.
I added console.log(data); after success and checked the console, there were no errors, but ajax returned wrong values for (Aniseed Syrup) as shown in the screenshot below:
capture.png
capture.png (138.17 KiB) Viewed 17243 times

so I got:
UnitPrice: "39.00" and Quantity: "20 - 1 kg tins"
while (Aniseed Syrup) has UnitPrice: "10.00" and Quantity: "12 - 550 ml bottles", see screenshot
capture2.png
capture2.png (34.17 KiB) Viewed 17243 times


the weird thing that this same code in my first post works fine in version 5.51 but not when I upgraded to 5.81 :|

User avatar
D Oliveira
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

Re: Issues with ajax when using AppGini 5.81

Post by D Oliveira » 2020-02-08 17:59

that might be a delay for the on change function, try replacing

Code: Select all

$j('#ProductID-container').on('change', function(){
for

Code: Select all

$j('#ProductID-container').on('click', function(){
labib saleh wrote:
2020-02-08 07:18
Thanks Jan.
I added console.log(data); after success and checked the console, there were no errors, but ajax returned wrong values for (Aniseed Syrup) as shown in the screenshot below:
capture.png


so I got:
UnitPrice: "39.00" and Quantity: "20 - 1 kg tins"
while (Aniseed Syrup) has UnitPrice: "10.00" and Quantity: "12 - 550 ml bottles", see screenshot
capture2.png



the weird thing that this same code in my first post works fine in version 5.51 but not when I upgraded to 5.81 :|

labib saleh
Posts: 23
Joined: 2014-12-29 21:46

Re: Issues with ajax when using AppGini 5.81

Post by labib saleh » 2020-02-08 18:27

Thanks D Oliveira, it did work :shock:

I've been stuck with this issue since the end of December, never thought the solution would just be changing the method to 'click'!

Thanks again for your help

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Issues with ajax when using AppGini 5.81

Post by jsetzer » 2020-02-08 18:38

D Oliveira wrote:
2020-02-08 17:59
that might be a delay for the on change function [...]
I guess this will not be the reason.

You are right, that we cannot use jQuery's $j(selector).on("change", ...)-handler for AppGini lookup fields, because lookups are being created dynamically AFTER document ready. There are couple of forum posts here complaining about this and asking for help on reacting to lookup changes.

BUT the .onchange-handler, I have suggested, is part of our AppGini Helper JavaScript Library. This has been implemented differently and it should work on lookups as I have shown above and as labib saleh has confirmed. You can see the result in the console output of his response.

@labib saleh:
Unfortulately we cannot see the value of the selected lookup item. You should add some console.log(...) to ensure that lookup changes can be detected. As soon as we know, you can react to the lookup change AND can get the correct lookup-value.id, in the next step, you can do whatever you need using AJAX for example to fetch fresh data from a serverside PHP script. But first, please ensure the .onChange-handler works and you get the correct id. Then you can check your AJAX call and your serverside SQL for the right results.

Hope this helps!
Best,
Jan
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
D Oliveira
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

Re: Issues with ajax when using AppGini 5.81

Post by D Oliveira » 2020-02-08 19:19

jsetzer wrote:
2020-02-08 18:38
D Oliveira wrote:
2020-02-08 17:59
that might be a delay for the on change function [...]
I guess this will not be the reason.

You are right, that we cannot use jQuery's $j(selector).on("change", ...)-handler for AppGini lookup fields, because lookups are being created dynamically AFTER document ready. There are couple of forum posts here complaining about this and asking for help on reacting to lookup changes.

BUT the .onchange-handler, I have suggested, is part of our AppGini Helper JavaScript Library. This has been implemented differently and it should work on lookups as I have shown above and as labib saleh has confirmed. You can see the result in the console output of his response.

@labib saleh:
Unfortulately we cannot see the value of the selected lookup item. You should add some console.log(...) to ensure that lookup changes can be detected. As soon as we know, you can react to the lookup change AND can get the correct lookup-value.id, in the next step, you can do whatever you need using AJAX for example to fetch fresh data from a serverside PHP script. But first, please ensure the .onChange-handler works and you get the correct id. Then you can check your AJAX call and your serverside SQL for the right results.

Hope this helps!
Best,
Jan
that is indeed true, maybe a workaround could be reloading the dropdown and getting the updated value again, something like..

Code: Select all


// after success function

lookup_field_reload();

var second_ajax = AppGini.current_lookup_field.value;

// run a second ajax function

// on success

$j('#toreceivevalue').val(data);



pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: Issues with ajax when using AppGini 5.81

Post by pbottcher » 2020-02-08 21:03

Hi,

even so you found a solution, I think it could be done more easily. Even without the famous Helper Library.
Maybe you can try this:
Keep your original functions and add the event to the change.

$j('#ProductID-container').on('change', function(e){
var pid = e.added.id;
like:

Code: Select all

$j(function(){
	/* on changing product, retrieve unit price from products table and populate unit price field */
	$j('#ProductID-container').on('change', function([b]e[/b]){
		var pid = [b]e.added.id[/b];
		
		if(pid == '{empty_value}'){
			$j('#UnitPrice').val('');
		}else{
			$j.ajax({
				url: 'hooks/ajax-product-price.php',
				data: { pid: pid },
				success: function(data){
					$j('#UnitPrice').val(data.UnitPrice);
					$j('#Quantity').val(data.Quantity);
				}
			});
		}
	});
})
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

xbox2007
Veteran Member
Posts: 129
Joined: 2016-12-16 16:49

Re: Issues with ajax when using AppGini 5.81

Post by xbox2007 » 2022-04-04 09:29

thanks a lot

Post Reply