I have this code on my View
<h2>#ViewBag.FileContent</h2>
#using (Html.BeginForm("ShowWebSiteLinks", "Home"))
{
<label>WebSite URL:</label>
<input type="text" id="ft" name="fturl" value="http://localhost/search/?sr=100" style="width:350px"><br>
<label>Save to file:</label>
<input type="text" id="filename" name="links_filename" value="links.txt" style="width:200px"><br>
<input id="btnSubmit" type="submit" value="Start" />
}
After i click on submit button, controller call function fine, but submit button stays enabled. I want to prevent multiple clicks on button and want to disable it but not sure how. Ive tried with this javascript but it does not work.
$(document).ready(function () {
$('btnSubmit').click(function (e) {
$(this).attr('disabled', true);
});
});
Can someone help me with this?
Your javascript is almost correct, but the selector is wrong. Try this:
$(document).ready(function () {
$('#btnSubmit').click(function (e) {
$(this).prop('disabled', true);
});
});
Notice the "#" in the selector. This tells jQuery to find by element ID. If you don't put the "#" it will find by element name (i.e. "input", "div", etc...)
Edit:
Here's a good cheat sheet on selectors: http://refcardz.dzone.com/refcardz/jquery-selectors
Edit 2:
Update to use "$(this).prop(...)" rather than "$(this).attr(...)"
Edit 3:
I recommend you place your javascript code at the end of the page (not the head). Something like this:
<html>
<head>[...]</head>
<body>
[...]
<script type="text/javascript">
$(document).ready(function () {
$('#btnSubmit').click(function (e) {
$(this).prop('disabled', true);
});
});
</script>
</body>
</html>
The above answer isn't working for me. I've noticed that if you bind to the click event and immediately disable, you'll actually prevent the form submission from happening.
Instead, I do the following:
<script type="text/javascript">
$(document).ready(function () {
$('#btnSubmit').click(function (e) {
$(this).prop('hidden', true);
});
$('#myform').bind('invalid-form.validate', function () {
$('#btnSubmit').prop('hidden', false);
});
});
</script>
That hides your submit button when the action is clicked but still allows the action to go through. The second statement is there to re-show the button if validation fails. More details on that can be found here: ASP.net MVC Validation Hook
Related
I have several buttons on a page which are hooked to the same method webcamSendRequestButton
<button v-on:click="webcamSendRequestButton" value="0" type="button" class="webcam-send-request-button" :disabled="disabled">Verify</button>
<button v-on:click="webcamSendRequestButton" value="1" type="button" class="webcam-send-request-button" :disabled="disabled">Verify</button>
<button v-on:click="webcamSendRequestButton" value="2" type="button" class="webcam-send-request-button" :disabled="disabled">Verify</button>
<button v-on:click="webcamSendRequestButton" value="3" type="button" class="webcam-send-request-button" :disabled="disabled">Verify</button>
and I am making an ajax call when the button is clicked. In jquery or JS it is pretty straightforward to get the value of button when clicked using $(this).val();
How do I fetch the value of the button when it is clicked in vue?
var app = new Vue({
el: '#my-div',
methods: {
webcamSendRequestButton: function() {
const buttonValue = ??? // How do I fetch the value over here
$.ajax({
url: "someurl",
type: "POST",
data: {
value: buttonValue
},
success: function (data) {
// Omitted for brevity
}
});
}
}
});
A better answer than the previous ones I believe is to inject the original DOM '$event' variable into your handler call:
v-on:click="webcamSendRequestButton($event)"
And receive it in your handler:
methods: {
webcamSendRequestButton: function(e) {
const buttonValue = e.target.value;
.
.
.
}
}
This is better for two well-connected reasons.
First, the code now has the same reasoning behind the initial intention: When a button is clicked, the handler should be able to read the value of the button that initiated the event. Other solutions that pass the value statically to the handler only mimic this, thus being more or less a hack.
Second, because the code now exactly matches the initial intention, the code becomes more maintainable. For example, if the value of each button gets to change dynamically by being bound to a variable value instead of a static value, the handler needs not to be changed at all. If the buttons grow or shrink in number, there is no need to change the handler code or define extra references or change the syntax of the handler call.
You can simply give it as an argument to the function.
<button v-on:click="webcamSendRequestButton(0)" type="button" class="webcam-send-request-button" :disabled="disabled">Verify</button>
JS
...
methods: {
webcamSendRequestButton(value){
//"value" is the clicked button value
}
}
...
You can give your button a reference that Vue can access by giving it a tag ref="yourRef". Then you can access the value inside of your called function with this.$refs.yourRef.value.
Works for other Input elements as well ;)
I have a button group, and three buttons in it. I wanted to get the string from each button button when there is a change, and change my attribute to that string value when there is a change in button. I used #change event of vuejs and it worked for me. I will be pleased if it will be helpful for someone else too.
In template:
<div class="btn-group">
<button
type="button"
class="btn btn-md light btn__border"
v-on:change="latestType = 'week'"
>Week</button>
<button
type="button"
class="btn btn-md light btn__border"
v-on:change="latestType = 'month'"
>Month</button>
<button
type="button"
class="btn btn-md light btn__border"
v-on:change="latestType = ''"
>All</button>
</div>
In Js (script tag):
...
data() {
return {
latestType:''
}
}
...
One improvement over the accepted answer by reinarg is to access the button's value directly using event.srcElement. This way you don't have to pass an argument into webcamSendRequestButton in the template. In fact, the OP wouldn't have to change the template at all and would have to change only one thing in the method:
webcamSendRequestButton: function() {
const buttonValue = event.srcElement.value // This provides the button's value
$.ajax({
url: "someurl",
type: "POST",
data: {
value: buttonValue
},
success: function (data) {
// Omitted for brevity
}
});
}
This also avoids having to enter the same value in two places for each button (once in the value attribute and again as an argument for the webcamSendRequestButton method).
see the attachement
I have records populated and having a following button on each row which has v-on:click="unfollow(dynamic_value)"
I want to change the button to 'Follow' after the click and on successful Ajax response like
I have no idea how to do that in vue.
Any help is appreciated.
I would suggest that you create a component for your records (see https://v2.vuejs.org/v2/guide/components.html)
You could create a component for each record with a boolean named "followed" in the data of your component and on the v-on:click directive write a ternary condition where both methods would make an ajax call and on the success callback it would change the state of the boolean.
Vue.component('follow-btn', {
template: '#follow-btn-template',
data: function () {
return {
followed: false
}
},
methods: {
follow: function (dynamic_value) {
// Ajax call and on success => change this.followed to true
},
unfollow: function (dynamic_value) {
// Ajax call and on success => change this.followed to false
}
}
})
:
<script id='follow-btn-template' type="text/x-template">
<button v-on:click="followed ? unfollow(dynamic_value) : follow(dynamic_value)">
{{followed ? 'Following' : 'Follow'}}
</button>
</script>
or use a conditional directive
<script id='follow-btn-template' type="text/x-template">
<button v-if="followed" v-on:click="unfollow(dynamic_value)"> Following</button>
<button v-else v-on:click="follow(dynamic_value)"> Follow</button>
</script>
For the ajax call you either use jQuery, vue-resource or Axios.
I am creating simple stuff seeking for capturing button click event to some text or get some alert. ReactJS JSX code is pasted below:
var SearchBar = React.createClass({
getInitialState: function() {
return {message: "test"};
},
test1: function(e) {
alert('hi');
this.setState({message: "New Message"});
},
render: function() {
var self = this;
return (
<div>
<button onClick={self.test1}>Change Message</button>
{this.state.message}
</div>
);
},
});
I use above SearchBar component in MVC cshtml as:
#Html.React("SearchBar", new{ })
Button get rendered on html page, but unable to change this.state.message value on click event. Where am I doing mistake?
There are two things that need to care about this issue
Add all jsx file uwins Script tag or using bundle in cshtml or in Views\Shared_Layout.cshtml file. e.g.
#System.Web.Optimization.Scripts.Render("~/bundles/main")
Call #Html.ReactInitJavaScript() method after that.
Now Click event surely get work.
Maybe you desire so:
render: function() {
return <div>
<button onClick={this.test1}>Change Message</button>
{this.state.message}
</div>
}
Use this instead self
Ello!
I have an app bar icon and on the click event - I added a function which has the following code:
function homePage() {
WinJS.Navigation.navigate("/home/homePage.html");
}
Now I have two files - homePage.html which is inside /home/ and the js file for the same.
There's a simple button on html of id NextPage.
While in the homePage.js file, I have:
function () {
"use strict";
WinJS.UI.Pages.define("/home/homePage.html", {
ready: function (element, options) {
var button = document.getElementById("NextPage");
button.addEventListener("click", GoToNextPage);
}
});
function GoToNextPage() {
WinJS.Navigation.navigate("/default.html");
}
})();
But when I click the app bar icon - nothing happens :(
So what I plan to accomplish is that when someone clicks an appbar icon on default.html - the user switches to homePage.html (and then when I click the homePage button - it goes back) - but not even the initial page transfer is taking place.
This is embarrassing to ask but I can't just fold my hands and wait for something magical to happen. I have been working on this for an hour - read videos and samples but it's not working at all.
Would appreciate help - I can't figure out what's going wrong. Thanks!
The WinJS.Navigation namespace provides state and history management, but it doesn't actually do the navigation itself. To move from one page to another, you need to define a handler function for one of the events in the WinJS.Navigation namespace - this lets you respond to call to the WinJS.Navigation.navigate method in a way which makes sense for your app.
As a demonstration, here is a homePage.html file which has a NavBar containing a command that will be the trigger for the navigation.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>NavProject</title>
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/homePage.js"></script>
</head>
<body>
<div id="contentTarget">
<h1>Select a page from the NavBar</h1>
</div>
<div id="navbar" data-win-control="WinJS.UI.AppBar"
data-win-options="{placement:'top'}">
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'NextPage', label:'Next Page',
icon:'\u0031', section:'selection'}">
</button>
</div>
</body>
</html>
Along with the NavBar, I have defined the div element whose id is contentTarget. This is the place in my content where the new file will be loaded when the user clicks the NavBar command.
CLARIFICATION: All of the content that you want replaced needs to go into the contentTarget element. Otherwise you'll get a mix of old and new content displayed.
And here is the JavaScript file which wires it up (this is the homePage.js file which I added a script element for in the HTML file above):
(function () {
"use strict";
WinJS.Navigation.addEventListener("navigating", function (e) {
var elem = document.getElementById("contentTarget");
WinJS.UI.Animation.exitPage(elem.children).then(function () {
WinJS.Utilities.empty(elem);
WinJS.UI.Pages.render(e.detail.location, elem)
.then(function () {
return WinJS.UI.Animation.enterPage(elem.children)
});
});
});
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
app.onactivated = function (args) {
args.setPromise(WinJS.UI.processAll());
navbar.addEventListener("click", function (e) {
if (e.target.id == "NextPage") {
WinJS.Navigation.navigate("/nextPage.html");
}
}, true);
};
app.start();
})();
Notice how I have added a handler function for the WinJS.Navigation.navigating event. This event is triggered by a call to WinJS.Navigation.navigate and details of the navigation target are contained in the detail.location property of the event object.
In this example, I clear out any content in my target element and replace it with the contents of the target file and animate the transition from one to the other.
You only have to define one handler for the event. This means that if I have elements in nextPage.html that will lead to navigation, I just need to call WinJS.Navigation.navigate without needing to create a new event handler, like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
WinJS.UI.Pages.define("/nextPage.html", {
ready: function () {
back.addEventListener("click", function () {
WinJS.Navigation.navigate("/homePage.html");
});
}
});
</script>
</head>
<body>
This is next page.
<button id="back">Back</button>
</body>
</html>
I am using jquery jqModal script for popup windows.
I have one html page with two jqModal windows. I would like one to load when the page opens, and another one opens separately via onClick.
My script is not working. The onLoad works (#success), but the onClick (#dialog) opens both up at the same time.
Here is my current script:
<script type="text/javascript">
$(document).ready(function() {
$('#dialog').jqm();
$('#success').jqm().jqmShow({});
});
</script>
here is the updated code u can try
$(document).ready(function() {
$('#dialog').jqm( {trigger:'#dialog'} );
// $('#dialog').jqmAddTrigger('#dialog');
$('#success').jqm().jqmShow({});
});
Let me know if its working for you
Here you need to add trigger when the modal window will open up
The code you presented works without problems for me. Here is the complete snippet I used:
<script type="text/javascript">
$(document).ready(function() {
$('#dialog').jqm();
$('#success').jqm().jqmShow({});
});
function showModal() {
$('#dialog').jqmShow({});
}
</script>
<div id="dialog" class="jqmWindow">test</div>
<div id="success" class="jqmWindow">test</div>
<input type="button" value="Show Modal" onclick="showModal()"/>