2つのプラグインを作成しました。それぞれプラグイン1 - >リージョンページ(http://192.0.0.0/index.php/regionpages/)とplugin2-> regionresults(http://192.0.0.0/index.php/searchresults/)にロードされます。Wordpress:2つのcutsomで作成されたプラグイン間のJQueryの競合
プラグイン1、および関連の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で、それが関連するの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() {
\t 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');
ここで楽しい部分が来る。プラグイン2を無効にすると、プラグイン1は問題なく動作します。しかし、プラグイン2を有効にしたままにすると、plugin1の国とカテゴリのドロップダウンだけが設定されます。都市のドロップダウンに関連する国の都市を設定する国を選択しようとすると、機能しません。これはすべてのブラウザで一貫しています。
このjQueryの競合の問題を解決するにはどうすればよいですか?
両方のスクリプトが既に依存関係としてjqueryのをロードします。 –