Question

So I have a dropdown context box, which I use to select which item I am going to be working with.

Now everything seems to be working on all browsers except Safari. I have a type function that works fine in safari if you focus on the box and type the name in and hit enter. However my issue is with the mouse click. If I select an item from the dropdown and click it, the postback doesn’t work until I hit enter on the keyboard.

Here is my .ascx.cs file

...
if (cboContext.Visible)
    {
        string postBackFunction = "function contextPostback() {\n"
        + "var newValue = document.getElementById(\"" + cboContext.ClientID + "\").value;\n"
        + "if (newValue != " + cboContext.SelectedValue + ") " + Page.ClientScript.GetPostBackEventReference(cboContext, "") + ";\n}";

        Page.ClientScript.RegisterClientScriptBlock(typeof(string), "contextPostback", postBackFunction, true);

        if (Request.UserAgent.ToLower().IndexOf("chrome") > -1)
        {
            cboContext.Attributes.Add("onkeypress", "if (typeAhead(event,'" + cboContext.ClientID + "') == 1) contextPostback();");
            cboContext.Attributes.Add("onclick", "contextPostback();");
        }
        else if (Request.UserAgent.ToLower().IndexOf("safari") > -1)
        {
            cboContext.Attributes.Add("onclick", "contextPostback();");
            cboContext.Attributes.Add("onkeypress", "if (typeAhead(event,'" + cboContext.ClientID + "') == 1) contextPostback();");
            cboContext.Attributes.Add("onkeydown", "if (typeAhead(event,'" + cboContext.ClientID + "') == 1) contextPostback();");
            cboContext.Attributes.Add("onkeyup", "if (typeAhead(event,'" + cboContext.ClientID + "') == 1) contextPostback();");
        }
        else
        {

            cboContext.Attributes.Add("onkeydown", "if (typeAhead(event,'" + cboContext.ClientID + "') == 1) contextPostback();");
            cboContext.Attributes.Add("onclick", "contextPostback();");
        }
    }

Here is the typeAhead() function

function typeAhead(e, nextFocus) {

//don't trap Ctrl+keys
if ((window.event && !window.event.ctrlKey) || (e && !e.ctrlKey)) {

    // timer for current event
    var now = new Date();

    ....
    if (inputBuffer.accumString == "" || now - inputBuffer.last < inputBuffer.delay) {
        //check for browsers
        var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
        var is_safari = navigator.userAgent.toLowerCase().indexOf('safari') > -1;
        // make shortcut event object reference
        var evt = e || window.event;
        // get reference to the select element
        var selectElem = evt.target || evt.srcElement;
        // get typed character ASCII value
        var charCode = evt.keyCode || evt.which;
        // get the actual character, converted to uppercase
        var newChar = "";
        // get reference to the actual form selection list
        // added cross browser fix to enable the context switcher to work properly
        if (is_chrome) {
            var selection = document.getElementById("ctl00_ContextSwitch1_cboContext").selectedIndex;
        }
        else {
            var selection = document.getElementById(nextFocus);
        }
....

Now I have a section in the typeAhead for the chrome browser, but everything I try for safari doesn’t seem to allow me to use the mouse click to select an item.

Any help would be appreciated.

Answer 1

simple fix. safari recognizes onchange so once I added that, it worked fine.