I have a table with the summary of items, and when i click on a button i have a modal pop up with addition information about that item. Unfortunately, for some reason, Blazor will not always pop up the modal. It's gotten to the point where i've simplified the code to just do a Console.WriteLine("Person Id: Id") and i'm still seeing the issue.
#foreach(var p in people){
<tr>
<td><button type="button" class="btn btn-outline-info" #onclick="(async()=>await ShowPerson(p))">#p.FirstName</button>
</td>
<td>#p.LastName</td>
</tr>
}
then in the code section
List<Person> people { get; set; }
...
async Task ShowPerson(Person p){
Console.WriteLine("Click");
selectedPerson = p;
await _jsRuntime.InvokeVoidAsync("toggleModal", "personModal");
}
then in my js file the toggleModal just does a $("#" + id).modal('toggle');
now when i'm watching the console, I can click a button and there is a chance that nothing shows up in the console, and the modal doesn't open. Or the Click shows up in the console and the modal pops up. Has anyone come across this, or see anything obvious from the code above?
Thanks
For anyone else who comes across this and is as blind as i am. Verify that your #onclick is on the actual button and not on the span within
Bad:
<button class="btn btn-success">
<span class="fa fa-bug" #onclick="(async()=>await foo(x))"></span>
</button>
Good:
<button class="btn btn-success" #onclick="(async()=>await foo(x))">
<span class="fa fa-thumbs-up"></span>
</button>
I'm a little surprised it didn't fire anyway, to be honest. You can put #onclick on almost anything.
Related
I'm creating a web app with an API and wrote some kind of help page with HTML.
For the sake of clarity, I want to hide and show some of the text on button click.
I already got the HTML code for that.
<li> GET https://someurl.com/api/getallInformation - some text about data</li>
<div>
<button onclick="help()">Show Text</button>
</div>
<div id="Text">
<li>Text that should be shown and hidden on Button click </li>
</div>
But I do not know ho to write the help()-function, that makes the button work. I'm writing the app in ASP.NET Core.
I know there are many examples, but none of those I found seem to fit my problem.
Any idea how to do it ? Thats what it looks like now. The button just does not work.
function help() {
var x = document.getElementById("Text");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<button onclick="help()">Help</button>
<div id="Text">
<li>Text that should be shown and hidden on Button click </li>
</div>
i just want to click button in my page.
The html code lookls like :
<tr ng-repeat="row in rowCollection" ng-class="{ "error-row": row.errorMessage }" ng-style="vm.getColor(row)" class="ng-scope" style="background: rgb(255, 242, 255) none repeat scroll 0% 0%;">
<td class="ng-binding">Wylaczenie nadan RDF</td><td class="ng-binding">WAITING_FOR_NOTIFICATION</td>
<td>
rfsSendingExecutor
</td>
<td class="ng-binding">2017-09-06 11:14:12</td><td class="ng-binding">2017-09-06 11:14:13</td>
<td has-role="REQUEST" class="text-center">
<!-- ngIf: row.inXml || row.outXml -->
<button ng-if="row.inXml || row.outXml" ng-click="vm.showXml(row)" title="Show" class="btn btn-xs ng-scope"><span class="fa fa-code"></span></button>
<!-- end ngIf: row.inXml || row.outXml -->
</td>
<td has-role="ERROR" class="text-center"><button ng-show="row.errorMessage" ng-click="vm.showError(row.errorMessage)" title="Show" class="btn btn-xs ng-hide"><span class="fa fa-search"></span></button></td>
<td class="text-center">
<button ng-show="vm.enableCancel(row)" ng-click="vm.cancelTask(row.workItemId)" title="Cancel" class="btn btn-xs ng-hide">
<span class="fa fa-ban text-warning"></span>
</button>
<button ng-show="vm.enableRepeat(row)" ng-click="vm.repeatTask(row.id)" title="Repeat" class="btn btn-xs ng-hide">
<span class="fa fa-refresh text-success"></span>
</button>
<button ng-show="vm.enableRepeat(row)" ng-click="vm.repeatTaskWithParams(row.id)" title="Repeat with parameters" class="btn btn-xs ng-hide">
<span class="fa fa-refresh text-warning"></span>
</button>
<button ng-show="vm.enableSkip(row)" ng-click="vm.skipTask(row.workItemId)" title="Skip" class="btn btn-xs">
<span class="fa fa-angle-double-right text-success"></span>
</button>
</td>
</tr>
All i want to do is click this button :
<button ng-show="vm.enableSkip(row)" ng-click="vm.skipTask(row.workItemId)" title="Skip" class="btn btn-xs">
<span class="fa fa-angle-double-right text-success"></span>
I've been through the xpath tutorials and checked many other posts nad forums. I'm not sure what I'm missing. I'm simply trying to find the following element by xpath like this :
button_to_click= findElement(By.xpath("//button[#title='Skip']"));
but it doesn't work. QUESTION : Why it don't work only by title?
I try another way and do like that :
button_to_click= findElement(By.xpath("//button[#class='btn btn-xs']"));
And it works well , but when i have 3 or 4 elements in this class it just press wrong button.
How can i press exacly this button can someone help me?
Maybe shouold i try something like this?
button_to_click= findElement(By.xpath("//button[#class='btn btn-xs']//button[#title='Skip']"));
Why it don't work only by title? And how can i do that better? Please be patient for newbies.
EDIT 1
I add more code as you want to know what I'm doing. :
This code works well :
driver = new ChromeDriver();
driver.url ="http://mypage.com"
button_to_click= findElement(By.xpath("//button[#class='btn btn-xs']")).Click();
And this code doesn't work :
driver = new ChromeDriver();
driver.url ="http://mypage.com"
button_to_click= findElement(By.xpath("//button[#title='Skip']")).Click();
EDIT 2
I will give you an example page for testing. You just have to download the html file and open it in your browser.Html page file
What we now want to do?
If you run this html file you will see all page.
And now we want to make a Click on exacly this button on screen :
After when you click on this button you will see click counter below : like this :
Have anyone idea how to click it? I try few ways and can't find solution still. Please help.
EDIT 3
I try also : - but it too doesn't work
drive.FindElement(By.XPath("//tr[class='ng-scope']/td[text()='Wylaczenie nadan RDF'] and button[#title='Skip'']]")).Click();
As per your Question, this line of code works :
button_to_click= findElement(By.xpath("//button[#class='btn btn-xs']")).Click();
This line of code does't works :
button_to_click= findElement(By.xpath("//button[#title='Skip']")).Click();
Explanation:
Looking at the HTML DOM it's clear the WebApplication uses a lot of JavaScript & Ajax Calls. Hence are the attributes e.g. ng-repeat, ng-class etc with dynamic values e.g. { "error-row": row.errorMessage }, vm.showError(row.errorMessage) etc. So it will be tough to use these values/attributes to construct an xpath or CSSselector
Using xpath as //button[#title='Skip'] should have worked provided the xpath uniquely identified the specific element of our interest. But as it is not happening I suspect there may be multiple elements matching this xpath where some of them may be disabled/hidden. So, the xpath using the title attribute as Skip FAILED.
Using xpath as //button[#class='btn btn-xs'] works without failure because here we have considered the class attribute which is extensively used within CSSselector as well as within xpath which maps down to querySelector/querySelectorAll. Hence, this option is more reliable and works perfect.
Update :
Though using xpath as //button[#class='btn btn-xs'] works for you without any failure I am not sure why you want to avoid it. About the xpath you mentioned in your comment, as you have got much granular in your search using the <button> tag it seems unnecessary to reference any parent node e.g. tr[text()='Wylaczenie nadan RDF']. Incase xpath as //button[#class='btn btn-xs'] doesn't identifies the element uniquely you can consider to club up the class and title attribute as follows:
button_to_click= findElement(By.xpath("//button[#class='btn btn-xs' and #title='Skip']")).Click();
I'm curious if you have an element higher in the dom with the same attributes and html elements as the XPath that you're attempting to select. Let's get super specific with our XPath and throw in some and conditions. Give this guy a shot:
//button[#ng-show='vm.enableSkip(row)' and #title='Skip' and #class='btn btn-xs']
If you need to add even more identifiers keep throwing them in there. There is nothing wrong with having very concrete XPaths.
It also looks like your button is in a table row. If there is anything unique in the tr element that contains the button you should definitely throw that in the xpath before the button and you wouldn't have to be concerned about it clicking a button in a previous tr, and in doing so you know you wouldn't need anything more than #title='Skip' for your uniqueness for the button portion of the XPath.
For example...
//tr[#attribute='uniqueTRValue']/button[#title='Skip']
I am trying to click on a button, but I get "element is not currently visible and so may not be interacted with", how can I fix this?
I tried using commands like:
driver.FindElement(By.Id("btnSave")).Click();
driver.FindElement(By.Xpath(".//*[#id='btnSave']")).Click();
sorry I did not understand how to use html properly in comments(just deleted all the <>)
button id="btnSave" class="btn btn-primary" type="submit" value="save" data-target="#" name="command"
i aria-hidden="true" data-icon="Z" /i
span class="title" Saugoti /span
/button
I just found out that there is a hidden element with the same id, so how do I deal with this situation?
This means that you've located the "Save" button that is invisible.
You should improve your location strategy. For instance, look for the button inside a specific form:
driver.FindElement(By.CssSelector("form#myform button#btnSave")).Click();
Or, just get all the buttons and choose the one by index:
driver.FindElements(By.Id("btnSave"))[1].Click();
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 using the following code for a "Back" Button:
<INPUT type="button" value="Button" onclick="window.history.back(); return true;">
But, on the Previous page I have two div elements. When the page loads it will show div1. The next time, when the button of div1 is clicked, div2 will show. On div2 I have a "Next" button. which redirects to the other page. I want code for a "Back" button, which will show div2 when Back is clicked. Also, If I use history.back() it will show div1.
HTML code
List all your liabilities as calculated on the day the debt was forgiven to
the debt was forgiven prior
NEXT
<div id="d2">
<table cellspacing="3">
<tr>
<td colspan="2" class="styleh">
<p>
<b>Part II. List the fair market value (FMV) of all your assets, calculated as of the
day prior to the debt being forgiven - this would be the "sell today, cash value."</b></p>
</td>
</tr>
<tr>
<td>
</td>
<td>
<button id="btncalc" onclick="return btncalc_onclick()">
Calculate</button>
<button id="Button2" runat="server">
BACK</button>
</td>
</tr>
</table>
</div>
Thank you in advance
Try it :
<INPUT type="button" value="Button" onClick="history.go(-1);return true;">
OR
You can also try Asp.net Wizard Control for your scenerio.You can handle NextButtonClick
PreviousButtonClick events through this control.
change return true; to return false;
I think you will have to maintain some state to accomplish this functionality...I would suggets you to use cookie for this..set cookie when you click second div and go to the next page (you would find lot of ways of setting cookie through javascript, Here is example) and when you go back to first page check this cookie and explicitly show the second div and immedietly clear that cookie so that it won't persist...this is the one way which came instantly in my mind...
If you want to remember what state the previous page was in, you'll have to use some sort of storage.
The methods I'm most familiar with is the session variable, but using it will require you to do the coding in the codebehind of the aspx page.
protected void url_onClick (object sender, EventArgs e) {
Session["state"] = "div2";
Response.Redirect("url_of_new_page");
}
Of course you'll have to create your page based on the state during Page_Load.
If you want do to it purely in javascript, you'll have to use cookies, which I can't explain unfortunately, but here's a link to w3schools.