jQuery: formu "başarı" döndü

3 Cevap php

kısa bir soru. Ben plug-in jQuery.forms.js kullanıyorum.

Ben bir form olmasını json ile bir php sayfası ve döner veri ileti.

Döndürülen verileri yeni bir formu (bu bilgileri göndermek için kullanılan formu yerine geçer) için kodudur. Etrafında sayfa yüklendiğinde değildi gibi yeni form, herhangi bir jQuery fonksiyonları bağlı değildir.

I formu ikinci kez kullanmanız gerekiyorsa, aynı zamanda jQuery fonksiyonunu kullanmaktadır böylece Yani, nasıl ben, yeni bir form tanımak ajax form alabilirsiniz?

// jQuery for submitting info to php doc and, on success, replacing the form 
$(document).ready(function() { 
    jQuery('form[id*=postOnline]').ajaxForm({ 
        dataType: 'json',
        success: function(data) { 
            $('#onlineStatus' + data.rid).html(data.formed).slideDown('slow');
    		bindNote(); 
         } 
    });
});

<!-- /////////////////////// POST ONLINE /////////////////////// -->

<div id='onlineStatus<?php echo $b_id ?>' class='postOnline'>
  <form name="postOnline"  id="postOnline<?php echo $b_id ?>" action="postOnline.php" method="post">
    <input type="hidden" value="<?php echo $b_id ?>" name="b" />
    <input type="hidden" value="1" name="p" />
    <input type="submit" class="button"  value="Post Online" />
  </form>			
</div>

<!-- /////////////////////// POST ONLINE /////////////////////// -->


// ... code for entering data into database and then...
$result = mysql_query( $sql );
if($result) {
if($show == '1'){$val = 'remove from online'; $num='0';}
if($show == '0'){$val = 'show online'; $num='1';}

$return = "
<form name='postOnline'  id='postOnline$id' action='postOnline.php' method='post'>
<input type='hidden' value='$b_id' name='b' />
<input type='hidden' value='$num' name='p' />
<input type='submit' class='button'  value='$val' />
</form> 
";
    print json_encode(array("rid" => $id, "formed" => $return));
}
?>

3 Cevap

Bu kadar kolay çözüm gerçekten çok zor değil ki, jQuery form eklentisi kullanarak ve elle bunu yapmıyorum:

$(document).ready(function() { 
    jQuery('form[id*=postOnline]').live('submit', function() {
        var formdata = $(this).serialize();
        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            dataType: 'json',
            data: formdata,
            success: function(data) { 
                $('#onlineStatus' + data.rid).html(data.formed).slideDown('slow');
                bindNote(); 
            }
        });
        return false;
    });
});

Kullandığınız Şimdi beri jQuery yeni (1.3) live functionality, any forms you add that match the form[id*=postOnline] seçici hala bu olay ile kablolu olacak.

Alternatif olarak, jquery form kodunu açmak ve onun bağlayıcı yapar her yerde bulmak ve onu kullanır, böylece değiştirmek için deneyebilirsiniz live. Hatta başka bir alternatif bir işlevi kablolama kapsayacak şekilde olması, ve bu yüzden gibi, başarı fonksiyonunun sonunda onu çağırır:

function bindForm() {
    jQuery('form[id*=postOnline]').ajaxForm({ 
        dataType: 'json',
        success: function(data) { 
            $('#onlineStatus' + data.rid).html(data.formed).slideDown('slow');
            bindNote();
            bindForm();
        } 
    });
}

$(document).ready(function() { 
    bindForm();
});

Ben çok düzgün olduğunu sanmıyorum, ama çalışması gerekir.

Sen ajax çağrısından sonra olay işleyicileri yeniden bağlamanız gerekir. I live events denilen jQuery yeni sürümünde yeni bir özellik duydum, o olsa bu gereksiz olur.

Sebebi ne olursa olsun sizin için jQuery bir ön-1.3 sürümü ile sıkışmış iseniz, "livequery" eklentisini kullanabilirsiniz.

etiketler