Zendesk Button Not Updating Correctly on Topic Change Without Page Refresh

Product Support

AI-generated summary

The user abinash.bhatta reports an issue with the Zendesk plugin’s button not updating correctly when navigating between topics without a page refresh. The button incorrectly remains as “View on Zendesk” even when no ticket exists. MihirR suggests the problem may stem from the frontend framework (likely Ember.js) not detecting route changes, proposing a solution using a routeDidChange listener to trigger a re-render. NateDhaliwal notes the issue may require adjusting the setupComponent() logic and suggests using api.onPageChange() to properly detect topic changes and refresh the button state.

1

Hi, I’m experiencing an issue with the Zendesk plugin’s “View on Zendesk” button behavior. When a ticket already exists in Zendesk, the button displays as “View on Zendesk” correctly. However, if I navigate to a different topic that doesn’t have a corresponding Zendesk ticket, the button still initially shows “View on Zendesk” instead of “Create Zendesk Ticket” Once I refresh the page, the button updates to show the correct “Create Zendesk Ticket” option.

The image shows a screenshot of a website with a red arrow pointing to the "View on Zendesk" button. (Captioned by AI)
The image shows a screenshot of a website with a red arrow pointing to the "View on Zendesk" button. (Captioned by AI)995×379 21.8 KB

It seems that the button component isn’t re-rendering upon navigation to a new topic. I believe a solution could involve triggering a re-render of this component whenever there is a page change.

Could anyone advise on how best to approach this, or if there’s a way to force the component to update correctly upon navigation? Any insights or suggestions would be appreciated.

2

Hi there,

I hope you’re doing well! I wanted to follow up and check if there’s been any update regarding this issue. Your insights or guidance would be greatly appreciated.

Thank you in advance!

3

It may because it’s not detecting the page change. This is likely due to how the frontend framework (probably Ember.js, since Discourse uses it) handles component rendering during navigation.

You can add a listener for route changes, something similar to this:


export default Component.extend({
  router: service(),

  didInsertElement() {
    this._super(...arguments);

    this.router.on('routeDidChange', () => {
      this.refreshZendeskButton();
    });
  },

  willDestroyElement() {
    this._super(...arguments);

    this.router.off('routeDidChange', this.refreshZendeskButton);
  },
});
4

That may have to be amended since it uses setupComponent():

The check if there is a valid zendesk ticket uses zendesk_id. Maybe it needs an api.onPageChange()?