How can I write jqUERY inside ember component


#1
I have a form inside a modal dialog in an ember component.

I have used bootstrap modal dialog. I need to reset formvalidations using jquery on closing the modal dialog.

I have an action handler, how can I write jQuery inside that action handler???

i need to implement

$('#loginModal').on('hidden.bs.modal', function() {
    $('#loginForm').formValidation('resetForm', true);
}); 

inside an action`indent preformatted text by 4 spaces`

#2
 this is my hbs file with form

 <div class="modal-body">
              <form id="form" role="form"  {{action "click" on="submit"}}>
                <div class="form-group">
                  <label for="exampleInput">Name
                  </label>
                    {{input type="text" value=name placeholder="Enter the name" }}
                </div>
                <div class="form-group">
                  <label for="exampleInput">standard
                  </label>
                  {{input type="text"  value=std  id="exampleInput6" placeholder="type std" }}
                </div>
                  <button type="button" class="btn btn-primary" data-dismiss="modal"  {{action  "save"}}>Save</button>
              </form>
          </div>
      </div>
  </div>

this is my class file

export default Ember.Component.extend(Validations,{
  store : Ember.inject.service(),

  actions : {
    
    close (){

      this.$('#myModal').on('hidden.bs.modal', function(){
        this.$('#form').data('formValidation').resetForm(true);
        alert('hidde');
      });
     
        this.$('#myModal').on('hidden.bs.modal', function() {
            this.$('#myForm').formValidation('resetForm', true);
        });*/
    ,
  didInsertElement: function() {

    alert('didInsertElement');
            Ember.run.scheduleOnce('afterRender', this, function() {
              this.$('#myModal').on('hidden.bs.modal', function() {
                  this.$('#myForm').formValidation('resetForm', true);
              });
            });
    }*/
});

#3

Am not sure what you are doing is best way to do it but according to docs JQuery is accessed via Ember.$


#4

anaspm has the best approach.

You want to use this.$() if you’re using jQuery within a component as it’ll give you a version of jQuery that’s scoped to working with only elements within the component.