TypeScript button work only one time


#1

I’ve got some issues with my buttons menu. When i click they work, i go back to the menu and when i click again nothing appear. Here is my code for the embed twitter


      <ion-content>
        <div class="content">
               
            <a class="twitter-timeline"  href="https://twitter.com/raal_be?ref_src=twsrc%5Etfw">Tweets by raal_be</a>            
            
            <div style="text-align:center;"  class="container">
                <button class="button" id="back" (click)="goback()"></button>
            </div>
         </div>
      </ion-content>

And the ts

export class TwitterPage {
  constructor(public navCtrl: NavController) {
  }

  goback() {
    this.navCtrl.pop();
  } 

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

Is that the good way to work ?


Unary operators with function expressions
#2

No. Your code looks as though it was written 15 years ago. I strongly recommend you learn the basics of Typescript, ES6, and Angular 2.


#3

Thank you for the answer. I’m starting this month with TS and angular and I will do some tutorial in the next days. But for this code above, could you explain me why does it work only one time ?

EDIT: The code in the ionViewDidLoad and between ion content are a generated code from Twitter for developers.


#4

That sounds like a bad fit. Basically, you should never do an unsafe manipulation of the DOM. You might want to see if there’s a project for this on npm. I doubt you’re the first person with this problem. Don’t use code directly from the source you were using though, it won’t play well with Ionic.


#5

For example, there might be something better for you: https://www.npmjs.com/package/twitter


#6

Solution from npm is great and I will do that if really i don’t find a solution at my problem. The code I have is working nice, juste don’t load two times… But thank you for the link I didn’t see it before


#7

What exactly does an exclamation point in front of a function do? I’ve never seen that before. Are we just reversing the value generated by this IIFE?

As for the problem, to make sure I understand correctly:

  • you’re on the main page
  • you navigate to the Twitter page
  • you hit the back button
  • it works, you’re back on the main page
  • you navigate to the Twitter page again
  • you hit the back button, but this time it doesn’t work?

#8

It nots the value returned by the function expression. It’s horrible, evil style, and part of the reason arrow functions now exist.

My personal belief is that if people post code containing the words “var,” “function” or “any,” they lack the basics needed for Ionic programming, and their first step really needs to be to learn Javascript.


#9

I only use var in one place, when I do ‘declare var google’ because I need to promise that this object will exist when the API loads. Doesn’t work with let or const for some reason. I use function with mocha, because they say in the docs to not use arrow functions because it breaks the binding of this that the framework needs, I don’t know why. I use any in a few places. I have noImplicitAny turned on. And I have a few spots where I’m getting some data back from an API, I don’t have type definitions and haven’t written my own interface yet. Sue me :slight_smile:


#10

My comment was more about OP’s than anything else. If you posted a question here, it would probably be about a concept or a tool, not why-doesnt-my-code-work. Maybe I’m wrong about that, but it’s how your posts hit me.


#11

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


#12

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.


#13

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


#14

Completing this tutorial thoroughly was very helpful for me.

https://angular.io/tutorial


#15
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


#16

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.


#17

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.


#18

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


#19

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…


#20

Maybe rephrase to brainf*** ?