ugrás a tartalomhoz

Ajax form submit

Theo76 · 2019. Szep. 13. (P), 13.33
Sziasztok!


Egy olyan gondom van, hogy jQueryvel hívok meg egy formot tartalmazó "ablakot" az oldal betöltése után, amit ajax kezelne. Viszont valamiért nem adja át a scriptnek a vezérlést...

Így néz ki a form meghívása:

$.popUp = function( options ){
...
    showPopUp();

    function showPopUp() {
        var popUpWindow =   "<div class='popUpBackground'></div>" +
                            "<div class='popUpBoxContainer'>" +
                            "<div class='popUpBoxTable'>" +
                            "<div class='popUpBoxRow'>" +
                            "<div class='popUpBoxCell'></div>" +
                            "<div class='popUpBoxCell popUpWindow'>" +
                            "<div class='popUpBoxContent'>" +
                            "<div class='popUp-box popUpBorder-Black popUpBox-Shadow-normal popUp-box-radius'>" +
                            "<div class='popUp-box-title normal'>" + options['title']['text'] + "</div>" +
                            $formStart +
                            "<div class='popUp-box-content'>" + options['content'] + "<div class='popUp-box-buttons'>" + button + "</div>" + "</div>" +
                            ( ( $formStart == "" ) ? "" : "</form>" ) +
                            "</div>" +
                            "</div>" +
                            "</div>" +
                            "<div class='popUpBoxCell'></div>" +
                            "</div>" +
                            "</div>" +
                            "</div>";

        $( '#working' ).append( popUpWindow );
        $( '#working' ).css({
            opacity: 0,
            display: 'block'
        }).animate({opacity:1},100);
    }

};
A másik script tartalma:

$( document ).ready( function(){
...
    $( '#ajaxSubmit' ).submit( function() {
        var $dest = ( typeof $( this ).attr( 'data-dest' ) === 'undefined' ) ? 'working' : $( this ).attr( 'data-dest' );

        $.ajax({
            url:    $( this ).attr( 'action' ),
            type:   $( this ).attr( 'method' ),
            data:   $( this ).serialize(),
            mimeType:"multipart/form-data", 

            success: function( response ) {
                $( '#' + $dest ).html( response );
            },

            error: function( response ) {
                $( '#errorMsg' ).html( response );
            }
        });

        return false;
    });
...
A segítséget előre is köszönöm!
‹ div frissítés blokkolása ha a felhasználó görget Ajax, checkbox megtartása lapozáskor. ›
 ■
1

Nem értem

Pepita · 2019. Szep. 17. (K), 19.57
Mi az a $.popUp?
Mitől fog lefutni ez a függvény?
Mit jelent az, hogy:
jQueryvel hívok meg egy formot tartalmazó "ablakot"


Abból kiindulva, hogy magát a kérdést sem értem, arra következtetek, hogy a feladatot sem definiáltad megfelelően, ezért lett egy nagy katyvasz belőle, amit eddig nem tudott senki kihámozni.
Csak mellékesen jegyzem meg, hogy javascript-be nemigazán szoktunk így és ennyi sok html-t beégetni, valamint a "$( '#errorMsg' ).html( response );" is furcsa, kb bármilyen html kód (esetleg további javascript) jön a válaszban, gondolkodás nélkül megy a frontendre...
(Ha már jQuery, be lehet tenni a modal-t az eredeti html-be, csak display: none; és amikor szükség van rá, akkor $('#modal_ablak_id').show().)

Szerintem először azt írd le sorban, hogy mi a feladat. Pl.:

- Adott ez a felület (html kódrészlet)
- Júzer kattint az #én_gombom_id gombra, akkor
- szeretnék megjeleníteni egy (modal) ablakot,
- aminek a tertalma: (html kódrészlet)
- amikor megjelenik (vagy közvetlenül előtte) a modal, szeretnék egy ajax adatlekérést a http://akármi.com/ajax-kérés URL címről, majd
- a válasz függvényében megjeleníteni adatokat:
- Ha sikeres az ajax-kérés, akkor így és így,
- Ha hiba történt, akkor meg amúgy
- Végül a modal ablakon az #xyz gombra kattintva írjuk ki, hogy "Sikerült!" és zárjuk be az ablakot.

Ha kellően kis lépésekre és ügyesen fel tudod bontani, sokkal könnyebb lesz megfelelő megoldást találni.