Question

我无法通过ajax加载html来更新DOM。我做错了什么？

HTML：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Test</title>

<link rel="stylesheet" type="text/css" href="//atpc.info/f/styles.css" media="all">
<link rel="stylesheet" type="text/css" href="//atpc.info/f/form.css" media="all">
<link rel="stylesheet" type="text/css" href="//atpc.info/f/pesquisa.css" media="all">

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="//atpc.info/f/t/test.js"></script>
</head>
<body>

<form id="form_p" action="">

    <fieldset class="p_test">
        <legend>Test question text?</legend>
        <label for="p_test_y"><input type="radio" id="p_test_y" name="p_test" value="y">Yes!</label>
        <label for="p_test_n"><input type="radio" id="p_test_n" name="p_test" value="n">No!</label>
        <a class="continue_r">Continue &rarr;</a>
    </fieldset>

    <small id="update_p"></small> <span id="status_p"></span>

</form>

</body>
</html>

JQuery的：

$(document).ready(function() {

    $('label').css('display','block');

    $('a.continue_r').live('click',function(event) {
        var id_p=$('input:radio:first').attr('name');
        var v_r=$('input:radio:checked').val();
        alert(v_r);

        $.post(
            'test.php',
            { id_p:id_p, v_r:v_r },
            function(data){
                alert('Retorno:\n' + data);
                //$('form').append($(data).hide().fadeIn('slow'));
                $('body').append(data);
                $('label').css('display','block');
            }
        );
    });

});

PHP：

<?
if(!empty($_REQUEST['id_p'])) $id_p=$_REQUEST['id_p'];
else die('Ops! no id_p');

if(!empty($_REQUEST['v_r'])) $v_r=$_REQUEST['v_r'];
else die('Ops! no v_r');

if($_REQUEST['id_p']=='p_test1') die('Victory!!!');

echo<<<FORM
<fieldset class="p_test1">
    <legend>Test 1 question text?</legend>
    <small>Last question was $id_p and you option was $v_r</small>
    <label for="p_test1_y"><input type="radio" id="p_test1_y" name="p_test1" value="ohy">Oh, Yes!</label>
    <label for="p_test1_n"><input type="radio" id="p_test1_n" name="p_test1" value="ohn">Oh, No!</label>
    <a class="continue_r">Continue &rarr;</a>
</fieldset>
FORM;
?>

对于那些感兴趣的人，这是最终正在运行的JQuery代码：

$(document).ready(function() {

    $('label').css('display','block');

    $('a.continue_r').live('click',function(event) {

        //var fieldset=$(this).closest('fieldset');
        var fieldset=$(this).parent('fieldset');
        //alert(fieldset.attr('class'));

        //var id_p=$('input:radio').attr('name');
        //var id_p=fieldset.attr('class');
        var id_p=$('fieldset:last').attr('class');
        var v_r=$('input:radio:checked:last').val();
        if(v_r=='') v_r=$('textarea:last').val();

        fieldset.hide();

        //alert('id_p = '+id_p+' - v_r = '+v_r);

        $.post(
            'test.php',
            { id_p:id_p, v_r:v_r },
            function(data){
                //alert('Retorn:\n' + data);
                $('body').append($(data).hide().fadeIn('slow'));
                //$('body').append($(data));
                //$('body').append($data);
                $('label').css('display','block');
                //console.log(data);
            }
        );
    });

});

Answer 1

实际上，DOM已更新。但我认为选择器是错误的。

试试这个？

$(':radio:checked:last')

这将获得最后一次检查的无线电输入，这可能是你想要的。基于标记：

<fieldset class="p_test">
    <legend>Test question text?</legend>
    <label for="p_test_y"><input type="radio" id="p_test_y" name="p_test" value="y">Yes!</label>
    <label for="p_test_n"><input type="radio" id="p_test_n" name="p_test" value="n">No!</label>
    <a class="continue_r">Continue &rarr;</a>
</fieldset>

fieldset标记将所有内容都包装起来，因此您的处理程序可以定义为：

$('a.continue_r').live('click', function() {
    var $fieldset = $(this).parent('fieldset');

    // Do stuff like $fieldset.find(), which ensures that your matches are contained therein.
});

通过JQuery与PHP和Ajax交互式表单

1 个答案: