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.

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

wb-ready Is never triggered #1210

Open
DBlaisAsc opened this issue Jul 16, 2024 · 1 comment
Open

wb-ready Is never triggered #1210

DBlaisAsc opened this issue Jul 16, 2024 · 1 comment

Comments

@DBlaisAsc
Copy link

DBlaisAsc commented Jul 16, 2024

Hi

I used the latest CDTS .Net package (5.0.4) in my .Net Framework 4.8 MVC project.

I put this in a simple hello word view :

@section CustomScripts {
	<script type="text/javascript">
		console.log('load');

		$(document).ready(function () {
			console.log('document ready');
		});
		
		$(document).on("wb-ready.wb", function (event) {
			console.log('wet ready');
		});
   </script>
}

I see document ready in the console, but not wet ready.

Note, I had to add a ref to jQuery, even if the wet already has one.

Any idea?

Regards

@sgdowney
Copy link

sgdowney commented Aug 6, 2024

The CustomScripts section is no longer viable to reference scripts that depend on jQuery. The newer versions of the CDTS .Net packages changed to loading jQuery dynamically. As a result, scripts referenced in the CustomScripts section may load and execute before jQuery has loaded. The better option is to add your script references to HTMLBodyElements in your code.

WebTemplateModel.HTMLBodyElements.Add($"<script src=""{Url.Content("~/Content/theme-irs-sdi/js/NavLogin.js")}""></script>")

This will ensure that jQuery is loaded before your scripts are loaded.

Regarding the wb-ready.wb event, there is no guarantee that the document.ready event will fire before the wb-ready.wb event. Additionally, in the HTML Basic mode, the wb-ready.wb event doesn't fire at all.
I've implemented the following for scripts that rely on jQuery and the wb-ready.wb event:

// this updated implementation of $(document).ready() guarantees the code will run even if the script loads after the event has already fired.
$(function () {
    if (wb.isDisabled) {
         initializeBasicHTMLSubmitHandler();
    }
    else {
        if (wb.isReady) {
            initializeSubmitHandler();
        }
        else {
            $(document).on("wb-ready.wb", function () {
                initializeSubmitHandler();
            });
        }
    }
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants