Onsubmit I want to fire fancybox popup
I need only to show the fancybox popup once form is VALIDATED (JQUERY Validate used)
It seems to popup the fancybox popup only when the form is not filled in correctly!
http://gloss-hair.com/old/owl/OWLFORM.html
I am not sure how to load the popup fancybox function only once the form is validated:
<script type="text/javascript">
$().ready(function() {
// validate the competition form when it is submitted
$("#ie9_competition").validate({
errorPlacement: function (error, element) {
if ( element.is(":checkbox") ) {
error.appendTo( element.closest('div') );
}
else {
error.insertAfter(element.parent().find("label"));
}
},
rules: {
sEmail: {
required: true,
email: true
},
}
});
});
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox4").fancybox({
'hideOnContentClick': true
});
});
</script>
jQuery Validation plugin lets you define submitHandler which executes if a form is valid:
submitHandler: function(form){
form.submit(); // submit the form
// code to show your fancybox here
}
Your validate() code will look like this:
$("#ie9_competition").validate({
errorPlacement: function (error, element) {
if ( element.is(":checkbox") ) {
error.appendTo( element.closest('div') );
} else {
error.insertAfter(element.parent().find("label"));
}
},
rules: {
sEmail: {
required: true,
email: true
}
},
submitHandler: function(form){
form.submit(); // submit the form
// code to show your fancybox here
}
});
You can see all available options for validate() method here: http://docs.jquery.com/Plugins/Validation/validate#toptions
Try like this
$().ready(function() {
// validate the competition form when it is submitted
$("#ie9_competition").validate({
errorPlacement: function (error, element) {
if ( element.is(":checkbox") ) {
error.appendTo( element.closest('div') );
}
else {
error.insertAfter(element.parent().find("label"));
}
},
rules: {
sEmail: {
required: true,
email: true
},
},
submitHandler: function(form){
jQuery('.fancybox4').trigger('click');
}
});
});
Then remove the onsubmit event from form tag. So your form tag is like
<form id="ie9_competition" method="post">
Related
I have a form and I used field validator on it and its working fine but when i open form in edit mode and empty field and press save bootstrap Validator not works.
Below is the validator code
$(document).ready(function () {
$('#frmSpecialtyDetail')
.bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
ShortName: {
group: '.col-md-6',
validators: {
notEmpty: {
message: 'Short Name is required'
}
}
}
}
});
});
Taken from the original BootstrapValidator website, this is the code you have to use in order for the form to submit once it succeeds with the validation:
$(document).ready(function() {
$(form)
.bootstrapValidator({
... options ...
})
.on('success.form.bv', function(e) {
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data
$.post($form.attr('action'), $form.serialize(), function(result) {
// ... Process the result ...
}, 'json');
});
});
In your case I'd do something along the lines of:
$(document).ready(function() {
$('#frmSpecialtyDetail')
.bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
ShortName: {
group: '.col-md-6',
validators: {
notEmpty: {
message: 'Short Name is required'
}
}
}
}
})
.on('success.form.bv', function(e) {
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data
$.post($form.attr('action'), $form.serialize(), function(result) {
// ... Process the result ...
}, 'json');
});
});
Hope that helps.
Source: http://bootstrapvalidator.com/examples/ajax-submit/
How can I prevent collection.create from adding items into its collection if there is an error found in the input?
html,
<div id="new-status">
<h2>New monolog</h2>
<form action="">
<textarea name="content"></textarea><br>
<input type="submit" value="Post">
</form>
</div>
<div id="statuses">
<h2>Monologs</h2>
<ul></ul>
</div>
backbone,
var Status = Backbone.Model.extend({
initialize: function(){
},
validate: function(attrs, options) {
if(attrs.text === '') alert("please enter some text");
},
url:"dummy.php",
sync: function (method, model, options) {
return $.ajax({
type: "POST",
dataType: 'json',
url: 'server.php',
data: {
text: this.get("text")
}
});
}
});
var Statuses = Backbone.Collection.extend({
model: Status
});
var NewStatusView = Backbone.View.extend({
events: {
"submit form": "addStatus"
},
initialize: function(options) {
_.bindAll(this, 'addStatus', 'clearInput');
this.listenTo(this.collection, 'add', this.clearInput) ;
},
addStatus: function(e) {
e.preventDefault();
this.collection.create({ text: this.$('textarea').val() });
},
clearInput: function() {
this.$('textarea').val('');
}
});
var StatusesView = Backbone.View.extend({
initialize: function(options) {
this.collection.on("add", this.appendStatus, this);
},
appendStatus: function(status) {
this.$('ul').append('<li>' + status.escape("text") + '</li>');
}
});
$(document).ready(function() {
var statuses = new Statuses();
new NewStatusView({ el: $('#new-status'), collection: statuses });
new StatusesView({ el: $('#statuses'), collection: statuses });
});
So, when you hit the submit button without typing any text, you get an error popup from this part in the model,
validate: function(attrs, options) {
if(attrs.text === '') alert("please enter some text");
},
But how can I tell the collection that there is an error and do not add this empty item and also do not fire sync in the model?
EDIT:
got it worked with collection.create in this way...
model,
validate: function(attrs, options) {
if(attrs.text === '') {
var message = "please enter some text";
alert(message);
return message;
}
},
view,
addStatus: function(e) {
e.preventDefault();
var one = new Status({ text: this.$('textarea').val() });
if (!one.isValid()) {
alert(one.validationError);
} else {
this.collection.create(one);
}
},
it seems to work fine unless it is not a good approach or against MVC pattern?
I don't think collection.create is the right choice here.
addStatus: function(e) {
e.preventDefault();
var status = new Status({"text": this.$('textarea').val()})
var error = status.valiate();
if(!error) {
this.collection.add(status);
}
},
Also not that the backbone docs says this about validate:
If the attributes are valid, don't return anything from validate; if
they are invalid, return an error of your choosing. It can be as
simple as a string error message to be displayed, or a complete error
object that describes the error programmatically.
So, your validate function should be fixed:
validate: function(attrs, options) {
if(attrs.text === '') {
var message = "please enter some text";
alert(message);
return message;
}
},
Your Model's validate method should return an error string so that models save is not fired in case of alert.
validate: function(attrs, options) {
if(attrs.text === ''){
alert("please enter some text");
return "Text is empty."; // OR proper error CODE
}
}
Check validate method of Backbone.Model.
I used ui jquery auto-complete in my MVC3 web project and kept jquery in external js file and included it in the web page but it is not working.
I used following code in js file for ui jquery auto-complete :
$(function () {
$("#ReportsTo_FullName").autocomplete({
source: function (request, response) {
var linkPath = "#Html.Raw(Url.Action("AutocompleteSuggestions", "Employee", new { #term = "Term", #moduleName="ModuleName"}))";
linkPath = linkPath.replace("Term", request.term);
linkPath = linkPath.replace("ModuleName", "Employee");
$.post(linkPath, function (data) {
response($.map(data, function (item) {
return { label: item.FullName, value: item.Id }
}
));
})
$.error(function (xhr, ajaxOptions, thrownError) { alert(thrownError); })
},
minLength: 1,
focus: function (event, ui) {
$("#ReportsTo_FullName").val(ui.item.label);
return false;
},
select: function (event, ui) {
if (ui.item) {
$("#ReportsTo_FullName").css('border', '');
$("#ReportsTo_FullName").val(ui.item.label);
$("#ReportsToId").val(ui.item.value);
return false;
}
},
change: function (event, ui) {
if (ui.item == null) {
$("#ReportsTo_FullName").css({ 'border': '1px solid #ff0000' });
$("#ReportsToId").val(null);
}
}
});
});
But it is failed to execute and its not showing autocomplete.
Whats wrong in above jquery ?
How to resolve this problem ?
You can't use this:
#Html.Raw(Url.Action("AutocompleteSuggestions", "Employee", new { #term = "Term", #moduleName="ModuleName"}))
In js file, this is server code. Create hidden field on the page and only then you can get this data.
I have built a jquery dialog to show a partial view for entering data.
I have built the action link:
#Html.ActionLink("Add New Service Provider", "PartialNewCust", "Customer", null, new { #class = "addServiceProviderLink" })
I have the controller action:
public ActionResult PartialNewCust()
{
return PartialView();
}
And the div / jQuery code:
<div id="AddServiceProvDialog" title="Add Service Provider"></div>
<script type="text/javascript">
var linkObj;
$(function () {
$(".addServiceProviderLink").button();
$('#AddServiceProvDialog').dialog(
{
autoOpen: false,
width: 400,
resizable: false,
modal: true,
buttons:
{
"Add": function () {
$("#addProviderForm").submit();
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$(".addServiceProviderLink").click(function () {
linkObj = $(this);
var dialogDiv = $('#AddServiceProvDialog');
var viewUrl = linkObj.attr('href');
$.get(viewUrl, function (data) {
dialogDiv.html(data);
//validation
var $form = $("#addProviderForm");
// Unbind existing validation
$form.unbind();
$form.data("validator", null);
// Check document for changes
$.validator.unobtrusive.parse(document);
// Re add validation with changes
$form.validate($form.data("unobtrusiveValidation").options);
//open dialog
dialogDiv.dialog('open');
return false;
});
});
});
The partial view renders fine but opens a new page and does not come up as a modal dialog.
What am I doing wrong.
On a side note: my autocomplete code is also not working by my jQuery datetime picker is...
$(document).ready(function()
{
$(".date").datepicker();
}
);
$(document).ready(function () {
$("#CustByName").autocomplete(
{
source: function (request, response) {
$.ajax(
{
url: "/Cases/FindByName", type: "GET", dataType: "json",
data: { searchText: request.term, maxResults: 10 },
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data, function (item) {
return {
label: item.CustomerName,
value: item.CustomerName,
id: item.CustomerID
}
})
);
}
});
},
minLength: 3
});
});
My guess is that you misplaced the return false statement in the button's click handler, thus the default behavior is not prevented as you expect, and the link is simply followed:
$(".addServiceProviderLink").click(function () {
...
$.get(viewUrl, function (data) {
dialogDiv.html(data);
...
dialogDiv.dialog('open');
// this return statement should be in the "click" handler,
// not in success callback of the .get() method !
return false;
});
});
Your code should then be:
$(".addServiceProviderLink").click(function () {
...
$.get(viewUrl, function (data) {
...
});
// return here to prevent default click behavior
return false;
});
What i want to do:
at page load to automatically pop up a jquery dialog fill in some data, post that to an action and close the dialog (regardless if the action succeeds or not).
in the View in which the pop up should occur i have the following:
<script type="text/javascript">
$(function () {
$('#PopUpDialog').dialog(
{
modal: true,
open: function ()
{
$(this).load('#Url.Action("Subscription", "PopUp")');
},
closeOnEscape: false
}
);
$('.ui-dialog-titlebar').hide();
$('#closeId').live('click',function () {
$('#PopUpDialog').dialog('close');
return false;
}
);
$('#SubscriptionForm').submit(function () {
$("#PopUpDialog").dialog("close");
$.ajax({
url: encodeURI('#Url.Action("Subscription", "PopUp")' ),
type: this.method,
data: $(this).serialize()
})
return fase;
}
);
});
</script>
the Subscription view has the following:
#using (Html.BeginForm( new { id = "SubscriptionForm" }))
{
#Html.ActionLink(Deals.Views.PopUp.SubscriptionResources.AlreadySubscribed, "", null, new { id = "closeId" })
<br />
<br />
#Deals.Views.PopUp.SubscriptionResources.FillEmail
#Html.TextBoxFor(m => Model.Email)
<input type="submit" id="subscribeId" value="#Deals.Views.PopUp.SubscriptionResources.IWantToSubscribe" />
<br />
}
which works fine.
The POST action is defined as follows:
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult Subscription(FormCollection formValues)
//public void Subscription(FormCollection formValues)
{
Deals.ViewModels.PopUpSubscriptionVM VM = new ViewModels.PopUpSubscriptionVM();
TryUpdateModel(VM);
if (!String.IsNullOrEmpty(VM.Email))
{
//do the update to the dbms
}
return Json(new { success = true });
}
The problem is that after posting back i get an empty screen with the success message, which i don't want!
What am i doing wrong?
You can handle the success and error callbacks:
$('#SubscriptionForm').submit(function () {
$("#PopUpDialog").dialog("close");
$.ajax({
url: encodeURI('#Url.Action("Subscription", "PopUp")' ),
type: this.method,
data: $(this).serialize(),
success: function (result) {
//Do Whatever you want to do here
},
error: function (x, e) {
//Do Whatever you want to do here
}
})
return fase;
}
To see what i am doing wrong i set up a small project (ASP.NET MVC 3) with the following ingredients:
<script type="text/javascript">
$(function () {
// Does not cache the ajax requests to the controller e.g. IE7/9 is doing that...
$.ajaxSetup({ cache: false });
var $loading = $('<img src="#Url.Content("~/images/ajax-Loader.gif")" alt="loading" class="ui-loading-icon">');
var $url = '#Url.Action("Subscription", "PopUp")';
var $title = 'Some title';
var $dialog = $('<div></div>');
$dialog.empty();
$dialog
.append($loading)
.load($url)
.dialog({
autoOpen: false
, closeOnEscape: false
, title: $title
, width: 500
, modal: true
, minHeight: 200
, show: 'fade'
, hide: 'fade'
});
$dialog.dialog("option", "buttons", {
"Cancel": function () {
$(this).dialog("close");
$(this).empty();
},
"Submit": function () {
var dlg = $(this);
$.ajax({
url: $url,
type: 'POST',
data: $("#SubscriptionForm").serialize(),
success: function (response) {
//$(target).html(response);
dlg.dialog('close');
dlg.empty();
});
}
});
$dialog.dialog('open');
})
</script>
The controllers' actions:
public ActionResult Subscription()
{
Thread.Sleep(2000); //just for testing
TestModalAjax.ViewModels.PopUpVM VM = new ViewModels.PopUpVM();
return View(VM);
}
//POST
[AcceptVerbs(HttpVerbs.Post)]
//[OutputCache(CacheProfile = "ZeroCacheProfile")]
public ActionResult Subscription(FormCollection formValues)
{
TestModalAjax.ViewModels.PopUpVM VM = new ViewModels.PopUpVM();
TryUpdateModel(VM);
return Json(new { success = true });
}
...and the according View:
#model TestModalAjax.ViewModels.PopUpVM
#{
Layout = null;
ViewBag.Title = "Subscription";
}
<h2>Subscription</h2>
#* ----- NOTICE THE FOLLOWING!!! WITHOUT THIS DATA GETS NOT POSTED BACK!!!! ---- *#
#using (Html.BeginForm("Subscription","PopUp",FormMethod.Post, new { id="SubscriptionForm"}))
{
<h1> Give me your name</h1>
#Html.TextBoxFor(M => Model.Name)
}
...so it seems everything works as expected!