Will Will - 7 months ago 24
Javascript Question

Issue with AppendText and TypeText with IE9 (Specifically with Change Events)

So recently we have forced our app to run in IE9 mode, and since then WatiN typetext, AppendText, with conjuntion with TriggerClientChange (displayed below) does not fire the JS on the page anymore.

Here is the situation... Its a textfield that is used for quick searching our app. OnFocus, pops up a menu, and when typing occurs, it then searches the DB and populates teh select menu with results. for the past two years, this has been working fine using AppendText and TypeText with this Method TriggerClientChange

public static void TriggerClientChange(this Element element)
{
//var Id = element.Id.Replace("[", @"\\[").Replace("]", @"\\]");
if (String.IsNullOrEmpty(element.Id))
{
element.Id = "x" + Guid.NewGuid().ToString("N");
}

string selector = "[id=\"" + element.Id + "\"]";

//if (element.Name == null)
// throw new ElementExtensionException("element: " + element.ToString() + " doesn't exist.");

if (element is CheckBox)
{
selector += ":checkbox";
}
element.DomContainer.WaitForComplete();
element.DomContainer.Eval("var elt = window.$('" + selector + "'); if(elt.length > 0) { elt.trigger('change'); }");
element.DomContainer.WaitForAjaxComplete();
element.DomContainer.WaitForComplete();
}


Now that we are supporting IE9, and HTML5 we have decided to force IE9, and standards. Since then, the JS is not being fired when TriggerClientChange is envoked, which runs the JS, when a value is typed in the search textfield. We have tried different permutations of the .change without success, shuch as:

public static void ForceChange(this Element element)
{
element.DomContainer.Eval(String.Format("$({0}).change();", element.GetJavascriptElementReference()));
}
public static void ForceChange(this Element element)
{
element.DomContainer.Eval("$('#" + element.Id + "').change();");
}


Neither produce the result, as it used to. Below is the QuickSearch Method that types the value into textbox that has worked for a long time, until we forced IE9 standards

internal void SetQuickSearchTextbox(string val)
{
this.Browser.TextField("navBarQuickContactSearch").AppendText(val);
this.Browser.TextField("navBarQuickContactSearch").TriggerClientChange();
this.Browser.WaitForAjaxComplete();

Thread.Sleep(5000);

ElementCollection results = this.Browser.Div(Find.ByClass("ac_results")).ElementsWithTag("li");
results[1].Click();
}


Lastly this is the TypeText

protected virtual void SendKeyPresses(string value)
{
var length = value != null ? value.Length : 0;

if (TextField.MaxLength != 0 && length > TextField.MaxLength)
{
length = TextField.MaxLength;
}

for (var i = 0; i < length; i++)
{
var character = value[i];

FireKeyDown(character);
FireKeyPress(character);
FireKeyUp(character);
}
}

protected virtual void FireKeyUp(char character)
{
TextField.KeyUp(character);
}

protected virtual void FireKeyPress(char character)
{
TextField.KeyPress(character);
}

protected virtual void FireKeyDown(char character)
{
TextField.KeyDown(character);
}


Summary: These have worked until IE9 was forced. Yes this works when manually typing in the textfield, yet now the scripts do not .change the element like it used to. Any help would be great.

Answer

We fixed the issue with the following snippet. It simulates the missing jquery event:

var evt = jQuery.Event("keydown");   
evt.keyCode = $.ui.keyCode.RIGHT;   
$('input.ac_input').focus().val('SOME TEST TEXT').trigger(evt);

It's a workaround that is run through Browser.Eval. The change in ie9mode that broke it is still not determined.