postback issue with jQuery in ASP.Net
Hi, Folks --
I added some jQuery to my ASP.Net page to try to enhance user friendliness. Specifically, the page has three radio buttons for three different payment options, and there are also fields associated with each of the payment button radion options (for instance, a Purchase Order field associated with the Invoice radio button option).
My goals were to:
1) Automatically select the corresponding radio button when mouse is clicked in corresponding field. (For example, select the Invoice radio button once you click into the PO field).
2) Clear out the fields associated with a payment option if another option is selected, whether by direct clicking or indirectly as described in 1 above. (For example, clear out the PO field if the Credit Card radio button is chosen instead.)
I got the jQuery to work fine, but once I posted back, the code bound to the click event for the radio button (to achieve objective two above) causes the following error:
Invalid postback or callback argument. Event validation is enabled using <pages enableEventValidation="true"/> in configuration or <%@ Page EnableEventValidation="true" %> in a page. For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.
I tried ClientScriptManager.RegisterForEventValidation for each of the three radio buttons I'm binding the event to, but I still got the same error.
I also tried disabling enableEventValidation on the page and in web.config, but when I do that, the radio buttons do not stay selected once the page is posted back, even after I've clicked on them directly.
Code is below:
$(function() {
//the click handler bound to the radio buttons causes the problem
$(':radio').click(function() {
$('input:not(:submit)', $('div:not(:has(:radio[id=' + this.id + ']))')).each(function() {
this.value = "";
this.checked = false;
});
//the click handler bound to the remaining fields that selects corresponding radio button does not cause a postback problem
$('select', $('div:not(:has(:radio[id=' + this.id + ']))')).each(function() {this.selectedIndex = 0;
});
});
//the click function bound to the radio buttons causes the problem
$('#cbQuest').add('table :input').add('#tbPO').click(function() {$(':radio', $(this).parents('div:first')).click();
});
});
After finding just the right selectors to make this work in jQuery, I'm pretty frustrated to have a postback issue! Any help is greatly appreciated.
Thanks,
Eric Fettman