Response title
This is preview!
Ajax.load() and DOM readiness
in Using jQuery
•
9 years ago
I have a function that loads a form into a modal dialog div and displays it in the callback:
- loadForm = function(title, url) {
- $('#modal h1.form-title').html(title);
- return $('#modal #modal-body').load(url, function(response, status, xhr) {
- if (status === 'error') {
- return alert('Error loading form. HTTP status: ' + xhr.status + ' ' + xhr.statusText);
- } else {
- $('#modal').modal('show');
- $('#cancel-form').click(function() {
- return $('#modal').modal('hide');
- });
- return $('#modal-body form :input[type!=hidden]:first').focus();
- }
- });
- };
Everything works correctly in IE. But in Safari, Chrome, and Firefox, the focus() fails unless I put it in a setTimeout() of at least 100-150 ms.
Which works, I guess. It just seems kind of hackish. I was under the impression that the load() callback wasn't executed until the external resource was loaded, parsed, and inserted into the DOM.
Is that not correct? Is something else causing a problem here?
1