Translate-plugin: Add to the doc a way to create a onSwitchLocale request without Jquery and extraframework files

Created on 27 Nov 2018  路  7Comments  路  Source: rainlab/translate-plugin

Sometimes we do not want to add jquery files and additional extra frameworks files to create features, please help us with documentation for that.

I am making a October site with react and without jquer, come on, the people dont want use jquery.

I am stucking because i am try create a way to fire the onSwitchLocale event in the backend without jquery and extrameworks

document.querySelectorAll('#I18N_SELECT').forEach(el => el.addEventListener('click', (event) => {
    console.log(event.target.value)

    const details = {
      locale: event.target.value,
      _token: document.querySelector('input[name="_token"]').value,
      _session_key: document.querySelector('input[name="_session_key"]').value
    }

    let formBody = [];

    for (var property in details) {
      let encodedKey = encodeURIComponent(property);

      let encodedValue = encodeURIComponent(details[property]);

      formBody.push(encodedKey + "=" + encodedValue);
    }

    formBody = formBody.join("&");

    fetch(window.BASE_URL, {
      method: 'POST',
      body: formBody,
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
        'X-OCTOBER-REQUEST-HANDLE': 'onSwitchLocale',
        'X-OCTOBER-REQUEST-PARTIALS': ''
      }
    }).then(res => res).then(res => console.log(res)).catch(err => console.log(err))
  }))

but my code does not work

Revision Needed Question

All 7 comments

come on, the people dont want use jquery.

The people do, you don't.

What do you mean by

but my code does not work

The amount of time spent asking for help is directly related to the amount of time spent putting in effort to answer it. If you want help and / or guidance, then invest as much time as possible in making questions that are detailed and easy to understand. Otherwise, nobody is going to invest their time helping with a question that wasn't even worth the askers time to ask correctly.

Sometimes we do not want to add jquery files and additional extra frameworks files to create features, please help us with documentation for that.

I am making a October site with react and without jquer, come on, the people dont want use jquery.

In the following other/related comment, I've added a way of using Axios that seems to work as an alternative to $.ajax. I'm not 100% sure this works without Framework Extras and I have not tried it with the window.fetch api, but it seems to work fine with Axios which is good news for you.

https://github.com/rainlab/translate-plugin/issues/265#issuecomment-442276094

I did it without frameworks and work perfect. Tell me if I can add this to the documentation to create a PR and u merged it

Keep in mind that this implementation doesn't do any of the nice things that the Ajax Framework does out of the both tho.

I guess there could be a mention of what type of headers one should pass and how to encode the values in the documentation but people should know that they lose features with this approach overall too in my opinion.

Believe me, people are not using Jquery anymore. The software must evolve. Good luck.

I agree that one should probably not be forced to use jQuery in the themes or the OctoberCMS's website frontend, but jQuery will probably be here for a long time still so you can't expect people to dump it completely either.

That said, now with this solution perhaps you can use Axios or other libraries and use October as your headless CMS of choice too.

@CharlyJazz feel free to submit a PR where you feel like it would be most appropriate to the octobercms/docs repository to tell people how to implement the AJAX framework without using jQuery

Was this page helpful?
0 / 5 - 0 ratings

Related issues

patrick-durrer picture patrick-durrer  路  7Comments

o0alexela0o picture o0alexela0o  路  4Comments

CptMeatball picture CptMeatball  路  7Comments

RodrigoGalter picture RodrigoGalter  路  4Comments

madebyframe picture madebyframe  路  8Comments