Form jQuery kullanarak DIV gönderin

6 Cevap php

Çözüm benim için orada çalışmıyor açıklanan çünkü ben, the one in this post benzer bir sorun bahsediyorum.

starting point jQuery UI sekmeleri ile (profil denir) bir HTML sayfası:

<div id="tabs"> 
	<ul> 
		<li><a href="#realtab">Foo Bar</a></li> 
		<li><a href="?cmd=changePassword" title="pwd-settings">
                        <span> Dynamic tab </span>
            </a></li>
	</ul>
</div>

HTML rendered within the DIV olduğunu:

<form method="post" id="subform" action="http://myhost.com/example.php">
    <input type="hidden" name="cmd" value="submitChangedPassword">

    <dl>
    	<dt>PWD1</dt>
    	<dd><input type="password" name="password" /></dd>

    	<dt>PWD CHK</dt>
    	<dd><input type="password" name="passwordChk" /></dd>

    	<dt>&nbsp;</dt>
    	<dd><input type="submit" value=" Apply " /></dd>
    </dl>
</form>

Buna ek olarak, ben (giriş bağlantılı yazı dayalı) JS script aşağıdakileri kullanın:

$('#subform').submit(function() { // catch the form's submit event - should I use the form id?
    $.ajax({ // create an AJAX call...
        data: $(this).serialize(), // get the form data
        type: $(this).attr('method'), // GET or POST
        url: $(this).attr('action'), // the file to call
        success: function(response) { // on success..
            $('#pwd-settings').html(response); // update the DIV - should I use the DIV id?
        }
});
return false; // cancel original event to prevent form submitting
});

Rekor sunulan, ancak davranış tarayıcıya bağlı olarak farklı olması:

  • IE, Firefox, Opera: DIV içine doğru içerik, mükemmel!

  • Safari, Chrome: sonuçlar, doğru içerik, ancak entire page is refreshed

Bana yanlış ne yapıyorum bildirin. Çok çok teşekkürler!

UPDATE 1: DIV adlı pwd-ayarlar yalnızca sekme arayüzü tarafından oluşturulur. Ben ({[) 1 (]}) ile HTML eklemek bile, davranış aynı olduğunu unutmayın.

UPDATE 2: Ben de yukarıda JavaScript kaldırıldı ve tüm tarayıcılar oldu "doğru içerik, ancak tüm sayfa yenilendiğinde" = "eski URL, yeni içerik". En kısa zamanda ben DIV içinde işlenmiş HTML sayfasına JavaScript ekledi, yukarıda açıklanan tarayıcıda çalışmaya başladı. Dolayısıyla ben iki olası hata nedenlerini görmek:

1) JS sadece tarayıcılar hataları olan veya idam değil

Sadece dışında var olan bir DIV adresleri, çünkü 2) DIV içinde JS çalışmıyor

6 Cevap

Bazı tarayıcılar (yani olanlar sorunlarınız) JS Soruda tarif farklı davranabilir nedeniyle sekmesinin içeriği Ajax ile daha sonra yüklü olduğu için formu henüz yok aslında yüklenir: Sonunda nedeni bulundu.

Dolayısıyla çözüm yukarıdaki kod yerine bir JS işlev oluşturmak ve sunmak (onClick tanıtan, düğme olur) düğmesine adapte etmektir:

<input type="button" value=" Apply " onClick="callMyFunction()" />

Bu daha sonra da Safari ve Chrome tarafından doğru ele alınır.

Tüm katılımcılara çok teşekkür ederiz!

jQuery 'serialize() fonksiyon sadece alır <input> elemanları. Bir bağlantı elemanı bir giriş değildir. $(this).serialize() verilerinize <a> elemanın değerini eklemek olmaz çağırıyor.

Bu verileri tutmak için <input> öğe eklemek gerekir. Belki denemek

<input type="hidden" value="changePassword" name="cmd" />

