Question

Ben ekli pasajı gibi bir PHP dosyası bir HTML formu var:

When I hit the "Save Details" button, I want the page to load a jQuery UI modal dialog. That dialog will execute a controller action (ex:savedetails) through Ajax. Essentially, the controller action will get all the POST details in "frmEmployees" and saves the changes to a database through Ajax.

Ben de Ajax içeriği (Ajax ile "/ public / empdetailcontroller" demek, denetleyici eylem yoluyla tüm POST değişkenleri alın) ile diyaloğunu yüklemek için mantık ilgileniyorum. Yani, çok aşağıda HTML gibi bir şey var.

Herhangi bir düşünce?

Pasajı:

    <form name="frmEmployees" id="frmEmployees" method="POST" action="">
        <table>
            <tr><td>Name:</td><td><input type="text" name="empName" size="50"></td></tr>
            <tr><td>City:</td><td><input type="text" name="empCity" size="50"></td></tr>
            <tr><td>Country:</td><td><input type="text" name="empCountry" size="50"></td></tr>
            <tr><td colspan=2 align=center><input type="button" name="btnsubmit" value="Save Details"></td></tr>
        </table>
    </form>

    <div id="dialogSaveChanges"
         title="Saving.."
         style="display:none;"><p><span
           class="ui-icon
           ui-icon-info"
           style="float:left; margin:0 7px 20px 0;"
           ></span><span id="dialogText-savechanges"></span></p></div>

    <script language="JavaScript>
        $(document).ready(function() {
            $('#dialogSaveChanges').dialog({
                        autoOpen: false,
                        width: 400,
                        modal: true,
                        title: titleText,
                        closeOnEscape: false,
                        open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
                        resizable: false,
                buttons: {
                    Ok: function() {
                        $(this).dialog('close');
                    }
                }
            });
            $('#btnSaveChanges').click(function() {
                $('#dialogSaveChanges').dialog('open');
                $("span#dialogText-savechanges").html("Your Changes have been saved successfully.");
            });
        });
    </script>

Answer 1

Siz formu değerleri gönderilmek üzere sipariş formu göndermeniz gerekir. Mantık böyle bir şey takip eder:

Form Bind fonksiyonu (örneğin, submitform), normal (non-AJAX) form gönderimini önlemek için yanlış dönen, olay göndermek.
submitform fonksiyonu $. ajax çağrısı yapar.
Istek (: beforeSend olay) gönderilmeden önce AJAX çağrı iletişim kutusunu açmak için yapılandırılır.
Iletişim kutusu "Yükleniyor ..." metin / görüntü ile doldurulur.
Ajax çağrısı (olaylar: başarı / başarısızlık) başarı ya da başarısızlık, iletişim kutusu sonuçlar ya bir hata mesajı ile doldurulur.

Kod gibi görünebilir:

$('#frmEmployees').submit( function() {
  $.ajax({
    url: this.attr('action'), // Make sure your form's action URL is correct.
    method: 'POST',
    data: this.serialize(), // this = $('#frmEmployees')
                            // Add hidden form inputs to send any control
                            // parameters to your server script.
    beforeSend: openDialogFunction,
    success: handleFormSuccess,
    failure: handleFormFailure
  });

  return false; // prevent normal form submission.
});

Bu gibi programlanabilir ise, sayfa da sadece iletişim kutusu olmaz, javascript olmadan çalışacaktır.

Answer 2

Emin değilim tamamen yapmak için çalışıyoruz anlamak, ama ben deneyeyim ...

Yani, istediğiniz:

AJAX ile bir kontrolöre detay formu gönderin.
Denetleyicisi DB form verilerini kaydetmek.
Başarı, "Başarılı" mesajı ve kaydedilmiş öğeleri içeren bir iletişim kutusu gösterir.
(Eğer bu söz etmedi) hata, sana doğru alternatif bir yöntem, görüntülemek istiyorsunuz varsayıyorum?

jQuery Ajax methods içine bak.

jQuery UI Dialog - PHP Ajax

2 Cevap

etiketler