[英]Here i want to load data in ajax hide show div
我想使用ajax
显示或隐藏数据div
在这里,我的代码作为脚本工作,但是我想像在ajax中一样加载它。
如果单击下一步按钮,则显示下一个div。
然后您单击上一个按钮,它将显示上一个div。
我的脚本代码如下:
<script>
$('#next').click(function() {
$('.current').removeClass('current').hide()
.next().show().addClass('current');
if ($('.current').hasClass('last')) {
$('#next').attr('disabled', true);
}
$('#prev').attr('disabled', null);
});
$('#prev').click(function() {
$('.current').removeClass('current').hide()
.prev().show().addClass('current');
if ($('.current').hasClass('first')) {
$('#prev').attr('disabled', true);
}
$('#next').attr('disabled', null);
});
</script>
我的HTML代码如下:
<h1> QUESTIONS</h1>
<style>
#div{display:none;}
</style>
<button id="prev" disabled="disabled"> PREVIOUS </button>
<button id="next"> NEXT </button>
<form action="<?php echo site_url('pages/answers');?>" method="post">
<div id="main">
<?php $i=1;
$tt=$ques->num_rows();
foreach($ques->result() as $qus)
{ ?>
<div <?php if($i==1){?>id="div1" class="first current" <?php } else {?> id="div" <?php } if($i==$tt) {?> class="last"<?php }?>>
<input type="hidden" name="q_id[]" value="<?php echo $qus->qst_id; ?>"/>
<?php echo $i.') ' .$qus->qst_questions;?>
<label> <input type="radio" name="<?php echo $qus->qst_id;?>" value="A"/><?php echo $qus->qst_option_a; ?></label>
<label> <input type="radio" name="<?php echo $qus->qst_id;?>" value="B"/><?php echo $qus->qst_option_b; ?></label>
<label> <input type="radio" name="<?php echo $qus->qst_id;?>" value="C"/><?php echo $qus->qst_option_c; ?></label>
<label> <input type="radio" name="<?php echo $qus->qst_id;?>" value="D"/><?php echo $qus->qst_option_d; ?></label>
</div>
<?php $i++; }?>
</div>
</form>
这里使用ajax显示/隐藏div。
怎么做 ? 请帮助任何人解决我的问题。
这里以它为例[' 请看这个 ']
这是在脚本中加载的,但我想在ajax中加载
更新您的Javascript:更新AJAX的配置,它应该可以工作。
$('#next').click(function() { $('.current').removeClass('current').hide() .next().show().addClass('current'); if ($('.current').hasClass('last')) { $('#next').attr('disabled', true); } $('#prev').attr('disabled', null); $.ajax({ url: "Url", success: function(result) { $('#main div:visible').html(result); }, error: function(err) { console.log($('#main div:visible').attr('id')); $('#main div:visible').html('dynamic html content'); } }); }); $('#prev').click(function() { $('.current').removeClass('current').hide() .prev().show().addClass('current'); if ($('.current').hasClass('first')) { $('#prev').attr('disabled', true); } $('#next').attr('disabled', null); $.ajax({ url: "Url", success: function(result) { $('#main div:visible').html(result); }, error: function(err) { console.log($('#main div:visible').attr('id')); $('#main div:visible').html('dynamic html content'); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <button id="prev" disabled="disabled">Prev</button> <button id="next">Next</button> <hr /> <div id="main"> <div id="div1" class="first current">Div 1</div> <div id="div2">Div 2</div> <div id="div3" class="last">Div 3</div> </div>
$('#next').click(function() {
$.ajax({url: "Url",
success: function(result){
$('.current').removeClass('current').hide()
.next().show().addClass('current');
if ($('.current').hasClass('last')) {
$('#next').attr('disabled', true);
}
$('#prev').attr('disabled', null);
}});
});
$('#prev').click(function() {
$.ajax({url: "Url", success: function(result){
$('.current').removeClass('current').hide()
.prev().show().addClass('current');
if ($('.current').hasClass('first')) {
$('#prev').attr('disabled', true);
}
$('#next').attr('disabled', null);
}});
});
请在成功部分编写代码,您可以从服务器端返回值,将在“结果”变量中找到您可以使用“结果”进行检查
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.