My webbrowser connects to a page, then I want it to click a div.
<div class="acceptButton state1">
<a class="buttonGreen">
<span>${$item.getAddressButtonText( $data.messageType )}</span>
</a>
</div>
The page uses jquery or something to do it all. :( and most help I found required an id, which these only have a class
<script id='messageListItem' type='text/x-jquery-template'>
<li data-messagetype="${messageType}" class="${messageType}" data-messageid="${messageId}">
<div class="messageItem">
<div class="closeButton">
<a><span>X</span></a>
</div>
<img class="friendImage" src="${senderImgUrl}" alt="${senderName}" />
<div class="messageBubble">
<div class="messageBubbleTop"></div>
<div class="messageBubbleBody">
<div class="messageBubbleContent">
{{if $data.messageImgUrl != null}}
<img class="giftImage messageImage" alt="${messageImgAltText}" src="${messageImgUrl}">
{{/if}}
<h5 class="friendName">${senderName}:</h5>
<p class="requestMessage">${message}</p>
<span class="requestDate">${timestampStr}</span>
<div class="clearFloat"></div>
</div>
</div>
<div class="messageBubbleBottom"></div>
</div>
<div class="acceptButton state1">
<a class="buttonGreen"><span>${$item.getAddressButtonText( $data.messageType )}</span></a>
</div>
<div class="clearFloat"></div>
</div>
</li>
To click the div you can run JavaScript code in the WebBrowser's DocumentCompleted event handler using Navigate():
webBrowser1.Navigate("javascript: /* your javascript code */ void(0);");
So if you have a div:
<div class="myDivClass">
...
</div>
You can trigger a click on it using:
webBrowser1.Navigate("javascript: document.getElementsByClassName('myDivClass')[0].click();void(0);"); //assuming it's first and/or only div with that class
As far as I remember, it is not possible to click a DIV. In that, if you try, the event in the DIV will not trigger. Say, if the DIVhas an onclick event, it will not trigger.
So, what you have to do, in order to get the onclick event in the DIV to trigger, is to click anything (any of the other elements) in the DIV. Let's say the DIV has an IMG element/tag: Perform a .click on that and the DIV's onclick event will be triggered. Does this make sense? So any DIV's onclick triggering is only possible through onclick event bubbling - by using the method I described above.
I am just telling you this in case you we're expecting an onclick event to run that is attached directly to the DIV. Just in case you add it in the future or you run into it later, it is important for you to understand this (even though I didn't see an onclick in your DIVtag at the moment, it's an important information to have).
Hope this helps and if you have any further questions, let me know.
I only found this through testing and it isn't really written anywhere, the same thing applies to the span tag if I remember correctly.
Related
The main DIV consist of text in one of it's childs & consist of button i need to click if text is present. How can i define the main div to continue work with this if one of it's childs strictly consist of text i need?
Structure seems like:
<Div class="Green"> (Main Div i mentioned in description)
<Div class="Yel">
<Div class="Ora">
<Div class="Pur">
<span>text must be present</span>
I need to define main div , to proceed with this by findelement. then.
Have you tried the below.
Browser.FindElement(By.XPath("//div[#class='Green' and //span[normalize-space(.)='137']]//button[#class='needed_item']")).Click()
or
Browser.FindElement(By.XPath("//span[normalize-space(.)='137']/ancestor::div[#class='Green']//button[#class='needed_item']")).Click()
This xpath will first find the main div which have a span with 137 text. And then click on the button which have the class needed_item. Considered the below structure for the xpath.
<div #understand='main_div' #class='Green'>
<div #understand='child_div1'></div>
<div #understand='child_div2'>
<span #understand='target_span'> 137 </span>
</div>
<div #understand='child_div3></div>
<div #understand='div with button'>
<button #class='needed_item'>Target Button</button>
</div>
</div>
Let me know if there is any change in the structure.
Our solution runs with a parent frame and a main content iframe. One of the pages in the main content iframe is set up with a series of divs used as tabs, example as follows.
<div id="topRow">
<div class="mainInformation tab tabSelected" runat="server" id="mainInformationTop">
<div class="tabLeft">
<div class="tabMain">
Main Information
</div>
</div>
</div>
<div class="executives tab" runat="server" id="executivesTop">
<div class="tabLeft">
<div class="tabMain">
Executives
</div>
</div>
</div>
</div
<div id="secondRow">
<div id="mainInformationTabGroup" runat="server" class="mainInformation tabGroup">
<div id="overview" runat="server" class="tab tabSelected overview">
<div class="tabLeft">
<div class="tabMain">
Overview
</div>
</div>
</div>
<div id="locations" runat="server" class="tab locations">
<div class="tabLeft">
<div class="tabMain">
Locations
</div>
</div>
</div>
</div>
<div id="executivesTabGroup" runat="server" class="executives tabGroup" style="display: none">
<div id="companyExecutives" runat="server" class="tab companyExecutives">
<div class="tabLeft">
<div class="tabMain">
Company Executives
</div>
</div>
</div>
<div id="affiliatedExecutives" runat="server" class="tab affiliatedExecutives">
<div class="tabLeft">
<div class="tabMain">
Affiliated Company Executives
</div>
</div>
</div>
</div
</div>
The jquery event handlers are loaded from a local .js file, example pertaining to the above HTML as follows
$('#topRow div.tab').click(function() {
$('#topRow div.tabSelected').removeClass('tabSelected');
$(this).addClass('tabSelected');
})
$('#topRow .mainInformation').click(function() {
$('#secondRow').css('display', 'block');
$('#thirdRow').css('display', 'none');
resizeAllIframes();
$('#secondRow .tabGroup').css('display', 'none');
$('#secondRow .mainInformation').css('display', 'block');
$('#secondRow .mainInformation div.tab').not('.locked').children().first().trigger('click');
});
$('#topRow .executives').click(function(){
$('#secondRow').css('display', 'block');
$('#thirdRow').css('display', 'none');
resizeAllIframes();
$('#secondRow .tabGroup').css('display', 'none');
$('#secondRow .executives').css('display', 'block');
$('#secondRow .executives div.tab').not('.locked').children().first().trigger('click');
});
(The click events just change the "src" attribute of the iframe)
The issue I'm experiencing is that sometimes when we load this tab page (and only in Internet Explorer 9+, IE7 seems to not have this issue), I'll click on a tab and nothing will happen. The hover events for the CSS are loaded just fine, but click on the tab does nothing. However, if I click one tab and nothing happens, I can click on the next and it will work fine. Similarly, if I click anywhere in the main content frame first and then on a tab, it will always fire the event handler.
We've noticed this problem happening almost entirely when we try to direct to the tabbed page from the parent frame (we have a quicksearch up there) and we use a Response.Redirect to load the iframe with the tab page. I've tried redirecting this quicksearch to a landing page inside the iframe that then uses a Response.Redirect to get us to the tab page, but it ends up with the same results. When we're clicking on a hyperlink from inside the iframe (Target="_self"), that works just fine.
This issue doesn't happen in Firefox, Chrome, or IE7, but it does in IE9+.
Does anybody have any thoughts, ideas, known bugs that I'm missing, anything like that?
this is how you bind an event to an element:
$(document).bind('click','#topRow div.tab',function() {
$('#topRow div.tabSelected').removeClass('tabSelected');
$(this).addClass('tabSelected');
});
do the exact same for the other events just change the selector part (I mean "#topRow div.tab") with the desired selectors.
I'm trying to figure out how to get my Javascript code to check whether or not a button has been chosen. If it has, I would like to display the button's value.
I have the following HTML:
<li class="control-group">
<label for="amount" class="control-label">Select an amount</label>
<div class="controls">
<div class="btn-group radioButtons amountButtons" data-toggle="buttons-radio">
#if (Model.PresetValues.Count > 0){
foreach (int value in Model.PresetValues) {
<button type="button" data-value="#value" class="btn #(Model.chargeViewModel.ChargeAmount == value ? "active" : "")">$#value</button>
}
}
<button type="button" data-value="other" class="btn toggleDiv toggleOnce" data-toggle-id="#manualAmount">Other</button>
</div>
<input type="hidden" class="radioHidden validate required validateAmount" value="" id="amount" name="ChargeAmount">
</div>
<div class="controls hide resize" id="manualAmount">
<div class="input-prepend input-append">
<button class="btn minus" type="button"><i class="icon-minus"></i></button>
<input class="span2 plusminus" data-max="100" data-min="10" data-increment="5" data-value="25" id="manualAmountInput" type="text" value="$25" disabled>
<button class="btn plus" type="button"><i class="icon-plus"></i></button>
</div>
</div>
</li>
Those are my two options for the button and I would like to edit the following span
<span class="help-block">Your card will automatically reload $<span id="autoAmount">0</span> when your balance is lower than your reload threshold.</span>
I have the following script which I was led to believe will change the value of the span as it is clicked, but I am having a difficult time connecting them together.
<script>
javascript: void (document.getElementById("autoAmount").innerHTML = amount);
</script>
if anyone has any suggestions or ideas, it would be greatly appreciated.
Thanks!
To expand on kyllo's answer a little bit...
First you would need to bind a click event to your button. You can set it as an onClick attribute:
<input type="button" onClick="captureAmount(e); return false;">
Including the 'e' inside captureAmount will pass the click event itself over to our function, which we can use to figure out which button was clicked (if you are using this function in more than one place).
You can also use jQuery if you've included that library, to attach the function to every button on the page at once.
$('input[type=button]').click(captureAmount(e));
Or, specify buttons with a particular class..
$('input.amountBtns').click(captureAmount(e));
And your function could look a little something like this:
function captureAmount(e){
var clicked = e.target
, clickedAmount = clicked.value
, display = document.getElementById("autoAmount")
;
display.innerHTML = clickedAmount;
}
If you want the innerHTML of the autoAmount span to change when you click a button, then you would need to bind an onclick event to that button, and then when the onClick event fires, you would do document.getElementById("autoAmount").innerHTML = amount.value
for example, in the button declaration you can add
onclick="updateAmount()"
and then inside the script tags you would declare a javascript function that is called by the onclick event:
function updateAmount(){
document.getElementById("autoAmount").innerHTML = document.getElementById("amount").value
}
(Keep in mind that your "amount" input box is hidden, though.)
I am trying to automate clicking a "button" in a webpage using WebBrowserControl in my C# winforms application...
if it was a normal button, this would be easy, but the html code for this button is some '' class.. here is the code for the button.
<div style="clear: left;"></div>
<div class="loginbox_left btn_ctn">
<div id="login_btn_signin">
<a href="javascript:DoLogin()" class="btn_checkout_green">
<div class="leftcap"></div>
<div class="rightcap"></div>
<div class="text">Sign in</div>
</a>
</div>
</div>
How can I invoke 'Click' on this type of button? (i am fine upto gettting the DIV as 'HtmlElement' from 'HtmlElementCollection' of the 'WebBrowserControl.Document', but rest I am stuck!)
I use DNN and C#. I've got a form with a lot of input and select HTML tag. At the end of form there is a . When I click on it, the page is reload but when I try catch data of form (with Request.Form['formName'] or Request['form']) I've got only empty field (and if I check the value of IsPostback, it's always false). But in the form tag there is value.
FILE View.ascx
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-4">
<label for="formCodiceCanile">Codice Canile</label>
</div>
<div class="col-sm-4">
<input type="text" name="formCodiceCanile" ID="formCodiceCanile" value="<%=InfoScheda.CodiceCanile %>" />
</div>
<div class="col-sm-2"> </div>
</div>
OTHER FIELD (such as input text, select and radio button)
<input type="submit" name="formRegistraScheda" id="formRegistraScheda" value="Registra scheda" />
I know that I can use (and if I use it, there isn't problem because catch the value in the asp:Textbox it's a joke) but in this case I can't use them.
How can I resolve this problem?
PROBLEM SOLVED: the button doesn't do the POST because I use a field's form in the URL to observe the page status. Now I remove this control and I use the IsPostback native variable of C# and the form work!