i've got a page (asp.net) where I trap the click event of a link.
i then do some dirty checking and present a dialog to the user,
$(function() {
var clickedLink;
$('.checkdirty').click(function(event) {
if(isDirty == false){
return true;
}
clickedLink = $(this);
$('#dirtysave-dialog').dialog('open');
return false;
});
});
do you want to loose your changes Yes/No etc.
$('#dirtysave-dialog').dialog({ bgiframe: true, autoOpen: false,
height: 125, width: 425, modal: true,
title: "You have unsaved changes, do you want to continue and loose changes?!!",
buttons: {
"Yes": function() {
isDirty = false;
$(this).dialog("close");
$(clickedLink).click();
},
"No": function() {
$(this).dialog("close");
}
},
open: function(type, data) {
$(this).parent().appendTo("form");
}
});
if they click yes i then clear the isDirty flag and call click on the link. this goes back in to the click event handler, does the check
if(isDirty == false){
return true;
}
returns true but the event never happens....
i need to click the link again manually for it to fire.
any ideas??
.click() only fires the event handlers for onclick, it doesn't actually make the default action of following the link happen. Probably the quickest method is just to do that manually:
window.location= clickedLink.href;
PS. “lose”
you can use the trigger function, Change:
$(clickedLink).click();
to
$(clickedLink).trigger("click");
A better way would be to separate your click functionality out into a separate function and call this, however the above will work.
Related
I have a specific unified alert package that displays alerts/notifications upon submission in a cohesive way across web browsers. I am finding that after submit in the Autoform.hook(), the default browser alert format also fires. Any help to prevent the default browser alter from firing would be appreciated.
I have tried using an event handler:event.preventDefault();
AutoForm.hooks({
'edit-form': {
onSuccess: function (operation, result, template) {
IonPopup.alert({
title: 'Saved Succesfully!',
subTitle: 'Please Click OK to go back',
onOk: function()
{
Session.set("editingReqEvent", null);
Router.go('calendar');
}
});
},
onError: function(operation, error, template) {
IonPopup.alert({title: 'Save Unsucessful!', subTitle: 'Please go back and check entries'});
console.log(error);
}
}
});
You can disable the default alert event, or overwrite it just with plain js:
window.alert = function() {};
I want to alter how an asyncCommand is being hit (currently from a button), so I would need to access the asyncCommand from code. I don't want to have to alter what this asyncCommand is doing, it is dealing with payment details.
I have tried Googling but I cant find anything, I am also new to KO.
This is what I'm trying to achieve:
Click on a button (a separate button with its own asyncCommand method
which checks a flag) The 'execute' will do the following:
If (flag) - show modal
modal has two options - Continue / Cancel
If continue - hit asyncCommand command for original button (card payment one).
If cancel - go back to form
If (!flag)
Hit asyncCommand command for original button (card payment one).
Can this be done?
Thanks in advance for any help.
Clare
This is what I have tried:
FIRST BUTTON
model.checkAddress = ko.asyncCommand({
execute: function (complete)
{
makePayment.execute();
if (data.shippingOutOfArea === true || (data.shippingOutOfArea === null && data.billingOutOfArea === true)) {
model.OutOfArea.show(true);
}
complete();
},
canExecute: function (isExecuting) {
return !isExecuting;
}
});
ORIGINAL BUTTON
model.makePayment = ko.asyncCommand({
execute: function (complete) {
}})
MODAL
model.OutOfArea = {
header: ko.observable("Out of area"),
template: "modalOutOfArea",
closeLabel: "Close",
primaryLabel: "Continue",
cancelLabel: "Change Address",
show: ko.observable(false), /* Set to true to show initially */
sending: ko.observable(false),
onClose: function ()
{
model.EditEmailModel.show(false);
},
onAction: function () {
makePayment.execute();
},
onCancel: function ()
{
model.EditEmailModel.show(false);
}
};
You will have two async commands actually for this scenario. One to open up the modal and another one for the modal.
Eg:
showPaymentPromptCmd = ko.asyncCommand({
execute: function(complete) {
if (modalRequired) {
showModal();
} else {
makePayement();
}
complete();
},
canExecute: function(isExecuting) {
return !isExecuting;
}
});
//Called by Continue button on your modal.
makePaymentCmd = ko.asyncCommand({
execute: function(complete) {
makePayement();
complete();
},
canExecute: function(isExecuting) {
return !isExecuting;
}
});
var
function makePayement() {
//some logic
}
Here's my function:
function confirmFamilyMemDelete()
{
$('#dialog').attr('title', 'Warning').text('Are you sure?').dialog({ buttons:
[{
text: 'Yes',
click: function ()
{
$('#MainContent_cph_btnConfirmDelete').click();
$(this).dialog('close');
alert('Hello');
}
},
{
text: 'No',
click: function ()
{
$(this).dialog('close');
}
}
]
});
return false;
}
I've got a very weird problem. In my aspx page there's a button that gets an id 'MainContent_cph_btnConfirmDelete' after it gets rendered. I want to click it if Yes button is clicked in the jQuery UI dialog. However, I fail to do it. It just skips over that command and alerts 'Hello'. This means the rest of the code inside my Yes button gets executed. And if I take
$('#MainContent_cph_btnConfirmDelete').click();
out and put it just before return false; the button gets clicked. Is this a know issue with jQuery because I can't think of any logical explanation. If so, what is the workaround?
Here is what I think you need:
function confirmFamilyMemDelete()
{
$('#dialog').attr('title', 'Warning').text('Are you sure?').dialog({ buttons:
{
"Yes": function ()
{
$('#MainContent_cph_btnConfirmDelete').trigger('click');
$(this).dialog('close');
alert('Hello');
},
"No": function ()
{
$(this).dialog('close');
}
}
});
return false;
}
JqueryUI:
The code below fires an alert every time the box is closed, but how can I make it so it only does this for once and not every time.
$("#box").dialog({
close: function () {
alert(999);
}
});
This was how I did it before using jQueryUi:
$("#box").one("click", function () {
alert(999);
return false
});
According to the docs, the .close() method also has a corresponding event: dialogclose. So you should be able to do this:
$("#box").one("dialogclose",function() {
alert(999);
});
I am using Update Panel in my asp page and I am doing JQuery Validation on Asynchronous Postback...
I just want to validate my form on only button clicks or submits...
My problem is..all my buttons are in different formviews and won't load at a time...that's why I am unable to take the button id's and use the click events..here is my code..
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(ValidateMyForm);
function ValidateMyForm(sender, args) {
var objPost = args.get_postBackElement();
if (objPost === null || objPost === undefined) return;
if (objPost.id == '<%= ((Button)(formViewinfo.FindControl("btnUpdate"))).ClientID %>') {
$('#pnlerrors').fadeOut('fast');
$('#pnlItemErrors').fadeOut('fast');
var isValid = $('#form1').validate({
errorClass: 'error',
invalidHandler: function (e, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
$('#pnlerrors').html('<p> Please correct the errors </p>').fadeIn('fast');
document.location.href = '#pnlerrors';
}
}, submitHandler: function () {
}
}).form();
if (!isValid) {
CancelPostback(sender, args);
} else {
}
}
//this is for rest of buttons
else {
$('#pnlItemErrors').fadeOut('fast');
$('#pnlerrors').fadeOut('fast');
var isValid = $('#form1').validate({
errorClass: 'error',
invalidHandler: function (e, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
$('#pnlerrors').fadeOut('fast');
document.location.replace('#', '#pnlItemErrors');
$('#pnlItemErrors').html('<p> Please correct the errors </p>').fadeIn('fast');
document.location.href = '#pnlItemErrors';
}
}, submitHandler: function () {
}
}).form();
if (!isValid) {
CancelPostback(sender, args);
} else {
}
}
}
All I want to do is: 2nd time validation on only button submit not for everything...I do get other postbacks on this page and those post backs also gets validated each time (I want to Avoid this)...
I don't know this approach is good or not...I am struggling with this from long time..I really appreciate you help...
On the assumption that you don't want to submit the form when someone presses the enter button, and that you only want to submit the form on pressing a submit button:
$(document).ready(
function(){
$('form').keypress(
function(event){
if (event.keyCode == '13'){
return false;
}
});
$('input:submit').click(
function(){
$(this).closest('form').submit();
});
$('form').submit(
function(){
$('#success').text('form submitted! (Not really...)');
return false;
// Just to stop the error messages
// in this demo.
});
});
There's a JS Fiddle demo, here: http://jsfiddle.net/davidThomas/5PaWz/.
If I'm mistaken in my assumptions, please leave a comment and I'll try to correct myself.
if your problem is just about finding the buttons the need to have validations then
one way of getting around this is to add a class to the buttons that you want to trigger validation, for example :
<asp:button id="btn1" cssclass="Validate"/>
then you can grab all these buttons in JQuery:
var buttons = $('.Validate');
get each button id:
$(buttons).each(function(){
var id = this.id;
});
ohh..god finally found the solution for my problem...First of all my apologizes if my question is not clear....
My validation works on asynchronous post backs...I just want validate my form on button clicks..i do have an asp.net grid view in my page..if i click on paging or something on the grid it fires validation...i want avoid this..
for this what i did is...i am capturing the postback element with the following statement.
var objPost = args.get_postBackElement();
then i am checking for type..
if (objpost.type == 'submit') { do validation }
else { don't }..
this ends my 2days struggle...
thank you very much your support and help...
Try different approach.
Use asp.Net Button with UseSubmitBehavior=true for submission
and use asp.Net Button with UserSubmitBehavior=false for buttons that you don't want them to fire the validation process that. add this following code to your form
function ValidateForm()
{
var errors ="";
if (typeof(Page_ClientValidate) == 'function')
{
if (typeof (Page_ClientValidate) == 'function') { Page_ClientValidate(); }
if (!Page_IsValid)
{
for (i = 0; i < Page_Validators.length; i++) {
var inputControl = document.getElementById(Page_Validators[i].controltovalidate);
if (!Page_Validators[i].isvalid) {
errors = errors + ";" + Page_Validators[i].errormessage;
inputControl.style.border ="solid 2px #FF0000";
}
}
}
return Page_IsValid;
}
return true;
}
$(document).ready(function(){
/*********************************************************************/
///handle form submittion and run validation prior to that
///if a textbox has required field validator, stop form submittion and
/// highlight the text box
/*********************************************************************/
$('#form1').submit(function(){
return ValidateForm();
});