JQuery nyromodal + ASP.Net + UpdatePanel / AJAX - endShowContent doesn't work, flickers, loses focus
I am using jQuery nyroModal plugin in ASP.Net. I love nyroModal and overall its work is very pleasant.
But I am using the endShowContent callback to set focus on the first text input element to the page content after nyromodal finishes loading. To do 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 that it works because the first textbox instantly becomes the focus when the modal appears. But then it flickers and loses focus again. It's almost as if nyromodal decides that it is still not fully loaded and something else is happening to distract attention. Or maybe UpdatePanel intervention? (I don't know why that would be). Is it possible that the auto-generated AJAX JS calls to UpdatePanel are doing something after the nyromodal endShowContent call?
Any help or understanding is appreciated.
a source to share
I tried to recreate the problem here: http://jsbin.com/igibo
I cannot duplicate the problem, so I am assuming there is something else in your code that is causing the problem.
Try to edit recreation via http://jsbin.com/igibo/edit to duplicate the problem, then we can fix it from there.
PS While it's great that you clarify your problem, please update the question rather than adding more information to the new answers. (They don't technically answer)
a source to share
Have you tried wrapping your code in
$(document).ready(function() {
// put all your jQuery goodness in here.
});
JQuery Document Ready Tutorial
The dom may not be fully loaded yet.
a source to share
Thank you Brianpeiris! You won't believe it, I feel sick.
I got your code from this jsbin and copied it locally, so I had sample code alongside my own test pages. In my test pages, I used some old way of running nyromodal, which was:
<a href="modal.html" target="_blank" class="nyroModal">Launch modal</a>
I found this code all over the internet in examples, etc. But it looks like it must be some old / dodgy / completed way of triggering a popup using nyromodal!
I just made this normal / clean hyperlink and removed the class and target garbage, and then used the same style you sent me:
$('a').nyroModal();
Now all my problems are gone. That fixed it all! :) Also the window opening animation is much smoother.
Many thanks. I found the documentation a bit inconsistent for this plugin. You helped point me in the right direction. Using this method, focus works great and very smoothly.
Greetings
a source to share