SWTechnologies

Thank you Esmi, your instructions to:

“re-uploading all files & folders – except the wp-content folder and wp-config.php & root .htaccess files – from a fresh download of WordPress. Make sure that you delete the old copies of files & folder before uploading the new ones”

resolved my issue. Much appreciated!

Good call, thanks Andrew

Well I looked up .live and it indicates that as of jQuery 1.7, .live() has been deprecated and I should be using .on() … I’m running WordPress 3.8 which comes with jQuery 1.10.2 … so in theory .on() should be used in place of .live() … unfortunately the following jQuery is not working:

jQuery(document).ready(function( $ ) {
	$('#swt_createRaceTypeForm').on('submit', function(e) {
		alert('test');
		e.preventDefault();
	});
});

I will switch it back to using .live(), but feel wrong doing so as it’s deprecated. Any thoughts/advise on .on()?

OK, I think I’ve resolved the issue after some more Googling (I spent several hours yesterday, sometimes a little sleep helps sharpen your Google kung fu).

I found a post (Click event is not firing after DOM changes in jQuery) which stated a similar problem and the following was proposed:

Bind the event handler to the button’s click event using live() instead of click()

So I changed my jQuery script as follows:

jQuery(document).ready(function( $ ) {
	alert('loading jQuery ready function');
	$('#swt_createRaceTypeForm').live('submit', function(e) {
		alert('test');
		e.preventDefault();
	});
});

Things are working now … do you see any issue or concerns with doing things this way (using .live)? I’m going to read the docs for .live() to get a full understanding of what’s happening, but for now it’s working ??

Really appreciate your time Andrew, thanks so much!

If I’m understanding what you are saying correctly, I think I am doing that.

On initial page loading, my jQuery script is loaded and the DOM does not contain my form (which is what the jQuery script is listening for). After the page loads (along with all it’s scripts), you click the ‘Add New’ button which will change the DOM to now include my form (which is what my jQuery script is listening for). I would expect jQuery to handle the clicking of the submit button on that form.

Does this constitute changing the DOM after the fact? If so, does this mean I can only load my jQuery script only after I change the DOM and add my form in?

Hi Andrew … before I mock something up in jsFiddle I wanted to check if the problem was in my code or in my understanding of how jQuery works.

I created a brand new admin page using the exact same code explained above, only this time I took out the first step of the process… instead of first clicking the ‘Add New’ button and displaying the form, I just display form right from the start. When the form’s submit button is clicked, .submit() in my jQuery code is actually hit and my ‘test’ alert message is popped up.

So this isn’t a matter inability to understand and use jQuery, but my understanding of the ordering/loading/displaying of things.

Is there an issue with jQuery if when you load the script but the DOM object (my form) isn’t currently on the page? My form only gets added to the page after I click the first button, yet the jQuery script was added prior to this (on initial page load).

I’ve inspected my page and can see the js files there, so I know the jQuery code is there, just not sure why everything works when I display the form right on page load and click the submit button, but when I only display the form after clicking the ‘Add New’ button first, the exact same code is not being called.

I’ll try and get something up using jsfiddle … at least this will determine if it’s a WordPress framework issue or my understanding of jQuery… just thought I’d share my findings prior to doing this incase there was some basic thing I was missing.

Hey Andrew, unfortunately the plugin is for the backend and requires users to be logged in with an admin account … so I’m not quite sure how you can actually play around with it (open to reasonable suggestions).

Would screenshots suffice? If so, you can find a visual representation of the steps in question here: Screen Shots

One other note… a client was using the freely available “showcase” theme and when this plugin was activated, the ‘recent twitter’ feed was disabled and the ‘Mantles’ on the home page stopped working… I’m assuming you both have similar function names and they are colliding… didn’t have time to look into, but just thought I’d let you know