when I change language ,it does not work, if this source should be added languageChange method?

[q631599119]

Bug description

Screenshots/recordings

No response

Superset version

master / latest-dev

Python version

3.10

Node version

18 or greater

Browser

Chrome

Additional context

No response

Checklist

• I have searched Superset docs and Slack and didn't find a solution to my problem.
• I have searched the GitHub issue tracker and didn't find a similar bug report.
• I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

[dosubot[bot]]

I found a similar unsolved discussion titled "why I can not change my language??" which might be related to the issue you're experiencing ^[1].

Regarding your question about the LanguagePicker component, it does have props intended to handle language changes, specifically locale and languages. These props are used to render the language selection menu and handle language changes ^[2]. However, it seems there might be a need for a method or function to handle the actual language change event, which is not explicitly mentioned in the available information.

You might want to check if the component is correctly integrated with the rest of the application to ensure that language changes are properly handled. Additionally, verifying if there are any Redux actions or context providers managing the application's current language state could be helpful, although I couldn't find specific details on that in the available data.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[q631599119]

@dosu It seems that this source does not work.
export default function setupApp() {
$(document).ready(function () {
$(':checkbox[data-checkbox-api-prefix]').change(function (
this: HTMLElement,
) {
const $this = $(this);
const prefix = $this.data('checkbox-api-prefix');
const id = $this.attr('id');
toggleCheckbox(prefix, #${id});
});

// for language picker dropdown
$('#language-picker a').click(function (
  ev: JQuery.ClickEvent<
    HTMLLinkElement,
    null,
    HTMLLinkElement,
    HTMLLinkElement
  >,
) {
  console.log('====================================');
  console.log(ev);
  console.log('====================================');
  ev.preventDefault();
  SupersetClient.get({
    url: ev.currentTarget.href,
    parseMethod: null,
  }).then(() => {
    window.location.reload();
  });
});

});

// A set of hacks to allow apps to run within a FAB template
// this allows for the server side generated menus to function
window.$ = $;
window.jQuery = $;
require('bootstrap');

// set up app wide custom error messages
setupErrorMessages();
}

[dosubot[bot]]

The setupApp function you provided includes a jQuery click event handler for the #language-picker a elements. This handler is intended to manage language changes by preventing the default link behavior, making a GET request to the link's URL using SupersetClient, and then reloading the page upon successful completion of the request. This setup should facilitate language changes if everything is configured correctly.

If the language change is not working, consider checking the following:

1. Ensure URLs are Correct: Verify that the URLs in the href attributes of the #language-picker a elements are correct and lead to the appropriate endpoints for changing the language.

2. SupersetClient Configuration: Ensure that SupersetClient is properly configured and able to make requests to your server. Check for any network errors or issues in the browser's developer console.

3. Event Binding: Confirm that the setupApp function is being called and that the event handlers are properly bound. You can add console logs or breakpoints to verify this.

4. Server Response: Ensure that the server correctly handles the language change request and that the response triggers the necessary changes on the client side.

5. Check for Errors: Look for any errors in the console that might indicate why the language change is not taking effect.

If these aspects are correctly set up and the issue persists, there might be other parts of the application affecting the language change functionality.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[q631599119]

@dosu

export default function LanguagePicker(props: LanguagePickerProps) {
const { locale, languages, ...rest } = props;
return (
<SubMenu
aria-label="Languages"
title={

<StyledFlag className={flag ${languages[locale].flag}} />

}
icon={<Icons.TriangleDown />}
{...rest}
>
{Object.keys(languages).map(langKey => (
<Menu.Item
key={langKey}
style={{ whiteSpace: 'normal', height: 'auto' }}
>

<i className={flag ${languages[langKey].flag}} />
{languages[langKey].name}

</Menu.Item>
))}

);
}

export default function setupApp() {
$(document).ready(function () {
$(':checkbox[data-checkbox-api-prefix]').change(function (
this: HTMLElement,
) {
const $this = $(this);
const prefix = $this.data('checkbox-api-prefix');
const id = $this.attr('id');
toggleCheckbox(prefix, #${id});
});

// for language picker dropdown
$('#language-picker a').click(function (
  ev: JQuery.ClickEvent<
    HTMLLinkElement,
    null,
    HTMLLinkElement,
    HTMLLinkElement
  >,
) {
  console.log('====================================');
  console.log(ev);
  console.log('====================================');
  ev.preventDefault();
  SupersetClient.get({
    url: ev.currentTarget.href,
    parseMethod: null,
  }).then(() => {
    window.location.reload();
  });
});

});

触发不了$('#language-picker a').click(function ( 这个函数 怎么回事

[dosubot[bot]]

I found a similar open issue regarding the language change not working. The suggested solution involves ensuring that the $('#language-picker a').click(function (...) event handler is correctly set up. Here are some steps to address the issue:

1. Element Existence: Make sure that the #language-picker element and its child <a> elements exist in the DOM when the setupApp function is executed. If these elements are added dynamically after the document is ready, the event handler won't be bound to them.

2. Correct Selector: Verify that the selector #language-picker a matches the elements you intend to target. Double-check the HTML structure to ensure the IDs and classes are correct.

3. Event Delegation: If the elements are added dynamically, use event delegation by binding the click event to a static parent element that exists when the page loads. For example:

   $(document).on('click', '#language-picker a', function(ev) {
     ev.preventDefault();
     SupersetClient.get({
       url: ev.currentTarget.href,
       parseMethod: null,
     }).then(() => {
       window.location.reload();
     });
   });

4. JavaScript Errors: Check the browser's console for any JavaScript errors that might prevent the script from executing correctly.

5. jQuery Version: Ensure that the correct version of jQuery is loaded and that it is compatible with your code.

6. Conflicting Scripts: Look for any other scripts that might interfere with the event binding, such as other libraries or custom scripts that manipulate the same elements.

By addressing these points, you should be able to resolve the issue with the click event handler not being triggered ^[1].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[dosubot[bot]]

The issue with the $('#language-picker a').click(function (...) event handler not being triggered could be due to several reasons. Here are some things to check:

1. Element Existence: Ensure that the #language-picker element and its child <a> elements exist in the DOM when the setupApp function is executed. If these elements are dynamically added to the DOM after the document is ready, the event handler won't be bound to them.

2. Correct Selector: Verify that the selector #language-picker a correctly matches the elements you intend to target. Double-check the HTML structure to ensure the IDs and classes are correct.

3. Event Delegation: If the elements are added dynamically, consider using event delegation by binding the click event to a static parent element that exists when the page loads. For example:

   $(document).on('click', '#language-picker a', function(ev) {
     // Your event handler code
   });

4. JavaScript Errors: Check the browser's console for any JavaScript errors that might prevent the script from executing correctly.

5. jQuery Version: Ensure that the correct version of jQuery is loaded and that it is compatible with your code.

6. Conflicting Scripts: Look for any other scripts that might interfere with the event binding, such as other libraries or custom scripts that manipulate the same elements.

By addressing these points, you should be able to resolve the issue with the click event handler not being triggered.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[rusackas]

Converting this to a Q&A thread, since it doesn't seem to be a bug report, and almost seems closer to a PR.