Wordpress: JQuery conflict between 2 cutsom built plugins

Question

So, I have created 2 plugins, each of which are loaded into a page, plugin1 -> regionpages ( http://192.0.0.0/index.php/regionpages/ ) and plugin2 -> regionresults ( http://192.0.0.0/index.php/searchresults/ ).

Plugin 1, and associated javascript:

 function initialize() { feedData(); categoriesData(); } jQuery(document).ready(function () { initialize(); jQuery('#CountryList').change(function(){ var enableButtonTemp = jQuery('#CountryList').val(); if (enableButtonTemp === null || enableButtonTemp === "null" || enableButtonTemp === "") { //Check to see if there is any text entered console.log(enableButtonTemp); jQuery('.enableOnInput').prop('disabled', true); } else if (enableButtonTemp !== null || enableButtonTemp !== "null" || enableButtonTemp !== "") { console.log("The value of countries is " + enableButtonTemp + " so the submit button has been made clickable."); jQuery('.enableOnInput').prop('disabled', false); } }); }); function feedData() { jQuery(document).ready(function () { console.log("feedData is successfully hit."); var serialized = jQuery('#MyForm').serialize(); jQuery.ajax({ cache: false, type: "POST", async: false, url: gymRegions.ajaxurl, data:{action: "showcountries", makeselection: "getCountryList", serialized}, success: function (data, status, error) { //alert(data.html); jQuery('#CountryList').append(data.html); }, error: function (data, status, error) { alert("failed in feedData. The following data is being returned: " + data.html); console.log(data); console.log(status); console.log(error); } }); }); } function categoriesData(){ jQuery(document).ready(function () { console.log("categoriesData is successfully hit."); var serialized = jQuery('#MyForm').serialize(); jQuery.ajax({ cache: false, type: "POST", async: false, url: gymRegions.ajaxurl, data:{action: "showcountries", makeselection: "categoriesList", serialized}, dataType: "json", success: function (data) { jQuery('#CategoriesList').append(data.html); }, error: function (data, status, error) { console.log(data); console.log(status); console.log(error); } }); }); } function getCities() { jQuery(document).ready(function () { console.log("getCities is successfully hit."); jQuery('#CityList').empty(); jQuery('#TownList').empty(); var countryVal = jQuery("#CountryList").val(); var serialized = jQuery('#MyForm').serialize(); jQuery.ajax({ cache: false, type: "POST", async: false, url: gymRegions.ajaxurl, data:{action: "showcountries", makeselection: "getCityList", countryID: countryVal, serialized}, dataType: "json", success: function (data) { jQuery('#CityList').append(data.html); }, error: function (data, status, error) { console.log(data); console.log(status); console.log(error); } }); }); } function getTowns() { jQuery(document).ready(function () { console.log("getTowns is successfully hit."); var cityVal = jQuery("#CityList").val(); var serialized = jQuery('#MyForm').serialize(); jQuery.ajax({ cache: false, type: "POST", async: false, url: gymRegions.ajaxurl, data:{action: "showcountries", makeselection: "getTownList", cityID: cityVal, serialized}, dataType: "json", success: function (data) { console.log(data); jQuery('#TownList').append(data.html); }, error: function (data, status, error) { console.log(data); console.log(status); console.log(error); } }); }); } function getUserIDs() { jQuery(document).ready(function () { console.log("getUserIDs is successfully hit."); var countryVal = jQuery("#CountryList").val(); var cityVal = jQuery("#CityList").val(); var townVal = jQuery("#TownList").val(); var categoriesVal = jQuery("#CategoriesList").val(); var serialized = jQuery('#MyForm').serialize(); var url = window.location.hostname; jQuery.ajax({ cache: false, type: "POST", async: false, url: gymRegions.ajaxurl, data:{action: "showcountries", makeselection: "getUserIDs", countryID: countryVal, cityID: cityVal, townID: townVal, categoriesID: categoriesVal, locationHref: url, serialized}, dataType: "json", success: function (data) { localStorage.setItem('dataObjectTemp2', JSON.stringify(data)); var numericRecCount = parseInt(data.c); jQuery('#MyForm').submit(function (data) { jQuery.post('', function (data) { document.location.href = window.location.hostname + '/index.php/searchresults/'; }); return false; }); }, error: function (data, status, error) { alert("No records were returned for your search. Please make another selection."); console.log(data); console.log(status); console.log(error); } }); }); } 

 function getregions_scripts() { wp_enqueue_script( 'getregions-script', plugin_dir_url(__FILE__) . "assets/getregions.js", array('jquery'), '1.0', true ); wp_localize_script( 'getregions-script', 'gymRegions', array('ajaxurl' => admin_url('admin-ajax.php')) ); } add_action( 'wp_enqueue_scripts', 'getregions_scripts' ); if ( is_admin() ) { add_action( 'wp_ajax_showcountries', 'showcountries_callback' ); add_action( 'wp_ajax_no_priv_showcountries', 'showcountries_callback' ); add_action( 'wp_ajax_showcountries_frontend', 'showcountries_frontend' ); add_action( 'wp_ajax_no_priv_showcountries_frontend', 'showcountries_frontend' ); }else{ } function showcountries_callback() { } function showcountries_frontend() { $the_html = ' <form id="MyForm" method="Post"> <div style="float: left"> <select id="CountryList" onchange="getCities()" style="width: 150px !important; min-width: 150px; max-width: 150px;"></select> <select id="CityList" onchange="getTowns()" style="width: 150px !important; min-width: 150px; max-width: 150px;"></select> <select id="TownList" style="width: 150px !important; min-width: 150px; max-width: 150px;"></select> <select id="CategoriesList" style="width: 170px !important; min-width: 170px; max-width: 170px;"></select> </div> <input type="submit" name="submit" id="submitBtn" class="enableOnInput" disabled="disabled" onclick="getUserIDs()" /> </form>'; return $the_html; } add_shortcode("sc_frontend", "showcountries_frontend"); 

Plugin2, and it's associated javascript:

 (function( $ ) { "use strict"; $(function() { $(document).ready(function () { feedNewResults(); function feedNewResults() { //$(document).ready(function () { var dataObject2 = JSON.parse(localStorage.getItem('dataObjectTemp2')); $('#searchNewCount').append(dataObject2.c); $('#searchNewResult').append(dataObject2.q); } function locationChange(val){ localStorage.setItem('dataDetailedSearch', JSON.stringify(val)); window.location.href = window.location.hostname + "/index.php/detailed-search-results/?uid=" + val; } }); }); }(jQuery)); 

  function getnewsearchresults_scripts() { wp_enqueue_script( 'getnewsearchresults-script', plugin_dir_url(__FILE__) . "assets/getnewsearchresults.js", array('jquery'), '1.0', true ); wp_localize_script( 'getnewsearchresults-script', 'resultsNewSearch', array('ajaxurl' => admin_url('admin-ajax.php')) ); } add_action( 'wp_enqueue_scripts', 'getnewsearchresults_scripts' ); add_action( 'wp_ajax_newsearchresults', 'newsearchresults_callback' ); add_action( 'wp_ajax_no_priv_newsearchresults', 'newsearchresults_callback' ); 

Now here comes the fun part. If I deactivate plugin 2, plugin 1 works with no issues. But if I leave plugin 2 activated, only the country and category dropdowns of plugin1 are populated. Attempting to select a country to populate the city dropdown with associated country cities, will then not work. This is consistent in all browsers.

How do I resolve this jQuery conflict issue?

Answer 1

You can put a page check before including JS ,

if ($page==='mypluginpage') { wp_enqueue_script( 'getregions-script', plugin_dir_url( FILE ) . "assets/getregions.js", array('jquery'), '1.0', true ); }

Answer 2

Try to use "wp_enqueue_script" function to load jQuery. It will check if jQuery dose not loaded yet , will load it and if is loaded it dose not do any thing. This is a sample code of usage for this function.

wp_register_script('jquery', get_template_directory_uri().'/assets/js/vendor/jquery-1.11.0.min.js', '1.0.0');
wp_enqueue_script('jquery'); // Enqueue it!