CODEWITHSUNDEEP
phpjqueryajaxdom
Roger
Roger

Reputation: 8576

Interactive forms with PHP and Ajax via JQuery

I can't make the html loaded via ajax update the DOM. What am I doing wrong?

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;
?>

For those interested, here is the final working JQuery code:

$(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);
            }
        );
    });

});

Upvotes: 0

Views: 1221

Answers (1)

Wayne
Wayne

Reputation: 1290

Actually, the DOM is updated. But I think the selector is wrong.

Try this?

$(':radio:checked:last')

This will get the last checked radio input, which is probably what you want instead. Based on the markup:

<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>

The fieldset tag wraps everything up, so your handler can be defined like:

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

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

Upvotes: 1

Related Questions