# Moving from Sage 9 to Sage 10: ReferenceError: ajaxArticle is not defined

**URL:** https://discourse.roots.io/t/moving-from-sage-9-to-sage-10-referenceerror-ajaxarticle-is-not-defined/27727
**Category:** sage
**Tags:** sage10
**Created:** 2024-07-04T09:50:49Z
**Posts:** 2

## Post 1 by @Tetrahedrax — 2024-07-04T09:50:49Z

Hello!

I’m moving a theme from Sage 9 to Sage 10. All is fun and well until I got to the Ajax part. This is to my knowledge the final problem before completion, and I’m losing my hair as we speak!

The error from the console log:

```
article.9c7e8e.js:1 Uncaught ReferenceError: ajaxArticle is not defined
    at article.9c7e8e.js:1:461
    at HTMLAnchorElement.<anonymous> (article.9c7e8e.js:1:821)
    at HTMLAnchorElement.dispatch (jquery.js?ver=3.7.1:5145:27)
    at elemData.handle (jquery.js?ver=3.7.1:4949:28)
```

ajax.php:

```
namespace App;

class Ajax
{
  public function __construct()
  {
    add_action('wp_ajax_get_articles', [$this, 'getArticles']);
    add_action('wp_ajax_nopriv_get_articles', [$this, 'getArticles']);
  }

   public function getArticles()
  {
// Code working on Sage 9 here!
  }
}
```

setup.php:

```
add_action('wp_enqueue_scripts', function () {
    bundle('main')->enqueue();

    if (is_post_type_archive('article')) {
        bundle('article')->enqueue();
        wp_localize_script('sage/article.js', 'ajaxArticle', ['ajaxURL' => admin_url('admin-ajax.php')]);
    }
```

article.js:

```
let currentPage = 1
let maxTotalPages
const adContainer = []
jQuery(document).ready(function ($) {

  maxTotalPages = $('.article-container').data('max_num_pages')
  adContainer.push({
    id: $('.ad-container').data('id'),
    maxViews: Number($('.ad-container').data('max_num_views')),
    currentViews: 1,
  })

  $('.load-more').on('click', (e) => {
    e.preventDefault()
    loadArticles()
  })

  function loadArticles() {
    const params = {
      page: currentPage + 1,
      ads: adContainer,
    }
    $.ajax({
      url: ajaxArticle.ajaxURL, // eslint-disable-line no-undef
      type: 'POST',
      data: {
        action: 'get_articles',
        params: JSON.stringify(params),
      },
      success: (response) => {
        currentPage++

        // Logic for ads
        if (response.currentAd) {
          let find = adContainer.find(x => x.id === response.currentAd.ID)
          if (find) {
            find.currentViews++
          } else {
            adContainer.push({
              id: response.currentAd.ID,
              maxViews: Number(response.currentAd.max_views),
              currentViews: 1,
            })
          }
        }

        $('.article-container').append(response.html)

        if (currentPage === maxTotalPages) {
          $('.load-more').remove()
        }
      },
      error: (error) => {
        console.log(error)
      },
    })
  }
})
```

---

## Post 2 by @Tetrahedrax — 2024-07-04T11:20:21Z

Ok so after much hair tearing, I figured it out. You can’t bundle it the way I did in the setup.php. You have to do it like this:

`bundle('article')->localize('ajaxArticle', ['ajaxURL' => admin_url('admin-ajax.php')]);`

The next error I encountered immediately afterwards was due to ajax not being added to the collect in functions.php. Same thing as the guy here:

> [@Sage 10 Ajax Bad Request](https://discourse.roots.io/t/sage-10-ajax-bad-request/25747):
>
> Hello, I am setting up ajax with my Sage 10 project. I keep getting a 400 Bad Request error. I have done this on many projects before but never with sage 10. I’ve searched the forum and many other resources and can’t seem to figure out what my problem is. My files are as follows: app/setup.php - localizing ajax\_url add\_action('wp\_enqueue\_scripts', function () { global $post; bundle('app')-\>enqueue()-\>localize('wcu', [ 'ajax\_url' =\> admin\_url('admin-ajax.php'), 'nonce…

Basically, you have to change collect to this:  
`collect(['setup', 'filters', 'ajax'])`

Hopefully this will help the next dummy trying to port Sage 9 to Sage 10!