I have the following code that i would like to execute when the user loads the page. The code is currently for a update button that the user clicks and updates some values on the webpage. The user would like to do this without having to click on the update button.
using (Html.BeginForm("UpdateProductionData", "Home", FormMethod.Post))
{
<h3>Date :</h3> <input type="text" id="dp" name="dp" />
<input type="submit" value="Update"/>
}
I have tried looking at jquery. I am wondering if this is possible inside razor.
Related
I have a page with table. Each table row, has two links "delete", and "edit". "delete" works fine.
I would like to do this scenario:
When user clicks on row "edit" link, a small window appears with the fields of this row.
User decide to edit or not.
User may press "Save Changes", or "Cancel".
I did the option of small window with JavaScript document.createElement(), and the window appears successfully.
But I would like to add helpers for "Save Changes", and "Cancel" buttons.
I can't do this using helpers
Template.codesList.events({
'submit form#newForm': function (events) {
// some actions
};
},
'click #edit': function () {
var px = 'px';
// Create an Overlay
var myOverlay = createOverlay();
document.body.appendChild(myOverlay);
// Create edit window display it over the Overlay
var editWindow = createPopup(300, 400);
// Create elements and append it to edit window
var editForm = editWindowForm(this._id, this.name);
editWindow.appendChild(editForm);
document.body.appendChild(editWindow);
},
'click #delete': function () {
if (confirm("Are you sure?")) {
Codes.remove({_id: this._id})
}
},
'submit form#editForm': function (event) {
event.preventDefault();
console.log("Clicked"); // This doesn't displayed
}
});
And this is the form after displaying it.
<form id="editForm" style="margin-right: 3em; margin-left: 3em;">
<div class="form-group">
<label for="itemCode" class="control-label">Code</label>
<input id="itemCode" name="itemCode" class="form-control" placeholder="Enter code">
</div>
<div class="form-group">
<label for="itemName" class="control-label">Name</label>
<input id="itemName" name="itemName" class="form-control" placeholder="Enter name">
</div>
<input type="submit" value="Save Changes" class="btn btn-primary">
<input type="button" value="Cancel" class="btn btn-info">
</form>
But when I press on "Save Changes" button, no print from console.log() and the form is making the normal submit and the page reloads again.
So, what I'm missing?
By the way that's the output of the console:
document.querySelector('form#editForm')
<form id="editForm" style="margin-right: 3em; margin-left: 3em;">…</form>
Define edit form as a template. Use event handlers as usual to handle save and cancel button clicks.
To render it, either just put it inside the page template with '#if sessionEditPopup' or if you must do it yourself then use UI.renderWithData docs here
BTW manually modifying DOM using jquery etc is something to be avoided unless there is no other way and is not the Meteor way of doing things.
Add event on click save the data into Session because Session can access globally.
And Take the data from Template.name.Healper using session,
So when u change the session value that will automatically change your page content.
Here is the link may be useful for U
http://meteortips.com/first-meteor-tutorial/sessions/
I have a form in my ASP .NET project that takes the users input, and appends it to a URL to search a wiki. The form works perfectly when you enter in a search term, and click the 'search' button, however when you type into the input box and hit enter, the page refreshes and the box clears.
my html
<form>
<label id="sideBarLabel"> Services
<input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
</label>
Search Wiki
</form>
my js
function searchWiki(){
var siteQuery = $('#query-string').val();
window.location.href = "/dosearchsite.action?queryString=" + siteQuery;
}
Can anyone help ?
Your searchWiki() js method is only called when the evenement onclick is raised on your button, but not when your form is submitted.
There is several ways to achieve what you want:
Add a js method to catch the onsubmit event of your form:
$("form").on("submit", searchWiki());
Or add a tag on your form:
<form onsubmit="searchWiki()">
Or specify the action attribute on your form:
<form action="/dosearchsite.action">
Note that in ASP.NET, the ModelBinder will link your form inputs to your controller action parameters, using the name attribute of the inputs. That means that you should not specify them in the url yourself.
You should also declare your form using Html.BeginForm or Ajax.BeginForm if you want your form to be submitted by ajax.
#Html.BeginForm("ActionName", "ControllerName")
{
<label id="sideBarLabel">Services
<input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
</label>
<input type="submit" class="button" value="Search Wiki"/>
}
This will call searchWiki when you press enter.
$('#query-string').keypress(function(event) {
if (event.keyCode == 13) {
searchWiki();
event.preventDefault();}});
I am working on an ASP website. I want to disable a button after the user clicks the button.
If the users click the button twice by mistake, the DetailsPage.ASP is executed twice and duplicate entries are inserted into Database.
How to disable a button in ASP code to prevent the users from clicking twice?
Page1: Mainpage.asp page
<form action="DetailsPage.asp" method="POST">
<input type="Submit" name="Submitbutton" value="Update Details">
How to prevent the users from clicking the button twice or alert them if they try to click second time?
Another other suggestions to handle this type of scenario will be helpful.
Thanks in advance.
Thanks
Ashok
<% dim disabled
If request.form("Submitbutton") <> "" Then
disabled = " disabled"
End If %>
Then code your button like this
<input type="Submit" name="Submitbutton" value="Update Details" <%=disabled%>>
Add a handler for the form in JavaScript;
function submitForm(form)
{
form["Submitbutton"].disabled = true;
return true;
}
Attach it:
<form action="DetailsPage.asp" method="POST" onsubmit="submitForm(this);">
I want to have a top menu with New, Save, Cancel buttons and below, 3 different entry forms, similar to a "desktop application". When form1 is filled up, Save button would submit the form. Also, if form2 or form3 are filled up, the same Save button can submit the form, taking into account that is in a different form.
Is it possible to do this, a submit button outside form tags ?
If not, any suggestion how to fake submit?
Thanks for your help
You just have to trigger the submit event with .submit in jQuery by example.
Here is the doc : http://api.jquery.com/submit/
Instead of an <input type="submit"> button or jQuery call you could use the new HTML5 <button> element and its form attribute to specify which form(s) the button belongs to. Then just set its formaction attribute to the required destination. Documentation
Example:
<form id="form1">
...
</form>
<form id="form2">
...
</form>
<form id="form3">
...
</form>
<button form="form1 form2 form3" formaction="processForm.php" formmethod="POST">
Submit
</button>
You can use
$("#formId").submit(function() { /*your stuff*/ });
I am new to jQuery, trying to populate a GridView or Telerik RadGrid using jQuery. Not sure how to go about it and unable to find any examples. Any help is appreciated. Thanks.
Essentially I am trying to display a modal window with a textbox and button. The user enters a search criteria presses the button and a gridview in the same modal window is populated with the results.
The user than selects records in the grid presses another button and the selected users are inserted into the database table, modal window is closed and a grid on the parent page is refreshed showing the new added users.
<input type="button" id="btnAddNewUserj" value="Add New User" />
$(document).ready(function() {
$("#btnAddNewUserj")
.click(function() { ShowNewUserDialog(); return false });
$("#btnSearch")
.click(function() { FindUsers(); return false });
});
function ShowNewUserDialog() {
$("#newuserDialog").dialog({ modal: true, bgiframe: true }).dialog("open");
}
function FindUsers() {
// HOW TO DO THIS?
// Show selectable list of users from the database in grid.
}
<div id="newuserDialog" title="Add New User" style="display:none;">
<div>
<input id="txtSearchFor" type="text" />
<input id="btnSearch" type="button" value="Search" class="Button" /></div>
<p> DISPLAY RESULTS HERE </p>
<div style="margin:10px 6px;">
<input type="button" id="btnjAdd" value="Add" class="Button" />
<input type="button" id="btnjCancel" value="Cancel" class="Button" />
</div>
</div>
A couple of thoughts here. You cannot populate a GridView or Telerik Grid using jQuery. jQuery is a client side technology and those two grids are server side.
You can use jQuery to hit a web service and build out and HTML table with the results (which is basically what a GridView does).
I'm guessing however, that you would be better served just using native GridView databinding. You can use a .Net UpdatePanel around the grid if you want to prevent full post backs.
I think telerik is not the answer.
Use telerik radgrid's client side binding, see this for an example: http://demos.telerik.com/aspnet-ajax/grid/examples/clientbinding/defaultcs.aspx
Note that sample shows how to bind to a WCF Web Service and an ADO.NET Data Service. There are other samples around.
Other variations of binding: http://demos.telerik.com/aspnet-ajax/grid/examples/client/declarativedatabinding/defaultcs.aspx
More on client side binding: http://demos.telerik.com/aspnet-ajax/grid/examples/client/databinding/defaultcs.aspx