Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes #15086 - window load inside ready state will not be triggered #15087

Closed
wants to merge 1 commit into from
Closed

Fixes #15086 - window load inside ready state will not be triggered #15087

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion framework/web/View.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -604,7 +604,7 @@ protected function renderBodyEndHtml($ajaxMode)
$lines[] = Html::script($js, ['type' => 'text/javascript']);
}
if (!empty($this->js[self::POS_LOAD])) {
$js = "jQuery(function ($) {\n$(window).on('load', function () {\n" . implode("\n", $this->js[self::POS_LOAD]) . "\n});\n});";
$js = "jQuery(window).on('load', function () {\n" . implode("\n", $this->js[self::POS_LOAD]) . "\n});";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm... Shouldn't it be just "jQuery(function($) {\n" . implode("\n", $this->js[self::POS_LOAD]) . "\n});"?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

jQuery(function($) { }); - when DOM is ready
jQuery(window).on('load', function() { }); - when content is fully loaded

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, OK.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see that we are nesting the calls unnecessarily here but as far as I understand DOM ready event comes before window load event. if we register the handler inside of the DOM ready event, why does it have no effect?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In version 3 the ready handler fires asynchronously.

You can check code:

jQuery(function ($) {
  console.log('ready');
  $(window).on('load', function () {
    console.log('load in ready');
  });
});
jQuery(window).on('load', function () {
  console.log('load');
});

With jQuery 2.2.4 you will see:

ready
load
load in ready

With jQuery 3.2.1 you will see:

load
ready

No "load in ready" anymore.

jquery/jquery#3194 (comment)
jquery/jquery#3197

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just wanted to make $ working even jQuery.noConflict() is enabled. But missed this great change in jQuery API. The best way to fix this bug - rollback my proposal in #14620

$lines[] = Html::script($js, ['type' => 'text/javascript']);
}
}
Expand Down