I am using plain vanilla client side validation of my MVC5/Bootstrap3/Jquery validation form, and I would like to present a spinner om submission - but only if all validation has passed.
Is that possible?
TIA
S. Dalby
Yes, you can do this by hooking to the form's submit event, and then check if the form is valid.
$(function () {
$('#myForm').submit(function () {
var $this = $(this);
if($this.valid()) {
// show loading, spinner, whatever.
}
});
});
Related
Are all button control has to be post method? or we can set it to get method, for example, I want to see an employee details by giving employeeId and click submit button
There is no difference between GET and POST method. They both provide url and parameters. POST method only have some advantages and some restrictions.
If your button is on form (as in classic asp.net), and there is no javascript handler for this button - only POST method can be here.
If you create jquery code (or pure javascript), that overrides default behaviour of the button, you can select what method use: POST or GET
<script>
$('#button').click(function() {
$.ajax({
url: '....',
data: { ....},
type: 'GET', //or 'POST'
success: function(res) {
//all fine
},
error: function() {
//invalid url or server error
}
};
return false; //to avoid default submit
});
</script>
Hi am a very beginner to AngularJS. I tried AngularJS in my ASP.NET application. I assigned a textbox with ng-modal and bind its values to a div in realtime without any issue. but the trouble is if I set some values to the textbox from server side its getting cleared for that textbox.
txt_surveyname.Text = "123"
But when rendering the html, it is empty.
This is the markup of the textbox
<asp:TextBox runat="server" ID="txt_surveyname" ng-model="surveyname" ClientIDMode="Static" CssClass="form-control" />
But when I remove the ng-modal, the textbox shows the value from server side. How can I solve this issue?
This is a simplistic AngularJS Ajax example, I haven't tied in the ASP.NET application. I just wanted to show how AngularJS likes to work with server side information.
AngularJS:
// Angular setup
var app = angular.module('myApp', []);
// AngularJS Controller
app.controller('mainCtrl', ['$scope', 'myService', function ($scope, myService) {
// Initialize scope object
$scope.txt_surveyname = {};
// Call the service to retrieve server data
// currently setup to call as soon as the controller is loaded
myService.getData().then(
// On Promise resolve
function (response) {
// Notice how I am assigning to `data`
// that way I can add debug reponse information to the response array if necessary
$scope.txt_surveyname = response.data;
},
// On promise reject
function () {
// Handle any errors
});
}]);
// Services to handle AJAX requests
app.service('myService', ['$q', '$http', function ($q, $http) {
// return an object
return {
getData: function () {
// Start a promise object
var q = $q.defer();
// Connect to the server to retrieve data
$http.get('path/to/file.php',
// On Success
function (response) {
q.resolve(response);
},
// On Error
function (response) {
q.reject(response);
});
return q.promise();
}
};
}]);
Server Side Response path/to/file.php:
<?php
$sample = array (
'data' => array (
'Text' => '123'
)
);
echo json_encode($sample);
There are other ways (hacks, if you will) that will allow you to assign data to AngularJS on page load, but the above is the preferred.
There also may be a better way with ASP.NET but I haven't used ASP.NET and AngularJS together yet, other than a little playing around here and there.
Possibly Helpful Links:
https://stackoverflow.com/a/20620956/1134705
AngularJS in ASP.NET
How to use AngularJS in ASP.NET MVC and Entity Framework
I am using Ajax.BeginForm to post a form and the last event triggered before the form is sent is the onBegin event.
onBegin event is triggered after the form is serialized to be posted.
I need control over this form but I am not able to create my own submit event
ex.:
$('#myForm').submit()
Question:
Is there a way to manipulate the serialized form before it is sent?
You can modify jquery.unobtrusive-ajax.js section that serialize form:
$("form[data-ajax=true]").live("submit", function (evt) {
var clickInfo = $(this).data(data_click) || [];
evt.preventDefault();
if (!validate(this)) {
return;
}
asyncRequest(this, {
url: this.action,
type: this.method || "GET",
data: clickInfo.concat($(this).serializeArray())
});
});
I am using #ajax in submit button of a form created using FAPI. Now when user submits the form, I want to run some jQuery validation before the form is submitted through ajax. As #ajax prevents events related to submit button such as submit, click, mousedown, keypress etc. I am not able to catch submit event using jQuery.
For now as a workaround, I have added custom code in ajax.js (misc/ajax.js) :
Drupal.ajax = function (base, element, element_settings) {
...
beforeSubmit: function (form_values, element_settings, options) {
//my custom code
alert(1);
...
This is against drupal best practices as I am hacking the core. Please any one can help me to do the same from my custom js file or any other approach to validate the content before ajax submit.
I think the accepted answer on the following post answers your question: How to extend or "hook" Drupal Form AJAX?
(function($) {
Drupal.behaviors.MyModule = {
attach: function (context, settings) {
// Overwrite beforeSubmit
Drupal.ajax['some_element'].options.beforeSubmit = function (form_values, element, options) {
// ... Some staff added to form_values
}
//Or you can overwrite beforeSubmit
Drupal.ajax['some_element'].options.beforeSerialize = function (element, options) {
// ... Some staff added to options.data
// Also call parent function
Drupal.ajax.prototype.beforeSerialize(element, options);
}
//...
i put this in the attach function
for (var base in settings.ajax) {
Drupal.ajax[base].options.beforeSubmit = function(form_values, element, options){
console.log('call your func');
}
}
it works!
I am having no luck in getting a jqueryui dialog to ajax load a form, which inturn submits via ajax.
Everything works upto the point of catching the form that is being submited and instead sending it through an ajax call. Thus the form action is triggered and the browser redirected. The ajax call is never made.
My code is as follows
$(document).ready(function() {
$('.viewOrder').click(function() {
$('#displayOrder').load(this.href, [], function() {
console.log("landed here");
$('#blah').click(function() {
console.log("submiting the form via ajax");
$.ajax({
url: "/ajax/orderupdate",
type: "GET",
data: data,
cache: false,
//success
success: function (data) {
console.log("worked:");
}
});
return false;
});
});
return false;
});
});
.viewOrder is the a href that is ajax loaded. This works fine.
I have read many similar questions on here and it seems load() does not execute scripts that are embeded in the return html, but my return code is pure html no scripts. Any ideas?
IMHO you should try and capture the submit instead of the click, that way you prevent submits done by keyboard aswell, and it might even fix your problem.
The events are bound on page load. At page load the form you are binding the click event does not exist. I use the livequery plugin but they added Live to jquery 4 which you can also use(i had some issues with IE so i went back to livequery)
So load livequery with your scripts http://docs.jquery.com/Plugins/livequery
and change
$('#orderUpdate').submit(function() {
to
$("#orderUpdate").livequery("submit", function() {