Invoking jQuery from O2

jQuery is an amazing  javascript API and since O2 has a two-way communcations with the hosted IE object, there is a new O2 API that allows the managed (ie. in O2) manipulation of jQuery.

Here is an exampe of this api in action:

var topPanel = "PoC - jQuery IE Automation example".popupWindow(600,700);
var ie = topPanel.add_IE().silent(true);

ie.open(<a href="http://jquery.bassistance.de/autocomplete/demo/">http://jquery.bassistance.de/autocomplete/demo/</a>);
var jQuery = new IE_JQuery(ie);
jQuery.id("suggest1")            // getting reference to html element with id 'suggest1'
      .border(12)               // seeting the border value to 12
      .value("London")            // setting the 'value' attribute to 'London'
      .keydown();     
         
jQuery.wait(200)                  // wait 200 ms to give time for the '.ac_over:first' to exist
      .element(".ac_over:first")  // get reference to '.ac_over:first' element
      .parent()                      // invoke the jQuery 'parent' method
      .click();                      // invoke the jQuery 'click' method     
     
jQuery.wait(1000).id("suggest1").border(2);      // wait 1s before removing the border</pre>
return "ok";

//O2File:IE_JQuery.cs
//O2File:WatiN_IE_ExtensionMethods.cs
//using O2.XRules.Database.Utils.O2
//O2Ref:WatiN.Core.1x.dll

Here is a longer version of the above script (the following code samples are not ‘standalone *.h2 scripts and will need to be executed inside the ‘Quick Development Environment’ or ‘IE Automation’ scripts (since they need the ‘panel’ variable):

panel.clear();
var ie = panel.add_IE().silent(true);

ie.open("http://jquery.bassistance.de/autocomplete/demo/");

var jQuery = new IE_JQuery(ie);
jQuery.id("suggest1")            // getting reference to html element with id 'suggest1'
      .border(12)               // seeting the border value to 12
      .value("London")            // setting the 'value' attribute to 'London'
      .keydown();     
         
jQuery.wait(200)                  // wait 200 ms to give time for the '.ac_over:first' to exist
      .element(".ac_over:first")  // get reference to '.ac_over:first' element
      .parent()                      // invoke the jQuery 'parent' method
      .click();                      // invoke the jQuery 'click' method     
     
jQuery.wait(1000).id("suggest1").border(2);      // wait 1s before removing the border

return "ok";

     
// here is a more verbose version of the above script
ie.wait(1000);

jQuery.element("#suggest1").border(12);              
jQuery.id("suggest1").attr("value","Lond").keydown();   
ie.wait(200);
jQuery.element(".ac_over:first").parent().click();
// here is a version using much more raw jQuery manipulations and experiements
ie.invokeEval("jQuery(\"#suggest1\").attr('value','mode 1')");
ie.wait(1000);
jQuery.invokeJQuery("'#suggest1').attr('value','mode 2'");
ie.wait(1000);
jQuery.element("#suggest1").invokeJQuery("attr","'value' , 'mode 3' ");
ie.wait(1000);
jQuery.element("#suggest1").attr("value","L");
ie.wait(1000);
jQuery.id("suggest1").invokeJQuery("trigger", "'keydown'");
ie.wait(1000);
jQuery.element(".ac_over:first").invokeJQuery("parent","").invokeJQuery("click","");
return "done";
//O2File:IE_JQuery.cs
//O2File:WatiN_IE_ExtensionMethods.cs
//using O2.XRules.Database.Utils.O2
//O2Ref:WatiN.Core.1x.dll

 
Here is the Script provided by an Daniel (an O2 user) which inspired the creation of this script:

panel.clear();
var ie = panel.add_IE().silent(true);</pre>
ie.open("http://jquery.bassistance.de/autocomplete/demo/");
//ie.invokeEval(incJquery);
ie.field("suggest1").value("London"); //entering value inside first autocomplete control
ie.invokeEval("$('#suggest1').trigger('keydown')"); //triggering keyboard event
ie.wait(100);
ie.invokeEval("$('.ac_over:first').parent().click()"); //choosing first value from autocomplete
return ie.fields();
//O2File:WatiN_IE_ExtensionMethods.cs
//using O2.XRules.Database.Utils.O2
//O2Ref:WatiN.Core.1x.dll

 
this is how Daniel was injecting jQuery into the page (note that the IE_JQuery.cs api also does this)

var incJquery = "var script = document.createElement('script');";
incJquery += "script.src = 'http://code.jquery.com/jquery-latest.pack.js';";
incJquery += "script.type = 'text/javascript';";
incJquery += "document.body.insertBefore( script, document.body.firstChild );";
ie.invokeEval(incJquery);