I have a dynamic div I populate with data from an AJAX call. The data
is just HTML and inside this is some script. Part of the script is an
ajaxSuccess handler than is fired under FF and IE but in Safari it
only fires after the 2nd or successive calls. It used jqModal and here
is some code :
The caller :
form = $('<div class="jqmDialog poppedup"></div>');
$("body").append($('<div class="jqmWrap"></div>').append(form));
form.html(data);
form.jqm({
modal:isModal,
onShow: function(hash) {hash.w.fadeIn(fadeIn);},
onHide: function(hash) {hash.w.fadeOut(fadeOut, function() {
hash.o.remove();
if (options.callback != null) {
options.callback();
};
$('div.jqmWrap').empty().remove();
}); }
}).jqmShow();
The ajaxSuccess handler being injected into the above 'form' :
$().ajaxSuccess(function() {
$().unbind('ajaxSuccess');
$('#newuserform').parents('.jqmDialog').css({width : '440px'});
});
$('#newuserform') is a div that is part of the returned HTML and
so .jqmDialog is the div created int he caller to house that div.
As I say the div is only resized (and if I log to console debug
statements are printed) only on execution after the first time. If in
the caller I put a $().triggerHandler('ajaxSuccess') as a callback to
the fadeIn function in the onShow part of the dialog then I can
trigger the event but then it looks really bad as the already visible
window resizes. In other browsers (and successive runs in Safari) the
div fades in to size already set in the handler. I thought that maybe
at the time of the successful ajax return it wouldn't know anything
about #newuserform's position int he DOM but the even isn't even
firing (logging to console) ... so it's not even that.
Does anyone have any suggestions as to do this or pointers to anythign
I'm missing ?
