Ajax form submit
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:A másik script tartalma:A segítséget előre is köszönöm!
■ 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);
- }
- };
- $( 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;
- });
- ...
Nem értem
Mitől fog lefutni ez a függvény?
Mit jelent az, hogy:
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.