web-dev-qa-db-ja.com

jqueryモーダルダイアログonclickで外部phpファイルをロードします

ユーザーがリンクをクリックしたときに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');
        });
      }); 
    });

そしてこのhtml：

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

これは、.cssファイルでdisplay：noneに設定されています。

さらに、フォーム内では、リンクは次のように呼び出されます。

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

（テーブルをdivに変更します）。

このコードでエラーは発生しませんが、リンクをクリックしても何も起こりません。私は他のスタックオーバーフローの投稿から上記のほとんどを取得しました。私は何かが足りないのですか？テーブルのhtmlが干渉していますか？

よろしく...

jquerymodal-dialog
8
cdonahue

あなたのリンクで

<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');
         });
      }); 
});

ほんの一例 。

17
The Alpha

ページを読み込んだ後にダイアログを作成します .load() コンテナのコンテンツを新しいコンテンツに置き換えます

クリックハンドラーに構文エラーがあります。引数として関数とオブジェクトの組み合わせを渡しているようです。通常の関数である必要があります。お気に入り

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

また、あなたの<a>要素にはreg_linkidではなく名前として

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

私は.dialog()関数に完全には精通していませんが、.click()を間違って使用しています。問題の一部は、中括弧_{}_に関する混乱です。それらは2つの完全に別個のものに使用され、ここでは2つを混ぜ合わせています。

中括弧の最初の使用法は、ブロックの内部（ループの内部、条件の内部、関数の内部）を示すことです。例えば：

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

2番目の用途は、オブジェクトまたは連想配列のJSON（JavaScript Object Notation）です。ここで、プロパティまたは値は、次の形式の名前またはキーとペアになっています。

_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はこれらのバージョンの両方を使用しますたくさん、そしてしばしばそれらを一緒に混ぜます（引数としてJSONを受け入れる関数、またはエントリとして関数コールバックを含むJSON）、それでどちらがであるかを理解することは本当に重要ですこれ。

編集：いくつかのグーグルre：.dialog()は、.load()の後に呼び出す必要があることを示唆しています。つまり、ブロックは次のようになります。

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