0

ここに簡単なアプリケーション(QandATable2.php) があります。ユーザーがプラス ボタンをクリックすると、モーダル ウィンドウが開き、別のページ (previousquestions.php) に保存されている詳細が表示されます。

今私が抱えている問題は、テキストボックスが空白のときに「検索」ボタンをクリックすると、ページが独自のページにロードされ、そのページに詳細が表示されることがわかります。これは正しくありません。

私がやりたいことは、ユーザーが検索ボタンをクリックした場合、詳細をページ全体ではなく、モーダル ウィンドウ内に保存することです。使用する最善の解決策は、iframe を使用することだと聞きました。それで、iframeを使用してこれを達成する方法を知っている人はいますか?

私が使用しているモーダル ウィンドウは SimpleModal と呼ばれ、その Web サイトはこちらです。

以下は QandATable2.php コードで、プラス ボタンを表示し、モーダル ウィンドウを開き、モーダル ウィンドウのコンテンツを previousquestions.php ページにリンクします。

<script type="text/javascript">          
    function plusbutton() { 
        // Display an external page using an iframe 
        var src = "previousquestions.php"; 
        $.modal('<iframe src="' + src + '" height="100%" width="100%" style="border:0">');
        return false;
    }   
    function closewindow() {     
        $.modal.close(); 
        return false;
    }         
</script>

<h1>CREATING QUESTIONS AND ANSWERS</h1>
<table id="plus" align="center">
    <tr>
        <th>
            <a onclick="return plusbutton();">
                <img src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage"/>
            </a>
            <span id="plussignmsg">(Click Plus Sign to look <br/> up Previous Questions)</span>
        </th>
    </tr>
</table>

以下は、モーダル ウィンドウに詳細を表示し、検索機能が保存されている場所の previousquestions.php コードです。

<?php
    foreach (array('questioncontent') as $varname) {
        $questioncontent = (isset($_POST[$varname])) ? $_POST[$varname] : '';
    }
?>

<div id="previouslink">
    <button type="button" id="close" onclick="return closewindow();">Close</button>
    <h1>PREVIOUS QUESTIONS</h1>

    <p>Search for a previous question by entering in a phrase in the search box below and submitting the phrase</p>

    <form action="previousquestions.php" method="post">
          <p>Search: <input type="text" name="questioncontent" value="<?php echo $questioncontent; ?>" /></p>
          <p><input id="searchquestion" name="searchQuestion" type="submit" value="Search" /></p>
    </form>
</div>

<?php 
    //...connected to DB
    if (isset($_POST['searchQuestion'])) {
        $questionquery = "SELECT QuestionContent FROM Question
              WHERE(QuestionContent = '".mysql_real_escape_string($questioncontent)."')";
        if (empty($questioncontent)){
            echo "Please enter in a phrase in the text box in able to search for a question";
        }
?>
4

2 に答える 2

2

から抜粋:

// Display an external page using an iframe
var src = "http://365.ericmmartin.com/";
$.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', {
    closeHTML:"",
    containerCss:{
        backgroundColor:"#fff",
        borderColor:"#fff",
        height:450,
        padding:0,
        width:830
    },
    overlayClose:true
});

ニーズに合わせて:

function plusbutton() {
    // Display an external page using an iframe
    var src = "previousquestions.php";
    $.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', {
        closeHTML:"",
        containerCss:{
            backgroundColor:"#fff",
            borderColor:"#fff",
            height:450,
            padding:0,
            width:830
        },
        overlayClose:true
    });
}

そして、フォームが通常どおりに機能するようにします (ここではイベント ハンドラーはありません)。それが機能しない場合はtarget="_self"、フォームの属性を追加してみてください。これにより、ページが iframe 内で開くことが保証されます。

それ以外の場合は、iframe の代わりに ajax を使用して通常の div 内にロードすることをお勧めしますが、それはあなた次第です。

更新:コメントで質問に答えるには:

問題 1: モーダル ボックスが高さ 100%、幅 50% に設定されているため、iframe を同じに設定しました。幅は完璧になりましたが、iframe の高さは 100% になりません。

style="width:100%;height:100%;"代わりに試してくださいwidth="100%" height="100%"(これらの属性にパーセンテージ値を入れてもうまくいかないと思います)

更新 2 : 問題はここにはないようです.simplemodel-dataが、iframe を含むクラスでは、「ハッキーな」解決策は css: に追加することです.somplemodel-data {height: 100%;}。ドキュメントをチェックして、それについて「公式」なものがあるかどうかを確認してください。

問題 2: ユーザーが「閉じる」ボタンをクリックするとモーダル ウィンドウが閉じられる閉じるボタンがありますが、現在はモーダル ウィンドウが閉じず、未定義であると表示され続けます。

closewindow関数は親ウィンドウで定義されているため、iframe 内から呼び出しているため、閉じるボタンは機能しません。これを克服するには、2 つの解決策があります。1. 閉じるボタンを iframe の外側に配置し、残りはそのままにしておくか、親ウィンドウのclosewindow関数を呼び出します。

1の場合:$.modal('<button type="button" id="close" onclick="return closewindow();">Close</button><iframe src="' + src + '" style="border:0;width:100%;height:100%;">');「QandATable.php」内

2の場合:<button type="button" id="close" onclick="return parent.closewindow();">Close</button>「previousquestions.php」内(または、に置き換えるかもしれませんが、同じparenttopと思います)

于 2012-05-24T12:13:00.327 に答える
0

iframeにID ('iframe') を追加して、 previousquestions.phpeg という名前の新しいファイルを作成します。このファイルはsearch.php、検索文字列として 1 つの URL パラメーターを受け入れ、そこに PHP 検索コードを配置します。次に、フォームでJavaScriptイベントハンドラーを設定します

<form action="" onsubmit="javascript:document.getElementById('iframe').src =
  'search.php?q='+encodeURI(document.forms[0].questioncontent.value); return false;">
于 2012-05-24T11:35:34.523 に答える