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
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
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 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
I've been learning RoR for a few months now and I've run into a weird problem involving Rails and javascript.
The HTML appears to contain the correct URL, but clicking the link goes to localhost instead.
The link in my Rails app is first generated correctly with rails, then replaced using replaceWith()
This is the original html generated by rails
<a id="bookmark_button_16" class="btn btn-success" href="http://www.google.com">
<span class="glyphicon glyphicon-play"></span>
</a>
This is the javascript/ruby used to replace the DOM node
// updates the url of the button
$("#bookmark_button_<%= #bookmark.id %>").replaceWith("<a id='bookmark_button_<%= #bookmark.id %>' class='btn btn-success' href='www.example.com' ><span class='glyphicon glyphicon-play'></span></a>");
The following is copied straight from the dev console in chrome after execution of the javascript
<a id="bookmark_button_16" class="btn btn-success" href="www.example.com"><span class="glyphicon glyphicon-play"></span></a>
But clicking on the button goes to
localhost:3000/topics/www.example.com
instead of the intended http://www.example.com
It should include the protocol HTTP in the href attribute.
It should be:
<a id="bookmark_button_16" class="btn btn-success" href="http://www.example.com">
Instead of:
<a id="bookmark_button_16" class="btn btn-success" href="www.example.com">
I'm just learning how to use html and css and my teacher has asked us to use Bootstrap. It's really cool, obviously, but when I try to make a button, only the text within the button actually acts like a link as opposed to the whole rectangular button. I'm not sure if I need more than just the minified bootstrap javascript file to make them work or what.
Here's my html, and I also added the line "$('.nav-tabs').button()" to my head as well as the javascript file from bootstrap. Any advice? I know my html is probably pretty janky, my teacher isn't the best at explaining things so I've just been fiddling with things until they seem to work.
<div class="btn-toolbar">
<div class="row-fluid">
<div class="span2 offset2">
<div class="btn btn-primary">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20profile%20-%20final.html">
Profile
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20writing%20-%20final.html">
Writing
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20music%20-%20final.html">
Music
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20photos%20-%20final.html">
Photography
</a>
</div>
</div>
</div>
remove the class="btn btn-primary" from the div tag, put it on the a tag
see http://twitter.github.com/bootstrap/base-css.html#buttons
...typically you'll want to apply these to only <a> and <button> elements for the best rendering.
Looks like you are not adding the class on the a tag.
You need to use something like this New button This should give you a button with the text New button.
You use Big Button
For a large blue button.