How to implement a small AJAX-solution with db-request

[gerald]

In my frontend I would like to implement a small AJAX-solution, but it does´nt work. For example:

template/js/ajax.js: contains jquery-ajax-snippet with click-function like this: $.post('ajax.inc', function(e) {});
template/ajax.inc: contains db-query with HTML-output
template/home.php: contains div-element for the ajax-response, e.g. <div id='result'>...ajax-response...</div>

It seems, PW does´nt allow database-requests via AJAX (jquery). I know the post from Ryan "How to work with AJAX driven content in ProcessWire". But this solution requires a completely new template-concept. I only need a simple solution for a small ajax-db-request.

Thanks to all

[maxf5]

You have to make the ajax call with the url .. not the template file.
Make sure you have created a page with that template.

$.post('ajax.inc', function(e) {});

$.post('/path-to-ajax-page', function(e) {});

Example

Ajax Template

from different db:

$mydb = new Database('host', 'username', 'password', 'db');
$result = $mydb->query("SELECT * FROM example");

from pw db:

$query = $database->prepare("SELECT id, name FROM pages LIMIT 10");
$result = $database->execute($query);

Your js

            $.ajax({
                type: "GET",
                url: "/path-to-ajax-template",
                success : function(data){
                    var markup = $(data).find('#result');
                    $('#result').html(markup);
                }
            });

 

[gerald]

Thanks, maxf5,

hmm, I feel like a bloody beginner, but it just does´nt work. Here my _main.php:

    <div id="result">Ajax</div>

    <script type="text/javascript">
            $('#result').click(function () {
                var ajaxUrl = "<?= urls()->templates ?>ajax.inc";
                $.ajax({
                    type: "GET",
                    url: ajaxUrl,
                    success : function(data){
                        var markup = $(data).find('#result');
                        $('#result').html(markup);
                    }
                });
            });
    </script>

ajax.inc only with a simple string for testing:

<?php namespace ProcessWire; ?>
OK, Ajax works!

 

[Sergio]

<div id="result">Ajax</div>

    <script type="text/javascript">
            $('#result').click(function () {
                var ajaxUrl = "https://example.com/ajax-page-name"; //not template path
                $.ajax({
                    type: "GET",
                    url: ajaxUrl,
                    success : function(data){
                        var markup = $(data).find('#result');
                        $('#result').html(markup);
                    }
                });
            });
    </script>

You need to call the URL of the page itself, not its template path. ?

[gerald]

perfect, ? thanks!!

[Autofahrn]

@gerald: In case its still relevant, you'll find a fresh, working example here: