I'm trying to make a button in a Bootstrap popover that passes a Razor value to another JavaScript function called killDatabase when running through a Razor foreach. The code produces a list of buttons that you can select but I also want to be able to hit a button and delete one of the options. The code doesn't throw any errors, and everything works perfectly except the fact that any of the delete buttons will always delete the last element, not the one that it's supposed to be associated with. I'm assuming this is because the function gets called on an onclick and so at that point #str is just the last element's name, but I'm wondering if there's any way to store that value to be unique for each element? I've tried adding a JavaScript variable within the foreach but still ran into the same problem.
<div class="btn-group-vertical btn-block" data-toggle="buttons" id="btns">
#foreach (var str in Model)
{
<div id="popover-content" hidden>
Are you sure you would like to permanently delete this query from the database?<br />
<button onclick="killDatabase('#str')" class="btn btn-primary btn-sm" style="float:left; margin-bottom: 10px;">Yes</button>
<button class="btn btn-sm btn-primary" style="float:left;">No</button>
</div>
<label class="btn btn-default" style="height:auto">
<div class="form-group" style="height:auto; padding-bottom: 10px;">
<input type="radio" name="query" value="#str" />
<span class="pull-left">#str</span>
<span class="pull-right">
<button class="btn btn-sm btn-danger" style="margin-top:-2px;" data-toggle="popover" title="Confirm Deletion" data-placement="bottom">
<span class="glyphicon glyphicon-trash"></span></button></span>
</div>
</label>
}
</div>
So I'm going to close this question because it was me being really confused about AJAX. That's what it boiled down to: I had a bad AJAX call and I was trying to do things on a popover that was initialized after the page was loaded so any time I would try and use the #str value in that popup, it would only take the most recent value. I've reworked the code into a more streamlined, less buggy design, and it works fine now. Thanks to everyone who tried to help
Related
My web application makes use of bootstrap, knockout and durandal. Below is a snippet of the rendered html, that defines a row with five columns. Irrelevant details are left out.
<div class="row list-row" data-bind="click: function(vm, event) { $(event.currentTarget).trigger('durandal-navigation'); }">
<div class="col-xs-2">
...
</div>
<div class="col-xs-2">
...
</div>
<div class="col-xs-6">
...
</div>
<div class="col-xs-1">
...
</div>
<div class="col-xs-1">
<button class="btn btn-default btn-xs deletebutton" data-bind="click: DeleteClicked">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
Now when the mouse hovers over any of those divs, the css in place lits up the entire row which is how it is supposed to be, and a click navigates to the desired screen with durandal. The latter, however, should not be the case when the user clicks the button in the last column: only the DeleteClicked function should fire.
Is there any way to suppress the navigation here?
I've found a quite simple way around it by using sessionStorage: DeleteClicked now contains the line
sessionStorage.setItem("cancelNavigation", true);
The part of the application that actually implements the navigation:
$(document.body).on('durandal-navigation', function (event) { ... }
...performs a check on the status of "cancelNavigation" before calling router.navigate(...); and in addition of course removes the cancelNavigation key from sessionStorage. Works perfectly!
I am automating my application using Selenium Ruby.The application has a 'Add Files' button to attach files. On clicking it, a system modal popup to Upload Files is displayed.However, just after that the code is stuck and i see the error "Error:#'<'Net::ReadTimeout: Net::ReadTimeout'>'" in the console.
Here is the html dom:
<div class="row fileupload-buttonbar">
<span data-test-id="button-add-files" class="btn btn-success fileinput-button mq">
<span>Add files...</span>
<input type="file" name="files[]" multiple="" data-enterkeydisabled="true">
</span>
<button data-test-id="button-delete-all-files" type="button" class="btn btn-danger delete mq">Delete All</button>
</div>
The xpath used to get the button is "//*[#data-test-id='button-add-files'].
I also tried using the Javascript functions
driver.execute_script("arguments[0].click();",xpath)
driver.execute_script("document.getElementsByClassName('btn btn-success fileinput-button mq')[0].click()")
Can someone help me on this?
Thanks
I have written an MVC5 Html extension to determine whether a button I have on screen is disabled.
It is as below:
public static HtmlString IsButtonEnabled(this HtmlHelper html, bool buttonEnabled)
{
return new HtmlString(buttonEnabled ? "" : "disabled=\"disabled\"");
}
My cshtml is as below:
<div class="col-sm-12">
<a class="btn btn-default btn-block btn-metro" #Html.IsButtonEnabled(Model.IsMyButtonEnabled)
onclick="location.href='#Url.Action("Index","MyController")'">
<img src="~/images/myImage.png"> <span class="h2">My Button</span>
</a>
</div>
The button is getting disabled as expected - however, due to using the onclick allows it to still be clicked. Is it possible to use my Html Extension with a Html.ActionLink?
I realise I could quite easily prevent the click using some js on the page - however, I would like to avoid that if possible.
UPDATE
The extension method is used by 10 different buttons on the screen. The generated markup for one of the buttons is as below:
<div class="col-sm-12">
<a class="btn btn-default btn-block btn-metro" disabled="disabled" href="/MyController/Index">
<img src="/myApp/images/myImage.png"> <span class="h2">My Button</span>
</a>
</div>
With Stephen comment below I change the on click to just be href - however, even though the button is disabled I can still click on it and the site navigates to the url specified
You could change the "a" tag to "button" tag. The URL tag is not meant to be disabled.
<div class="col-sm-12">
<button class="btn btn-default btn-block btn-metro" #Html.IsButtonEnabled(Model.IsMyButtonEnabled)
onclick="location.href='#Url.Action("Index","MyController")'">
<img src="~/images/myImage.png"> <span class="h2">My Button</span>
</button>
</div>
Related:
Make a link use POST instead of GET
Making href (anchor tag) request POST instead of GET?
How can I make it so that, when a user clicks a link, he is redirected to a new page, along with whatever was the input on the previous page? I have to work with POST requests, and I do not want to use any hidden forms (or any additional forms for that matter), as was suggested in the linked (and many other SO) answers. Is this even doable?
My current setup (which I'm not allowed to change much) is as follows:
<form role="form" id="myForm" method="post" action="stuff.php">
<div class="form-body form-body-dark">
<div class="form-actions">
<div class="row">
<!-- various inputs go here -->
<input type="text" name="userID">
</div>
<div class="row">
<div class="col-md-6 col-xs-6">
<button type="submit" id="doStuff" class="btn btn-primary btn-lg btn-block"><i class="fa fa-check"></i> Submit</button>
</div>
<div class="col-md-6 col-xs-6">
<a href="index.php" id="cancel" class="btn btn-danger btn-lg btn-block"><i class="fa fa-refresh"></i> Cancel
</a>
</div>
</div>
</div>
</div>
</form>
Now, I need to add another way of submitting part of the same input, but to another php page. I'd like to do that with an anchor tag, and with POST request. The block of code which should that is inserted before the first button (Submit), but in the same form:
HTML
<div class="col-md-4 col-xs-4">
<a onclick="goToOtherPage()" id="details" class="btn btn-success btn-lg btn-block">
<i class="fa fa-table"></i> Details
</a>
</div>
jQuery
function goToOtherPage() {
var otherPage = "details.php";
$.post(otherPage, {
'userID': $('#userID').val()
}
}
Adding window.location.href = 'details.php' inside the function, right after passing userID, opens the new page, but without the parameters I'd like to pass.
I've thought about setting and unsetting cookies, and bypassing the whole POST/GET issue, but that's not a viable option.
Instead of cookies, you can use SessionStorage API to save some data on one page, and access that on another. Take a look at sessionStorage MDN.
Simply in your goToOtherPage callback save any data as such:
sessionStorage.setItem('formData', {});
And later on, on the next page, you can access the data saved on the previous page via:
sessionStorage.getItem('formData');
I'm working on a project with bootstrap and I'm trying to figure out how to get a button that shows:
-Text left aligned (pull-left makes sense here I think)
-A badge right aligned with a number (pull right makes sense here)
This works great but the problem is most of my buttons have names that are ideal for a two-line button. Everything looks great on one line but as soon as the text gets too long or the button gets too short, it kicks the text to another line and the top text looks centered instead of pulled left. This looks good:
<div style="width:300px;margin:10px">
<button type="button" class="btn btn-primary btn-block" style="font-weight:bold;white-space:normal;">
<span class="pull-left">Under Investigation </span><span class="badge pull-right">5</span>
</button>
</div>
This looks bad (button is too narrow, text on top doesn't pull left):
<div style="width:150px;margin:10px">
<button type="button" class="btn btn-primary btn-block" style="font-weight:bold;white-space:normal;display:inline-flex;">
<span class="pull-left">Under Investigation </span><span class="badge pull-right">5</span>
</button>
</div>
Fiddle: https://jsfiddle.net/rjerskine/ay9L512h/2/
Solution:
I ended up having to wrap the text in another div which is fine and works great when the window resizes. The text kicks to two lines and the badge stays on one line. I'll end up writing this with proper classes but here's the solution for anyone with a similar question:
<div class="col-sm-2">
<button type="button" class="btn btn-primary btn-block" style="font-weight:bold;">
<div class="pull-left" style="text-align:left;width:calc(100% - 30px);white-space:normal;overflow:hidden;">
Under Investigation
</div>
<span class="badge pull-right" style="display:inline-flex;">5</span>
</button>
</div>
Use text-align:left on that button.
button span.pull-left {
text-align: left
}
Fiddle