jQuery nyromodal + ASP.Net + UpdatePanel/AJAX - endShowContent not working, flickers, loses focus..

Question

Hi All,

I am using the jQuery nyroModal plugin within ASP.Net. I love nyroModal, and overall its working very nicely.

But I am using the endShowContent callback to set focus to the first text input element on the page's content after nyromodal is finished loading. To achieve this I have the following code on the page that initiates the nyromodal popup.

$(function() { $.fn.nyroModal.settings.endShowContent = function(elt, settings) { $('input:text:first', elt.content).focus(); }; });

I can tell its kind of working, because the first text field does momentarily get focus when the modal appears. But then it kind of flickers and loses focus again. It's almost as if nyromodal decides it still isn't fully loaded and something else happens to take the focus back away. Or perhaps is the UpdatePanel interfering? (I don't know why it would). Is it likely that the UpdatePanel's bloated auto-generated AJAX JS calls are doing something after nyromodal's endShowContent call happens?

Any help or insight appreciated.

Answer 1

Have you tried wrapping your code in

$(document).ready(function() { // put all your jQuery goodness in here. });

JQuery Document Ready Tutorial

It is possible the dom is not fully loaded yet.

Answer 2

I've tried to recreate the problem here: http://jsbin.com/igibo

I can't duplicate the problem, so I'm guessing there's something else in your code that is causing the issue.

Try editing the recreation via http://jsbin.com/igibo/edit to duplicate the problem, then we can solve it from there.

P.S. Although it's great that you're refining your problem, please update the question instead of adding more information in new answers. (They are technically not answers)

Answer 3

Thanks brianpeiris! You won't believe this, I feel sick.

I got your code from that jsbin and copied it locally, so I had your sample code side by side with my own test pages. In my test pages, I was using some old way of launching a nyromodal, which was:

<a href="modal.html" target="_blank" class="nyroModal">Launch modal</a>

I found this code all over the web in examples and so forth. But it seems it must be some old/dodgy/superceded way of launching a model popup with nyromodal!

I simply made that a normal/clean hyperlink and removed the class and target rubbish, then used the same style that you sent me:

$('a').nyroModal();

Now all of my problems are gone. This has fixed everything! :) Also the animation of the window opening is MUCH smoother.

Thanks so much. I have found documentation a bit inconsistent for this plugin. You helped point me in the right direction. Using this way, the focus works perfectly and very smoothly as well.

Cheers