Ładowanie zewnętrznego pliku php w modalnym oknie dialogowym jquery onclick

Question

Próbuję otworzyć modalne okno dialogowe jquery, gdy użytkownik kliknie łącze. Chciałbym załadować zewnętrzny plik php do okna dialogowego. Używam tego jQuery:

$(document).ready(function() { 
    $('#register').dialog({ 
     title: 'Register for LifeStor', 
     resizable: true, 
     autoOpen:false, 
     modal: true, 
     hide: 'fade', 
     width:350, 
     height:275, 
     });//end dialog 
     $('#reg_link').click (function() { 
      open: (function(e) { 
      $('#register').load ('register.php'); 
     }); 
     }); 
    }); 

i to HTML:

<div id="register"></div> 

który jest ustawiony na display: none w pliku .css.

Dalej wewnątrz postaci, związek nazywa się:

<td><font size="2">Not registered? <a href="#" name="reg_link">Sign-Up!</a></td> 

(będę zmianę tabeli div).

Nie otrzymuję żadnych błędów za pomocą tego kodu, ale nic się nie dzieje po kliknięciu łącza. Mam większość powyższych z innych postów przepełnienia stosu. Czy czegoś brakuje? Czy interferuje html tabeli?

Pozdrawiam ...

Answer 1

W linku

<a href="#" name="reg_link">Sign-Up!</a> 

masz name="reg_link" które powinny być id="reg_link" zamiast tj

<a href="#" id="reg_link">Sign-Up!</a> 

Więc to działa z poniższego kodu

$('#reg_link').click(function(e) { 
    e.preventDefault(); 
    $('#register').load('register.php'); 
}); 

aby to okno dialogowe można użyć

$(document).ready(function() { 

    var dlg=$('#register').dialog({ 
     title: 'Register for LifeStor', 
     resizable: true, 
     autoOpen:false, 
     modal: true, 
     hide: 'fade', 
     width:350, 
     height:275 
    }); 


    $('#reg_link').click(function(e) { 
     e.preventDefault(); 
     dlg.load('register.php', function(){ 
      dlg.dialog('open'); 
     }); 
     }); 
}); 

Just an example.

Answer 2

utworzyć okno po załadowaniu strony .load() zastępuje zawartość pojemnika z nową zawartością

Twoje kliknięcie obsługi zawiera błędy składniowe, Wygląda na to, przekazując połączenie funkcja i obiekt jako argument, powinna to być normalna funkcja. Jak

$('selector').click (function() { 
    //code 
}); 

również swoją elementem <a> ma reg_link jako nie nazwie id

$(document).ready(function() { 
    $('#reg_link').click (function() { 
     $('#register').load ('register.php', function(){ 
      $('#register').dialog({ 
       title: 'Register for LifeStor', 
       resizable: true, 
       modal: true, 
       hide: 'fade', 
       width:350, 
       height:275, 
      });//end dialog 
     }); 
    }); 
}); 

<td><font size="2">Not registered? <a href="#" name="reg_link" id="reg_link">Sign-Up!</a></td> 

Answer 3

Nie jestem zaznajomiony z funkcją .dialog(), ale używasz .click() źle. Częścią problemu jest pewne zamieszanie dotyczące nawiasów klamrowych {}. Są używane do dwóch całkowicie oddzielnych rzeczy, a ty mieszasz je tutaj.

Pierwszym zastosowaniem nawiasów klamrowych jest wskazanie wnętrza bloku: wnętrza pętli, wnętrza warunku, wnętrza funkcji. Np

// some code in the global scope 
function something() 
{ 
    // some different code within this function block 
} 
// function's done, we're back in global scope 

Drugie zastosowanie jest JSON (JavaScript Przedmiot Oznaczenia) do obiektu lub asocjacyjnej, gdzie właściwości lub wartości w połączeniu z nazwy lub kluczy w następującym formacie:

var jsonSomething = { 
    key1: value1, 
    key2: value2, 
    etc: etcvalue, 
}; 

Kiedy piszesz $('#reg_link').click (function() {, otwierasz blok funkcyjny z tym nawiasem klamrowym, nie uruchamiając JSON. Tak więc, kiedy piszesz open: (tak jakby ten był JSON i ustawiasz klucz open), coś zdecydowanie nie zadziała tak, jak tego oczekujesz (jestem zaskoczony ... że właściwie nie ma błędu). To, co musisz napisać w tych nawiasach klamrowych, to kod funkcji. W tym przypadku, to chyba tylko to:

$('#reg_link').click (function() { 
    $('#register').load ('register.php'); 
}); 

w ogóle, jQuery używa obu tych wersjach dużo, a często łączy je ze sobą (funkcje, które akceptują JSONs jako argumenty lub JSONs które zawierają wywołania zwrotne funkcyjne jak wpisów), więc naprawdę ważne jest, aby zrozumieć, które jest które.

EDIT: Niektóre Googling re: .dialog() sugeruje, że będzie trzeba także nazwać po .load(), co oznacza, że ​​blok powinien wyglądać mniej więcej tak:

$('#reg_link').click (function() { 
    $('#register').load ('register.php').dialog(/*argument(s) here*/); 
}); 

podstawie własnego kodu, .dialog() rzeczywiście jest przykładem funkcji, że trwa JSON jako argument, więc zakładając, że nieco za prawidłowy, pełny kod jest tak:

$('#reg_link').click (function() { 
    $('#register').load ('register.php').dialog({ 
     title: 'Register for LifeStor', 
     resizable: true, 
     autoOpen: false, 
     modal: true, 
     hide: 'fade', 
     width:350, 
     height:275, 
    }); 
});