在jquery模式對話框中加載外部php文件onclick

Question

我想在用戶點擊一個鏈接時打開一個jquery模式對話框。我想然後加載一個外部的php文件到對話框中。我使用這個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'); 
     }); 
     }); 
    }); 

和這個網站：

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

被設置爲顯示：無在.css文件。

而且上，一個形式裏面，鏈路稱爲：

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

（我會改變表的div）。

我沒有得到任何此代碼的錯誤，但沒有任何反應，當我點擊鏈接。我從其他堆棧溢出帖子中獲得了大部分上述內容。我錯過了什麼嗎？表格html是否干擾？

問候......

Answer 1

在你的鏈接

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

你有name="reg_link"應該是id="reg_link"代替，即

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

所以它會與下面的代碼

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

要使它成爲一個對話框工作，你可以使用

$(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

創建對話框加載.load()的頁面替換容器的新內容

你的點擊處理程序有語法錯誤的內容後，它看起來像你路過的組合一個函數和一個對象作爲參數，它應該是一個正常的函數。像

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

而且你<a>元素有reg_link作爲名稱爲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

我不完全熟悉.dialog()功能，但你使用.click()錯誤。部分問題是關於大括號{}的一些混淆。他們用於兩個完全分開的東西，而你在這裏混合兩個。

第一次使用花括號是指示塊的內部：循環的內部，條件的內部，函數的內部。例如：

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

的第二個用途是JSON（JavaScript對象符號），用於一個對象或關聯數組，其中屬性或值與以下列格式名稱或密鑰配對：

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

當你寫了$('#reg_link').click (function() {，你打開一個帶大括號的功能塊，而不是啓動JSON。因此，當你寫open:（好像這個是一個JSON並且你設置了open鍵），某些東西肯定不會按照你期望的方式工作（我很驚訝......有點......） 。實際上沒有錯誤）。你需要在這些大括號內編寫的是函數的代碼。在這種情況下，它可能只是這樣的：

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

一般來說，jQuery使用這兩個版本很多，常常將它們混合在一起（函數接受JSONs作爲參數，或JSONs包括函數回調爲條目），所以瞭解哪個是哪個是非常重要的。

編輯：谷歌搜索的一些重：.dialog()表明您還需要​​後調用它，這意味着該塊應該是這個樣子：

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

根據你自己的代碼，.dialog()實際上是這需要一個JSON作爲參數，所以假設位的正確，完整的代碼的函數的例子是這樣的：

$('#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, 
    }); 
});