JQuery nyroModal with ASP.NET using Web Services

callbackjquerynyromodalweb services

I have been using the jQuery nyroModal plugin for a little bit of time, and frankly its one of the best modal plugins I've used to date! I'm hoping that a lot of other people have also used this plugin, hence me requiring some help with regards to using it along with ASP.NET.

I have however run into a problem with it in the past and trying to get it working with ASP.NET server controls – basically one cannot use any server controls within the modal as it creates another form tag, and as you obviously know, ASP.NET only allows ONE form tag. So I have decided to use standard HTML controls instead and call server-side code (say on button click) using web-services/page-methods. This is fine, but what I don't understand is how to do a proper callback in the modal, in other words – click the button, the modal shrinks to its default size and shows the loading indicator, and then enlarges when the HTML response has been received, and hopefully show the status of the request (ie. successful or failed)

I have just started learning about web-services and callbacks in .NET, so Im by no means an expert. Please could someone shed some light on this and provide me with a small "hello world" example? I will be be forever greatful!

thank u!

Best Answer

I've had this problem as well and as it turns out when you open the modal it moves down to the end of your HTML outside of the <form> tag!

If you're using the latest version of nyroModal you can just tell it what element to appear inside with the blocker property

 $('#myElement').nyroModal({
    'blocker': '#aspnetForm'
  });

More info here: http://nyromodal.nyrodev.com/#demos

Modern jQuery

Use .prop():

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

DOM API

If you're working with just one element, you can always just access the underlying HTMLInputElement and modify its .checked property:

$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;

The benefit to using the .prop() and .attr() methods instead of this is that they will operate on all matched elements.

jQuery 1.5.x and below

The .prop() method is not available, so you need to use .attr().

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

Note that this is the approach used by jQuery's unit tests prior to version 1.6 and is preferable to using $('.myCheckbox').removeAttr('checked'); since the latter will, if the box was initially checked, change the behaviour of a call to .reset() on any form that contains it – a subtle but probably unwelcome behaviour change.

For more context, some incomplete discussion of the changes to the handling of the checked attribute/property in the transition from 1.5.x to 1.6 can be found in the version 1.6 release notes and the Attributes vs. Properties section of the .prop() documentation.

Best Answer

Related Solutions

Javascript – Get current URL with jQuery

Javascript – Setting “checked” for a checkbox with jQuery

Modern jQuery

DOM API

jQuery 1.5.x and below

Related Topic