我使用的Word preSS作为内容管理系统和我的模板与中
类股利,其中包含一个下拉列表。我的目标是让在AJAX方法,该droplist和查询后的价值与该值,然后重新装入刚中
DIV用ajax,为获得更清晰这里是标记:
<选择>
<期权价值=1>项目1< /选项>
<期权价值=2>项目2'; /选项>
<期权价值=3>项目第3版; /选项>
<期权价值=4>项目4℃/选项>
< /选择>
------------------
< DIV CLASS =内容>
< PHP
$ ARGS =阵列(
meta_query=>阵列(
阵列(
'键'=> 元,
'值'=> $ select_value',
)
)
);
query_posts($参数);
?>
?< PHP的,如果(have_posts()):而(have_posts()):the_post(); ?>
< PHP the_content(); ?>
< PHP ENDWHILE;其他:>
< P>对不起,没有后该值发现< / P>
< PHP ENDIF; ?>
我觉得样品code是明确的,但我想这样做的过程:
用户选择下拉列表中的项目 - >获得选择的价值 - >把它放在$ select_value - >运行查询 - >显示DIV盒
不使用重新加载整个页面的ajax ...
有人可以帮助我走出书面方式呢?
解决方案 <选择一个id =选择,下拉>
<期权价值=1>项目1< /选项>
<期权价值=2>项目2'; /选项>
<期权价值=3>项目第3版; /选项>
<期权价值=4>项目4℃/选项>
< /选择>
有关此实现,你应该有管理员阿贾克斯的话preSS知识。
管理阿贾克斯: 在 的header.php
<脚本类型=文/ JavaScript的>
VAR ajax_url ='<?PHP的回声ADMIN_URL(管理-ajax.php'); ?>';
< / SCRIPT>
在你自定义的js文件
我-custom.js ,在排队的js文件
jQuery的(文件)。就绪(函数(){
jQuery的(身体)。在('变','#选择,下拉',函数(){
VAR selected_item = jQuery的(本).VAL();
jQuery.ajax({
键入:POST,
网址:ajax_url
数据: {
动作:load_posts,
selected_item:selected_item,
},
成功:函数(RES){
执行console.log(RES);
//追加结果在前端
jQuery的('盒子')HTML(RES)。
},
})
})
});
在您的 function.php
函数_boom_load_posts(){
//在这里得到您的结果按选定的选项
如果(!空($ _ POST ['selected_item'])){
$ selected_item = $ _ POST ['selected_item'];
$输出='';
//的code按selected_item,结果存储在$输出休息
$ ARGS =阵列(
meta_query=>阵列(
阵列(
'键'=> 元,
'值'=> $ select_value',
)
)
);
query_posts($参数);
如果(have_posts()):而(have_posts()):the_post();
。$输出= get_the_content();
ENDWHILE;其他:
$输出=< P>对不起,没有后该值发现< / P>中
ENDIF;
回声$输出; //你在这里产生
死亡(1);
}
}
add_action('wp_ajax_load_posts','_dot1_load_posts');
add_action('wp_ajax_no_priv_load_posts','_dot1_load_posts');
进行必要的更改,因为我不能发布整个code对你来说,做一些努力和上面的code将有助于你得到一个想法,它是如何去工作。
i'm using Wordpress as content management system and my template has a div with box
class, and contains a dropdown list . my goal is getting the value of this droplist and query post in ajax method with this value,then reload just box
div using ajax , for getting more clear here is markup :
<select>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
</select>
------------------
<div class="content">
<?php
$args = array(
"meta_query" => array(
array(
'key' => 'meta',
'value' => '$select_value',
)
)
);
query_posts( $args );
?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; else: ?>
<p>sorry no post found with this value.</p>
<?php endif; ?>
i think sample code is clear , but i want to do this processes:
user select an item in dropdown list --> get select value --> put it in $select_value --> run query --> show the div box
without reloading entire page using ajax...
Can someone help me out writting this?
解决方案 <select id="select-dropdown">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
</select>
For this to achieve you should have knowledge of Admin Ajax in wordpress.
Admin Ajax: in your header.php
<script type="text/javascript">
var ajax_url = '<?php echo admin_url('admin-ajax.php'); ?>';
</script>
in you custom js file
my-custom.js, enqueue the js file
jQuery(document).ready(function(){
jQuery(body).on('change','#select-dropdown', function(){
var selected_item = jQuery(this).val();
jQuery.ajax({
type: "POST",
url: "ajax_url",
data: {
action: 'load_posts',
selected_item: selected_item,
},
success: function(res){
console.log(res);
//append the result in frontend
jQuery('.box').html(res);
},
})
})
});
In your function.php
function _boom_load_posts(){
//get your results here as per selected option
if(!empty($_POST['selected_item'])){
$selected_item = $_POST['selected_item'];
$output = '';
//rest of the code as per selected_item, store result in $output
$args = array(
"meta_query" => array(
array(
'key' => 'meta',
'value' => '$select_value',
)
)
);
query_posts( $args );
if ( have_posts() ) : while ( have_posts() ) : the_post();
$output .= get_the_content();
endwhile; else:
$output .= "<p>sorry no post found with this value.</p>"
endif;
echo $output;//you result here
die(1);
}
}
add_action('wp_ajax_load_posts', '_dot1_load_posts');
add_action('wp_ajax_no_priv_load_posts', '_dot1_load_posts');
make the required changes, as I can't post the whole code for you, make some efforts and the above code will help you get an idea that how it's going to work.
相关推荐
最新文章