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
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 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*/ });
Hi I've a kendo grid with country and state details. And I've a toolbar with add button. When I click on add new button, I'm getting a popup with country and state dropdowns. Now I want to select country then state. But here I want to load states based on country selection. Here is my sample code. It is not working.
function loadStates(element) {
// here I want to update below model
StateModel.StatesByCountry
something like this.
StateModel.LoadStatesByCountry($(element).val(), function () {
});
}
<script id="popup_editor" type="text/x-kendo-template">
<div class="k-edit-label">
<label for="Country">Country</label>
</div>
<input name="CntryName"
data-bind="value:CntryName"
data-value-field="Value"
data-text-field="Text"
data-source= CountryModel.AllCountries
data-role="dropdownlist"
onChange="loadStates(this)"
/>
<div class="k-edit-label">
<label for="State">State</label>
</div>
<input name="StateName"
data-bind="value:StateName"
data-value-field="StateID"
data-text-field="StateName"
data-source=StateModel.StatesByCountry
data-role="dropdownlist" />
</script>
Every time you have a country selected, you can filter the states available, so you don't have to care about it in the next popup.
See examples here http://docs.kendoui.com/api/framework/datasource#methods-filter
I am working on a Spring WebFlow project that is using Dojo (dijit) for the forms and if the user does now fill in a textfield that is required the field does turn red on the click of the submit button. But radio buttons and checkboxes dont..
1) How can I make a radio button and checkbox act like text fields and turn red?
2) How can I change the following code popup a messages that the user has to fix some text fields.
<input type="submit" name="_eventId_submit" id="submit" value="Submit" tabindex="11" />
<script type="text/javascript">
Spring.addDecoration(new Spring.ValidateAllDecoration({
elementId : 'submit',
event : 'onclick'
}));
</script>
for 2) you can use Spring.validateAll() instead of the ValidateAllDecoration. (you have to remove the ValidateAllDecoration)
the function Spring.validateAll() return true or false depending on the validation results.
something like that on the onClick:
onclick="if(!Spring.validateAll()){alert('errors')}else{Spring.submitForm(...)}"
should work