WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] jquery enqueue script is not working properly. Please help. (9 posts)

  1. Cerzky
    Member
    Posted 1 year ago #

    So I am trying to upload a plugin to wordpress.org and the only way that I could get it to work is to use deregister_script('jquery'); and then add jquery back using enqueue_script.

    I got this message back from wordpress.org. And I'm not sure how to fix the problem. I want to load jquery first and then my javascripts which require jquery to work.

    Yes, don't do that, because we will not accept any plugin that loads it's own copy of jQuery, period. This is non-negotiable. Use the core jQuery only, or don't be in the directory.

    As for your problem with jQuery in core, WordPress loads jQuery in no-conflict mode by default, and your own code needs to not use the $ shortcut, or you need to use a no-conflict wrapper.

    http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers

    Does anyone have a suggestion to their response ?

    Thanks
    -Cerzky

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    Yes - read the message:

    As for your problem with jQuery in core, WordPress loads jQuery in no-conflict mode by default, and your own code needs to not use the $ shortcut, or you need to use a no-conflict wrapper.

    http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers

    Never, EVER, de-register core jQuery. It causes all kinds of problems.

  3. Cerzky
    Member
    Posted 1 year ago #

    So do i need to use the wrapper to register and enqueue my other scripts?
    Or do I just need to put the enqueue_script('jquery'); in a wrapper for it to load properly? I am confused..
    I want to load jquery first from core.
    then load customscript.js which requires jquery.

    wp_enqueue_script('jquery');
    wp_register_script('custom_script', ...);
    wp_enqueue_script('custom_script');

    The problem is, either jquery is not loading from core properly or it is loading after custom_script.

    I have never used a no conflict wrapper, hence the confusion.

  4. esmi
    Forum Moderator
    Posted 1 year ago #

    Your own jquery/.js scripts need to use noConflict wrappers.

  5. Cerzky
    Member
    Posted 1 year ago #

    I have this in the javascript code.

    $(document)

    Do I need to change that to
    jQuery(document)

    And there is code like this.
    if ($.isFunction(accept)

    Does this become...
    if (jQuery.isFunction(accept)

    Thanks alot.

  6. esmi
    Forum Moderator
    Posted 1 year ago #

    Try wrapping your code in:

    jQuery(document).ready(function($) {
        // $() will work as an alias for jQuery() inside of this function
    [ your code goes here ]
    });
  7. Cerzky
    Member
    Posted 1 year ago #

    Here is one of my javascript files.. After editing it, it still doesn't work with wordPress core jquery. It will work with a new jQuery registered script though.

    I assume I'm not wrapping it right.

    /*
     * FullCalendar v1.5.4 Google Calendar Plugin
     *
     * Copyright (c) 2011 Adam Shaw
     * Dual licensed under the MIT and GPL licenses, located in
     * MIT-LICENSE.txt and GPL-LICENSE.txt respectively.
     *
     * Date: Tue Sep 4 23:38:33 2012 -0700
     *
     */
     jQuery(document).ready(function($) {
    (function($) {
    
    var fc = $.fullCalendar;
    var formatDate = fc.formatDate;
    var parseISO8601 = fc.parseISO8601;
    var addDays = fc.addDays;
    var applyAll = fc.applyAll;
    
    fc.sourceNormalizers.push(function(sourceOptions) {
    	if (sourceOptions.dataType == 'gcal' ||
    		sourceOptions.dataType === undefined &&
    		(sourceOptions.url || '').match(/^(http|https):\/\/www.google.com\/calendar\/feeds\//)) {
    			sourceOptions.dataType = 'gcal';
    			if (sourceOptions.editable === undefined) {
    				sourceOptions.editable = false;
    			}
    		}
    });
    
    fc.sourceFetchers.push(function(sourceOptions, start, end) {
    	if (sourceOptions.dataType == 'gcal') {
    		return transformOptions(sourceOptions, start, end);
    	}
    });
    
    function transformOptions(sourceOptions, start, end) {
    
    	var success = sourceOptions.success;
    	var data = $.extend({}, sourceOptions.data || {}, {
    		'start-min': formatDate(start, 'u'),
    		'start-max': formatDate(end, 'u'),
    		'singleevents': true,
    		'max-results': 9999
    	});
    
    	var ctz = sourceOptions.currentTimezone;
    	if (ctz) {
    		data.ctz = ctz = ctz.replace(' ', '_');
    	}
    
    	return $.extend({}, sourceOptions, {
    		url: sourceOptions.url.replace(/\/basic$/, '/full') + '?alt=json-in-script&callback=?',
    		dataType: 'jsonp',
    		data: data,
    		startParam: false,
    		endParam: false,
    		success: function(data) {
    			var events = [];
    			if (data.feed.entry) {
    				$.each(data.feed.entry, function(i, entry) {
    					var startStr = entry['gd$when'][0]['startTime'];
    					var start = parseISO8601(startStr, true);
    					var end = parseISO8601(entry['gd$when'][0]['endTime'], true);
    					var allDay = startStr.indexOf('T') == -1;
    					var url;
    					$.each(entry.link, function(i, link) {
    						if (link.type == 'text/html') {
    							url = link.href;
    							if (ctz) {
    								url += (url.indexOf('?') == -1 ? '?' : '&') + 'ctz=' + ctz;
    							}
    						}
    					});
    					if (allDay) {
    						addDays(end, -1); // make inclusive
    					}
    					events.push({
    						id: entry['gCal$uid']['value'],
    						title: entry['title']['$t'],
    						url: url,
    						start: start,
    						end: end,
    						allDay: allDay,
    						location: entry['gd$where'][0]['valueString'],
    						description: entry['content']['$t']
    					});
    				});
    			}
    			var args = [events].concat(Array.prototype.slice.call(arguments, 1));
    			var res = applyAll(success, this, args);
    			if ($.isArray(res)) {
    				return res;
    			}
    			return events;
    		}
    	});
    
    }
    
    // legacy
    fc.gcalFeed = function(url, sourceOptions) {
    	return $.extend({}, sourceOptions, { url: url, dataType: 'gcal' });
    };
    
    })(jQuery);
    });

    Assuming that this is the wrong way to do it.. Any suggestions?

  8. Samuel Wood (Otto)
    Tech Ninja
    Posted 1 year ago #

    You didn't need to wrap that, it was already wrapped before you modified it. Change it back.

    Look at your own code, instead, where you're using the $ symbol.

  9. Cerzky
    Member
    Posted 1 year ago #

    Resolved.

Topic Closed

This topic has been closed to new replies.

About this Topic