ron ron - 3 months ago 35
jQuery Question

Click on HTML element and generate pop-up

I'm running an Excel VBA macro that collects information from this webpage. To get the pricing information to appear, you need to click on the box labeled "5 oz. - 4 Count" over on the right side, middle of the page. Once you click on the box a pop-up window appears with the desired information.

My problem is that I have been unable to figure out how to programmatically click on this box.

From examining the page elements, it seems that the following element

<a class="os_opt_dd" href="#"><span class="os_opt_dd_s">5 oz. - 4 Count</span><input tabindex="-1" value="1144"></a>


contains the clickable element that generates the pop-up, but when I try to programmatically click it (as in the code shown below) nothing happens.

my_url="http://www.omahasteaks.com/product/Bacon-Wrapped-Filet-Mignons-4-5-oz-01144?ITMSUF=WZB"

Set ie = CreateObject("InternetExplorer.Application")
With ie
.Visible = True
.navigate my_url
.Top = 50
.Left = 530
.Height = 400
.Width = 400
End With

ie.document.getelementsbytagname("a")(0).Click


When I tried looping through all the elements on the page with the following code, I was able to click on the box and generate the pop-up. But if I refreshed the web page, the value of x that generated the pop-up would be different.

For x = 0 To ie.document.all.Length - 1
ie.document.all.Item(x).Click ' x=1101, 1103 and 1190, 1223 often seemed to generate the pop-up
Next


Can someone show me how to click on the box in a manner that is repeatable? Thanks for your help.

Answer

If you follow the click event stack trace you will discover there are lots of things going on in this webpage. Not least there seem to be three separate tracker scripts which seem to need to hook the DOM events in order to operation. I'd hazard a suggestion that is the cause of your apparent issue.

I say apparent because it is possible to force the event you want to fire via automation on the page. Specifically for my proposed solution. is running on the page and is integral to the event-handling of this web application.

has a trigger method - documentation here - which says:

As of jQuery 1.3, .trigger()ed events bubble up the DOM tree

I don't believe the -based code like this: ie.document.foo.Click - is, in your case, causing event propagation. So let's base a solution on running the necessary trigger script within your programatically created IE session.

The particular <a> tag (anchor) that you want to automate has a class of os_opt_dd. There are 13 such anchors on the page (with the same class) and you want the last. There is probably a better way to isolate the anchor (probably based on the parent <div>) but I'll leave that as an exercise for you.

So the code to provide the automation would be this:

// get the HTML element we want to automate
var anchor = $('a.os_opt_dd')[12];
// trigger the mousedown event on this anchor element
$(anchor).trigger('mousedown');

As a one-liner it reads:

$($('a.os_opt_dd')[12]).trigger('mousedown')

Note we need to trigger the mousedown event and not the click event. This is because (IMO) the event propagation is triggered by the first event of the user action e.g. the pressing of the mouse button on the particular element of the document. If you Google/ search on Stack Overflow then you will find lots of threads/ discussion on this topic of clicks/ events/ jQuery etc which is all useful reading material. If you ask a expert if there's a better way to code that, I fully expect them to come up with something better ;)

Anyway, finally, our code will be:

Option Explicit

Sub TestWithEarlyBinding()

    Dim strUrl As String
    Dim strJquery As String
    Dim objBrowser As InternetExplorer
    Dim objDocument As HTMLDocument

    On Error GoTo CleanUp

    'url and jquery required for automation
    strUrl = "http://www.omahasteaks.com/product/Bacon-Wrapped-Filet-Mignons-4-5-oz-01144?ITMSUF=WZB"
    strJquery = "$($('a.os_opt_dd')[12]).trigger('mousedown')"

    'create IE
    Set objBrowser = New InternetExplorer

    'browse to page and wait for load
    objBrowser.Visible = True
    objBrowser.navigate strUrl
    While objBrowser.readyState <> READYSTATE_COMPLETE 'READYSTATE_COMPLETE =4
        DoEvents
    Wend

    'force jquery event on document
    Set objDocument = objBrowser.document
    objDocument.parentWindow.execScript strJquery, "JavaScript"

CleanUp:
    If Err.Number <> 0 Then
        Debug.Print Err.Number & ": " & Err.Description
    End If
    'objBrowser.Quit
    Set objDocument = Nothing
    Set objBrowser = Nothing

End Sub

Note I used early binding as it was a pain to use late binding for testing the solution to this problem. The required references are:

  • Microsoft HTML Object Library
  • Microsoft Internet Controls
Comments