How to: Use AppGini textfield search in special page?

If you're a new user of AppGini, feel free to ask general usage questions, or look for answers here.
Post Reply
User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

How to: Use AppGini textfield search in special page?

Post by onoehring » 2019-09-21 08:04

Hi,

I have created a new page from scratch to replicate a "paperview". The page is integrated almost perfectly into the application. Now I am wondering:
How can I use the AppGini functionality to
a) search (autocomplete) a textfield and
b) search (autocomplete) a lookup / dropdown field

I am talking about these two:
e101c.png
e101c.png (9.76 KiB) Viewed 2230 times
Olaf

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: How to: Use AppGini textfield search in special page?

Post by onoehring » 2019-09-24 08:54

Hi,

I am trying to build the autocomplete myself now.
I have used this code in a test file (plain, simpl php/html) - and it works! But, unfortunately it does not work in the file with the appgini layout.
As I am not good in jquery/ajax, I think it has something to do with the $.... where in appgini files a $j is used.
Can anyone give me a hand?
Again: the file /hooks/containercodes.php does return the correct values when used from a different test-html/php.

Code: Select all

<div id="wahl_ort_bereich" class="hidden-print">	
	<form action="/test.php" method="get">	
		<div class="PlatzSucheSettings">
			<div class="sucheContainerCode" title="Sie k&ouml;nnen nach einem Containercode suchen ODER direkt eine Ort-Bereich Kombination w&auml;hlen.">
				<input id="containercode" name="containercode" class="form-control typeahead" placeholder="Container Code" onfocus="this.value=''" maxlength="11" size="11" type="text" value="">				
			</div>
<script>
    $(document).ready(function () {
        $('#containercode').typeahead({
            source: function (query, result) {
                $j.ajax({
                    url: "/hooks/containercodes.php",
					data: 'query=' + query,            
                    dataType: "json",
                    type: "POST",
                    success: function (data) {
						result($.map(data, function (item) {
							return item;
                        }));
                    }
                });
            }
        });
    });
</script>	
Olaf

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

Re: How to: Use AppGini textfield search in special page?

Post by pbottcher » 2019-09-24 09:42

Hi,
just use $j instead of only $ for jquery, as AppGini explicitly required this.
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.


User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: How to: Use AppGini textfield search in special page?

Post by onoehring » 2019-09-24 11:55

Hi pbötcher,

very strange - This (in my test file) does NOT work. Note: I added a j to $ and

Code: Select all

<script src="/resources/jquery/js/jquery-1.12.4.min.js"></script>
is included before. Without the j (so: $ only) it does work:

Code: Select all

<body>
	<div id="wahl_ort_bereich">
	<form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="get">	
	<div class="bgcolor">
		<label class="demo-label">Search Country:</label><br/> <input type="text" name="txtCountry" onfocus="this.value=''" id="txtCountry" class="typeahead"/>
	</div>
	</form>
	</div>
</body>
<?php $currPath = pathinfo($url); ?>
<script>
    $j(document).ready(function () {
        $j('#txtCountry').typeahead({
            source: function (query, result) {
                $j.ajax({
                    url: "<?php echo $currPath['dirname'];?>/hooks/containercodes.php",
					data: 'query=' + query,            
                    dataType: "json",
                    type: "POST",
					maxRows: 15,
					deferRequestBy: 100, //miliseconds										
                    success: function (data) {
						result($.map(data, function (item) {
							return item;
                        }));
                    }
                });
            }
        });
    });
</script>
</html>
The ajax file containercodes.php looks like this (and works, see first animation below)

Code: Select all

<?php		
//START AppGini Defaults
	$currDir = dirname(__FILE__);
	require("$currDir/../lib.php");

	/* grant access to all users who have access to the orders table */
	$user_can_access = get_sql_from('tblContainer');
	if(!$user_can_access) exit(error_message('Access denied!', false));
//END AppGini Defaults	
	
	$keyword = strval($_POST['query']);
	$keyword_safe = makeSafe($keyword);
	$search_param = "%{$keyword_safe}%";

	$result = sql("SELECT ContainerCode FROM tblContainer WHERE ContainerCode LIKE '".$search_param."'", $eo);	
	if ($result->num_rows > 0) {
		while($row = $result->fetch_assoc()) {
		$ContainerCodes[] = $row["ContainerCode"];
		}
		echo json_encode($ContainerCodes);
	}
?>
This is the result which should be achived in the real file - but only works in the test-file:
test_1.gif
test_1.gif (138.35 KiB) Viewed 2178 times
This is the result in the real fiel (with the same

Code: Select all

  url: "<?php echo $currPath['dirname'];?>/hooks/containercodes.php",
) as source:
real_1.gif
real_1.gif (174.88 KiB) Viewed 2178 times
In my "real" file, when I chance $ to $j no changes: From it does not work to it still does not work.

Olaf

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: How to: Use AppGini textfield search in special page?

Post by onoehring » 2019-09-24 12:06

Hi,

my bad. I had switched of errors in console view.
This piece of code works in my "real" file as well:

Code: Select all

<script>
    $j(function() {
        $j('#containercode').typeahead({
            source: function (query, result) {
                $j.ajax({
                    url: "<?php echo $currPath['dirname'];?>/hooks/containercodes.php",
					data: 'query=' + query,            
                    dataType: "json",
                    type: "POST",
                    success: function (data) {
						result($j.map(data, function (item) {
							return item;
                        }));
                    }
                });
            }
        });
    });
</script>
Looks like this:
real_2.gif
real_2.gif (188.8 KiB) Viewed 2178 times
Thanks a lot already
Olaf

Post Reply