TypeScript button work only one time

bwhiting after this “you navigate to the Twitter page again”, I have nothing that appear.

It’s true AaronSterling I’am a beginner in Javascript and i don’t understand basics points but at the moment i’am doing a traineeship and I’am learning “at the time”, after that I will take all my time to learn it properly.
That’s the reason of this question but I think I find something… Maybe it works only one time because the function is in ionViewDidLoad() and I see in the debugger that is call only one time… Need to do more researchs

Whoever is training you must understand that you have to crawl before you can walk or run. You will learn far more from trying to write things yourself using building blocks from the official Angular docs than you would spending even one more second trying to do anything more with the cargo you are fixated on.

1 Like

I think you’re right. I will go read the Angular docs instead of losing time to try things that I don’t understand… Hope just there will be a solution at the end of this. Thank you for the support

1 Like

Completing this tutorial thoroughly was very helpful for me.

https://angular.io/tutorial

1 Like
It nots the value returned by the function expression. It’s horrible, evil style

I dont believe it nots the value returned, but it nots the declaration of a function (generally evaluting to true I would believe), hence evaluates to false with further no meaning except confusion

Or am I just adding more misery to this horror story? :stuck_out_tongue_winking_eye::stuck_out_tongue_winking_eye:

@GMarcoSP : a word of comfort. We all have been there…some way or another. My hint: use a fork of stackblitz when posting some code. I bet you get instant good code from a community member

I’m torn between wanting to understand this better, and thinking it’s a waste of time because I will never use it. But section 2 of this link seems to contradict both of us. Maybe.

1 Like

Without it, the function is merely declared, not executed. A somewhat more readable way of writing IIFEs is:

(function(foo) { doStuff(foo) })()

…but somebody (probably with a brainfuck background) decided that using a preceding ! would save a character of source code length and have the same effect.

3 Likes

This was funny until I clicked on it and realized it’s an actual thing. At that point it became an indescribable type of hilarious

2 Likes

Hi
I tend to disagree though… As the OP code does not show () after the function declaration. So not an IIFE.

These theoretical cases will lead to understand better how the javascript engine works. Even though that will never give the convincing argument to be placing an ! ever in front of a function or fat arrow.

So, a bit of waste and a bit of function. And definitely a bit of fun…

Maybe rephrase to brainf*** ?

I like brainfuck. Far more accurate. At what point will people stop making things more confusing by trying to simplify them?? (Not you, the brainfu**ers)

Esoteric even!!!

1 Like

“it is sometimes referred to as brainf***, brainfck, brainfsck, b***fuck, brainf**k, branflakes…”

Branflakes is my favorite

Thanks for the hint, didn’t know about stackblitz. And for the “!” I replaced it with “(” before the function and “)” at the end and seems to do the same thing. Again, I’am going to learn more about all this in the next days

It does, but with arguments:

(document,"script","twitter-wjs");

It’s still a zoo and has no business whatsoever in an Angular app.

1 Like

I ran tests and posted them on a new thread, to avoid hijacking the OP.

@GMarcoSP I think your problem is because the script must have your page loaded when it (the script) is loaded. When you go back and enter the page again, the script (that has the id twitter-wjs) is already loaded, so it won’t be loaded again (it won’t enter if(!d.getElementById(id)){...} and create the script tag), but I presume that it should be loaded when the page is loaded (it was loaded before, but not now, because you entered the page again).

If that code has a global variable like window.SomeTwitterGlobalObject you could give a look in its API and try to access it. Let’s say it has a refresh() method to look for elements in your html and apply the changes that are applied in the first load, so you could just call:

if (!d.getElementById(id)) {
    js=d.createElement(s);
    js.id=id;
    js.src=p+"://platform.twitter.com/widgets.js";
    fjs.parentNode.insertBefore(js,fjs);
} else {
    // You entered the page again, the script is already loaded
    console.log('test'); //see if this is called
    window.SomeTwitterGlobalObject.refresh();
}

That’s just one assumption, though. If the script must be loaded again (it doesn’t rely on a global variable), you could assign a different id to it every time the page is loaded:

(document,"script","twitter-wjs-" + (new Date()).getTime());

I think I don’t need to say that, in any of the cases above, the code is pretty, pretty bad. In the first because of the global variable (and I don’t know the variable name nor if there really is a method like refresh() or similar in it). In the second you would be loading the script every time you enter the page (and if it creates a global variable, it may do nothing). I also advise to create a more readable function (that is probably a snippet that the api provides, but I don’t like those kinds of snippets because they are almost illegible; you don’t have to care about minification because that is done in the build process)

The first thing that I advise you to do is see if there is some npm package or similar to do that so that you don’t have to load the script. If there isn’t, I think you should read their docs to see if there is some global variable with a method to reload/refresh like I stated above.

Update

The global object can be accessed with window.twttr, it doesn’t seem to have a refresh() or similar method though.

It seems more people had also similar problems embedding the twitter widgets in a SPA:

1 Like

I resolved the problem thank you ! I understood your explanation and you were right, when the script is already loaded it won’be loaded again. Yesterday I’ve used some breakpoints and I’ve seen that the problem could come from script that don’t load more than one time. Well, the only thing i’ve done to resolve it was to remove the if condition like this

  ionViewDidLoad() {
    this.getInfos();
  }

  getInfos(){
    (function(d,s,id){
      var js: any,
          fjs=d.getElementsByTagName(s)[0],
          p='https';
          js=d.createElement(s);
          js.id=id;
          js.src=p+"://platform.twitter.com/widgets.js";
          fjs.parentNode.insertBefore(js,fjs);
  }
  (document,"script","twitter-wjs"));
  }

Now it works many times. I will not work with generate codes anymore until I got more practical with Angular and Javascript !

@GMarcoSP That’s good to know :slight_smile:

Just have in mind that the script is loaded every time you enter the page (hopefully from the cache when loaded again).

Unfortunately I don’t know if there is a better solution, because that snippet (and others you find on the web) are made to work with static html pages, and don’t work very well with SPAs.

1 Like