EDIT: Eğer tam html gönderebilir miyim? Hatta bir id özelliği yok çünkü şu anda o görünüyor itibaren, sizin seçiciler formu seçmek olmaz ....

İşte benim tahmin var -

Öncelikle, form üzerinde bir 'eylem' özniteliği yok. Yani $ için JS hattı (bu). Attr ('eylem') bir şey döndürmez. JQuery Ajax bu işler nasıl emin değilim.

Ama asıl mesele example.php senaryo olduğunu düşünüyorum ve nasıl aramaları başa çıkıyor. Ben Ajax uzman değilim, ama ben hiç bunu yapacağını yolu değildir. Eğer ShowFile () şeyler, dışarı çıkarmak ve sadece $ _REQUEST ['cmd'] echo, eğer çalışır?

Bunun dışında, ben fikir bitti. Ama bu tarayıcıların bir cilvesi değil, bu kod ile ilgili bir sorun var, ben bu kadar söyleyebilirim.

Bunu çözmek için en kolay yolu forma gizli bir giriş eklemek olacaktır:

<input type="hidden" name="cmd" value="checkPassword" id="cmd-field" />

Bu değer (bu durum gibi gelmiyor olsa) gösteren hangi sekmeye bağlı olarak değiştirmek gerekiyorsa sekme değiştiriliyor zaman, dinamik olarak değiştirebilirsiniz:

$("#invent-an-id-for-the-link-that-switches-to-this-tab").click(function() {
    $("#cmd-field").value("checkPassword");
});

Safari mükemmel web dev araçlara sahiptir. Windows sürümünü çalıştırıyorsanız eğer Tercihler etkinleştirmek için var -> Gelişmiş. Web Müfettiş açın ve istek / yanıt başlıklarını kontrol edin.

Bu çözüme doğrudan işaret edecek değil ama şu anda gitmek için çok fazla değildir. Bu başlıkları alın ve bize güncel tutmak!

Işleyicisi ikincisi tarayıcılar için yükleniyor değil ... formun içeriği dinamik olduğundan, gerek formun işleyicisi ayarlamadan önce DOM'ye yüklendiğinden emin olun ettik galiba.

Sen 2 olası çözümler var.

İlk olarak, sekme içeriği yüklendikten sonra, deftere script parça yük (sekme olay yük için onay jQuery doc: http://docs.jquery.com/UI/Tabs#event-load).

İkincisi, düğme tıklama kullanımı jquery canlı olay (şu anda olay göndermek desteklenmez). Çıkış: http://docs.jquery.com/Events/live

İkinci bir çözüm için kod:

$('#subform input:submit').live('click', function() { // catch the form's submit event - should I use the form id?
$.ajax({ // create an AJAX call...
    data: $(this).serialize(), // get the form data
    type: $(this).attr('method'), // GET or POST
    url: $(this).attr('action'), // the file to call
    success: function(response) { // on success..
        $('#pwd-settings').html(response); // update the DIV - should I use the DIV id?
    }

}); return false; // cancel original event to prevent form submitting });

First solution

Bunlar işe almak için yapılan değişiklikler şunlardır:

  1. Tpl_overview.tpl dan generic.js kaldır

  2. (Tpl_overview.tpl @) kodu değiştirin:

    $ (Function () {. $ ('# Tabs') sekmeleri ()});

Bu kod ile:

 $(function() {
     $("#tabs").tabs( {
        load: function(event, ui) {
           // load specific script to handle form submission
           if ($(ui.tab).attr('href') == '#pwd-settings') {
              $.getScript('generic.js');
           }
        }
     } );
  });

Bu sekmenin içeriği yüklendikten sonra generic.js komut dosyasını yüklemek ve çalıştırmak.

Kendinizi bu çok kez yaptığını görürseniz, belki sekme bağlantı isimlerinden sonra komut sayabilirim ...

Eğer o amele bilelim!

etiketler