Loading jQuery on page load

JavaScript
1

I’m calling a jQuery block when a button is pressed but I also want it to be called on page load too and I don’t know how to do this.

This is the code I’ve got

 $j(document).ready(function($) {
	    if (window.addEventListener) {
		window.addEventListener("message", receiveMessage, false);
	} else {
		window.attachEvent("onmessage", receiveMessage);
	}
 console.log('Hello') ;
 setupTableEditors(curriedAutoCompleteDataProvider) ;

$('#save,#publish').on('click', function(event) {		
	$('.appendGrid').trigger('change');	
});

but how do I add an on page load to this so that it also loads anything after the page has loaded?

Thanks

2

Is $('.appendGrid').trigger('change'); what you want to execute on button click? If so, you should also add that statement outside the click method so the change event is triggered on page load.

$j(document).ready(function($) {
	    if (window.addEventListener) {
		window.addEventListener("message", receiveMessage, false);
	} else {
		window.attachEvent("onmessage", receiveMessage);
	}
 console.log('Hello') ;
 setupTableEditors(curriedAutoCompleteDataProvider) ;

$('#save,#publish').on('click', function(event) {		
	$('.appendGrid').trigger('change');
});

$('.appendGrid').trigger('change');
3

Why are you running this native JavaScript if you are using jQuery for everything else. The jQuery equivalent is much shorter - should be something like:

$(window).on("message", receiveMessage);
4

Functions allow you to call the same block of code in multiple places.

var triggerChange = function() {
    $('.appendGrid').trigger('change');
};

$('#save,#publish').on('click', triggerChange);
$(document).ready(triggerChange);
5

I trying changing the code to this:

 $j(document).ready(function($) {
 if (window.addEventListener) {
	window.addEventListener("message", receiveMessage, false);
} else {
	window.attachEvent("onmessage", receiveMessage);
}
console.log('Hello') ;
setupTableEditors(AutoCompleteData) ;

$('#save,#publish').on('click', function(event) {		
	$('.appendGrid').trigger('change');	
});

 $('.appendGrid').trigger('change');

but that still didn’t show on load - have I don’t something wrong?

6

Sorry I don’t really understand what you mean - I’m very new to JS so may have it wrong about using Jquery, I just presumed it was

7

Is the code executing correctly? Does the scripting console show any problems? Because currently I see in your example that the closing }); for the ready part is currently missing.

When you’re not using jQuery, the standard event handling code is as you’ve used it:

if (window.addEventListener) {
    window.addEventListener("message", receiveMessage, false);
} else {
    window.attachEvent("onmessage", receiveMessage);
}

But when you are using jQuery, it makes sense to use the methods that jQuery provides, in this case the event handling code should be:

$(window).on('message', receiveMessage);

That second part while not necessary to get things working, helps to reduce the complexity of what’s involved.

A simple example where the console shows this as working, can be found at https://jsfiddle.net/L069t53k/1/

8

I understand what you’re saying but I think my description wasn’t very well written because that’s not quite what I’m trying to do. I’ve got a form that when saved/published will use appendGrid to show the results. I want it to show the results even when the page is loaded. Currently there are three results that should be shown but I have to click save or publish to see them, that’s fine but I also want them to show when the page is loaded.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.