AJAX hello world newbie question

[c999c0]

Just recently started using Winter CMS and I can see the Ajax documentation:
https://wintercms.com/docs/v1.2/docs/snowboard/introduction

I'm just wondering if anyone knows of an Ajax "hello world" type example using snowboard? I'm not new to web development but are new to Winter CMS.

Thanks.

[bennothommo]

Hi @c999c0 - it might be easier to demonstrate a "Hello world" example on a specific thing that you're trying to achieve, but at its most simple implementation I can think of, you can try this (I am going to assume you'll be using the Backend on a newly-installed instance of Winter CMS)

Create a Page in the CMS section

• Create a new page, calling it whatever you would like and ensure that Layout is set to default - this will use the included default layout in the Demo theme which already has Snowboard included. Make sure to note down the URL of the page on the top right - you'll need this later.
• In the Markup section, add a simple link that uses the data attributes framework of Snowboard and a DIV that will hold the result. (The surrounding container DIV is just to make it centered and not look out of place)

<div class="container">
    <a href="#" data-request="onMyAjaxRequest">Do an AJAX request</a>
    
    <div id="result"></div>
</div>

• With the code above, on clicking the link, an AJAX request will be executed with the event name onMyAjaxRequest. To set up the actual handler of that event, click on the Code section, and add the handler like so:

function onMyAjaxRequest() {
    return [
        '#result' => 'Hello world!',
    ];
}

• This event handler simply states that we want the result DIV to say "Hello world!", but you can do anything you need on the server side within this handler.
• Save the page.

Give it a test

• Go to the URL of the page that you stored earlier. You should see just the link in the content.
• Click the link - it will call the AJAX handler and Hello world! should appear directly underneath the link in the result DIV you set up.

[c999c0]

Brilliant, thanks, exactly what I needed.