Why Jquery UI Button Looks Different in Firefox and Chrome

Why jQuery's event.which gives different results in Firefox and Chrome?

This jQuery page says that event.which should be normalized for cross browser consistency. But, it looks like this is not true.

jQuery normalizes the property name (e.g., always which, rather than which or keyCode depending on browser), but not the value of the property, which would be dramatically more complex.

The value for the key you get from keydown / keyup will vary not only by browser, but by keyboard layout. There are lots of gory details on the JavaScript Madness: Keyboard Events page by Jan Wolter. Amongst other things, you can see on that page that for that key, Firefox will give you 109, IE (and apparently Chrome) will give you 189, and Opera apparently used to go with 45 (but in my tests on Linux, they now go with 109).

For printable keystrokes (like -), you're better off with the keypress event, which gives you the resulting character.

JQuery UI working on chrome but not firefox

First debugging tip: use tools. Most browser's nowadays include debugging tools you can call with F12. In Firefox, the short-cut is Cmd+Opt+K or Ctrl+Shift+K though I recommend you open the add-on manager and install Firebug.

Second tip: check whether your code runs. The console API is a good start:

$('#maplink').click(function () {
    console.log("Button clicked");
    $("#tabs").tabs("option", "active", 2);
});

Nothing gets printed so your event is not being called. We can see it isn't attached directly to the button but to an inner <span>:

<button class="btn-placeorder"><span id="maplink">View map</span>
</button>

So we wonder: is there something wrong with onclick events on spans?

$("span").on("click", function(){
    console.log("click on span: %o", this);
});

Nothing printed, so there's apparently an issue. It is possible that the button is catching the onclick event?

<button class="btn-placeorder"><span id="maplink">View map</span>
    </button><span>Test span</span>

click on span: <span>

So that it's! Weird... Well, why do you need a <span> in the first place?

$('.btn-placeorder').click(function () {
    console.log("Button clicked");
    $("#tabs").tabs("option", "active", 2);
});

It works! All we need now is some cleanup, such as assigning a proper ID to the <button> and getting rid of the redundant <span>.

jquery ui button icon not centered in firefox

You also have your text: false option in the wrong place, it should be:

  { icons: { primary: "ui-icon-closethick" }, text: false }

Thanks to jmoerdyk

Then i just had to set the height at 32px and fixed !

jQuery datepicker displays different on Chrome and on Firefox

Please refer to the following articles.
You should not use type=date if you'd like to apply mm/dd/yyyy format in value attribute or form submission.

• Quick FAQs on input[type=date] in Google Chrome
• Date state (type=date)

Different jQuery UI behavior in different browsers

The problem is that slot is not a standard attribute for an element. In most browsers, it is hence not included in the standard properties of an element (like element.value or element.id). Chrome seems to handle this situation differently than the other browsers.

Two bad solutions

A solution would be to change:

dates.push(val.id + '|' + val.slot);

to

dates.push(val.id + '|' + $(val).attr('slot'));`. 

Another - plain javascript - solution could be to use the javascript getAttribute() method. This would work because in the jQuery source code custom attributes are set with this line:

elem.setAttribute( name, value + "" ); //from the jQuery source code

Thus making it possible to also read them with element.getAttribute(). Your line would then look like this:

dates.push(val.id + '|' + val.getAttribute("slot"));

The better solution

This might all work, but it still is not considered good code. In your code the attribute slot is used to store data. From the .data() jQuery docs (see this answer):

Store arbitrary data associated with the specified element. Returns the value that was set.

$.attr() on the contrary is used to manipulate attributes, like id, value or type. The clean way of solving this problem would be:

$('.cal_clean_active').click(function(e) {
  var that = $(this); 
  var dates = new Array();

  that.toggleClass('clicked');

  $('#dialog').dialog({
    resizable: false,
    height: "auto",
    width: "auto",
    modal: true,
    buttons: {
      "Vormittags (bis 12:00 Uhr)": function() {
        that.data('slot','vormittags'); //Not the use of data
        console.log(that.data('slot'));
        $(this).dialog('close');
      }
    },
    beforeClose: function() {
      $('.clicked').each(function(i, val) { 
        dates.push(val.id + '|' + $(val).data("slot")); //Also note it here
      });
        console.log(dates);
    }
  });
});

Different 'back' buttons generated depending on browser using jQuery mobile

The issue actually was for me that I was not hosting the jquery mobile images. So they were not being found.

---

Related Topics