在wordpress插件中使用Jquery
Using Jquery inside wordpress plugin
我有一个插件,其中包含从数据库插入/获取数据的函数。我的问题是如何使用jQuery或在WordPress插件中链接任何其他JS。我搜索并找到了很多文章,但不清楚,请我在我的插件中添加jquery文件的步骤。我尝试过的嗝嗝步骤在我的页面顶部添加此行。
这是我的插件代码
<?php
/*
Plugin Name: myplugin
Description: form
Version: 4.0
Author: hercal
License: GPL
*/
?>
<?php
function form_creation()
{
global $wpdb;
function my_scripts_method()
{
wp_enqueue_script('fn',plugins_url('/myplugin/fn.js' , __FILE__ ),
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>
<form action=" <?php get_permalink(); ?> " method="post" id="myform">
<table>
<tr>
<td><input type="text" id="txtname" name="txtname" placeholder="Your Name"/> </td>
</tr>
<tr>
<td>
<!-- drop down menu (Country )-->
<select id='select_Country' name="select_Country" >
<option selected="selected" disabled="disabled"> -- Select Country -- </option>
<?php
$query='select Code,Country from _country order by Country';
$result = $wpdb->get_results($query);
foreach( $result as $row )
{
echo '<option value='.$row->Code.'>'.$row->Country.'</option>';
}
?>
</select>
</td>
</tr>
<tr>
<td>
<!-- drop down menu (City )-->
<select id="select_city" name="select_city">
<option selected="selected"> -- Select City -- </option>
</select>
</td>
</tr>
<tr>
<td> <input type="submit" id="btnsubmit" value="Submit" name='submit'/> </td>
</tr>
</table>
</form>
<?php } ?>
<?php
if($_POST['submit'])
{
$name=strip_tags($_POST['txtname']);
$country=$_POST['select_Country'];
$city=$_POST['select_city'];
$insertQuery="insert into _customers(Name,Country,City)values('$name','$country','$city')";
$wpdb->query($insertQuery);
}
?>
<?php add_shortcode('test',form_creation); ?>
下面是 fn.js它位于 C:''wamp''www''test''wp-content''plugins''myplugin''fn.js
<script type="text/javascript">
$(document).ready(function(){
<!-- ajax method to bind the dropdown menu of model-->
$("#select_brand").change(function(){
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax({
type: "POST",
url: "model.php",
data: dataString,
cache: false,
success: function(data)
{
$("#select_Model").html(data);
}
});
});
<!-- ajax method to bind the dropdown menu of city-->
$("#select_Country").change(function(){
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax({
type: "POST",
url: "city.php",
data: dataString,
cache: false,
success: function(data)
{
alert("yes");
$("#select_city").html(data);
}
});
});
});
</script>
最后是城市代码.php
<?php
if($_POST['id'])
{
global $wpdb;
$id=$_POST['id'];
$query="select id,CountryCode,City from _city where CountryCode='$id'";
$result=$wpdb->get_results($query);
echo '<option selected="selected" disabled="disabled"> -- Select City -- </option>';
foreach ($result as $row)
{
$id=$row->id;
$city=$row->city;
echo '<option value="'.$id.'">'.$city.'</option>';
}
}
?>
问题是城市下拉列表无法获取值。
你显然在你的wordpress实现中的其他地方包含了另一个自定义脚本/js文件,但没有让它依赖于jQuery,因此它在jQuery加载之前运行。因此,请确保包含jQuery代码的自定义脚本依赖于它。
请参阅下文(记下函数中的array('jquery')
):
<?php
function my_scripts_method() {
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/js/custom_script.js',
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>
来源:函数参考/wp enqueue script - 链接依赖于 jQuery 的主题脚本
通过使用
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
在插件文件中对脚本进行排队
例
function my_scripts_method() {
wp_enqueue_script(
'jsscript',
plugins_url( '/js/jsscript.js' , __FILE__ ),
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
链接- http://codex.wordpress.org/Function_Reference/wp_enqueue_script
相关文章:
- Wordpress中带有JQuery Accordion的未定义匿名函数
- 如何在WordPress的头中加载自定义jQuery
- 如何在category.php中执行jquery,这应该适用于类别wordpress中的每个帖子
- jQuery is not defined - WordPress footer.php
- 自定义jQuery脚本无法在Wordpress上运行
- 在WordPress站点中加载jquery.js后加载javascript代码
- 将Jquery与wordpress主题一起使用
- 在wordpress中找不到jQuery函数
- Wordpress 3级水平导航-需要jquery/javascript帮助进行对齐
- 通过Wordpress中的jquery调用运行php文件
- Wordpress AJAX with raw javascript? NO Jquery
- Jquery在wordpress内容中不起作用
- 为什么这个jQuery图像映射在WordPress上不起作用
- 无法使用jquery(WordPress,层滑块)找到DOM元素
- 将递增的类与不同循环中递增的id进行匹配[jQuery/Wordpress]
- Jquery wordpress 内容加载
- 修复了浮动元素jQuery WordPress
- wp_localize_script 带句柄 jquery - WordPress 脚本
- jquery,Wordpress隐藏元素时,浏览器是一定的宽度
- JQuery Wordpress enqueue脚本不工作