2

I would like to submit a HTML form when the search field is active and the enter button is hit. The line below (this.$el.find('.icon-search').get(0).click();) works fine in every browser. In safari though I get an error.

  init: function() {
      if(!this.$el.hasClass('block-wheretobuy-map')){
        this.setEventHandlers();
      }

  },

  setEventHandlers: function() {
      _.bindAll(this, "onFormSubmit", "_on_keydown");
      this.$el.find('.icon-search').click( this.onIconClick );
      this.$el.find('#frm_city').keydown( this._on_keydown );
  },

  _on_keydown: function(event){
    if(event.keyCode == 13){
      this.$el.find('.icon-search').get(0).click();
    }
  },

  onIconClick: function ( event ){
      var url = $(this).attr('href');
      if (url.indexOf("?") >= 0) {
          url = url + '&l=';
      } else {
          url = url + '?l=';
      }
      url = url + $('#frm_city').val();
    $(this).attr('href', url);
  },

HTML

<div class="block block-border block-wheretobuy ">
    <div class="block-background"></div>
    <h1 class="primary">Where to buy </h1>
    <p>Find a store near you</p>
    <div class="fieldset search">
        <div class="placeholder" rel="commain_1comblockcontainertwocolumns_0$frm_city"><span>City, Postcode</span></div><input name="commain_1comblockcontainertwocolumns_0$frm_city" type="text" id="frm_city" class="field field-search" placeholder="" autocomplete="off">
        <a href="/en/where-to-buy" class="icon-search tst-search"></a>
     </div>
</div>

Error in Safari:

Safari TypeError: 'undefined' is not a function (evaluating 'this.$el.find(“.icon-search”).get(0).click()')

user1783346
  • 135
  • 1
  • 2
  • 8
  • well did you debug to see what find() returns and what get() returns? – epascarello Jan 13 '14 at 14:07
  • this.$el.find('.icon-search') returns Error message "undefined is not an object (evaluating 'this.$el.find')". The strange thing is that this only happens in Safari on windows. – user1783346 Jan 13 '14 at 14:12
  • And who uses Safari on Windows? ;) What is the `this` object? Is it what you expect? – epascarello Jan 13 '14 at 14:13
  • I also wonder! It seems like an oddity to me. this is the DOMWindow – user1783346 Jan 13 '14 at 14:15
  • How is _on_keydown bound? – epascarello Jan 13 '14 at 14:15
  • This is possibly answered [here][1]. [1]: http://stackoverflow.com/questions/12744202/undefined-is-not-a-function-evaluating-el-click-in-safari – jr0207 Jan 13 '14 at 14:26
  • I added the setEventHandlers function above to show how _on_keydown is bound. – user1783346 Jan 13 '14 at 14:36
  • I also found http://stackoverflow.com/questions/12744202/undefined-is-not-a-function-evaluating-el-click-in-safari and it could be the same problem but I can't use this solution. I need another solution. – user1783346 Jan 13 '14 at 14:37
  • Possible duplicate of [jQuery .click() works on every browser but Safari](https://stackoverflow.com/questions/12925153/jquery-click-works-on-every-browser-but-safari) – BENARD Patrick Jul 07 '17 at 14:05

3 Answers3

0

Use first() instead if get(0)

this.$el.find('.icon-search').first().click();

first() returns jQuery object, and get(n) returns DOM oject

Stanislau Tarazevich
  • 48
  • 5
0

Quick guess, looks like

this.$el.find('.icon-search').click( this.onIconClick );
this.$el.find('#frm_city').keydown( this._on_keydown );

needs to be

this.$el.find('.icon-search').click( $.proxy(this.onIconClick, this) );
this.$el.find('#frm_city').keydown( $.proxy(this._on_keydown, this) );
epascarello
  • 204,599
  • 20
  • 195
  • 236
0

I found the answer in

jQuery .click() works on every browser but Safari

var a = $('.shell a')[0];
var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window);
a.dispatchEvent(evObj);
Community
  • 1
  • 1
user1783346
  • 135
  • 1
  • 2
  • 8