3

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

今私が抱えている問題は、テキストボックスが空白のときに「検索」ボタンをすぐにクリックすると、ページが独自のページにロードされ、検索用のフレーズに入力するメッセージが表示され、それが表示されることです。以前にモーダル ウィンドウからそのページに表示されたすべての機能も表示されます。これは正しくありません。

私がやりたいことは、ユーザーが検索ボタンをクリックした場合、フォームを投稿してメッセージを出力するときに、ページ全体ではなくモーダルウィンドウ内で実行することです。それで、これがどのように達成できるか知っている人はいますか？

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

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

<script type="text/javascript">

  function plusbutton()
    {

    $.modal( $('<div />').load('previousquestions.php #previouslink') );            
    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

3 に答える 3

1

すでにjQueryを使用しているので、おそらくAJAXを使用することをお勧めします。必要なのは次のようなものだけです。

// override the "default" form submitting behavior with a callback function
$("form").submit(

    // this is the callback function for your form submit function.
    function(e)
    {

        // this prevents the page from reloading -- very important!
        e.preventDefault(); 

        // get the search data from the input textbox
        var s = $("input[name='questioncontent']").val();

        // see annotation
        $("#simplemodal-data").html("loading...")
           .load("previousquestions.php #previouslink", 
               { 
                   questioncontent : s,
                   searchQuestion : "Search"
               }
            );
    }); // end submit wrapper

これにより、値がサーバーに送信され、idを使用してdivにロードされます。simplemodal-data

注釈：

コードの最後の行はいくつかのことを行います。まず、simplemodalDIVを「loading」メッセージに置き換えます。同時に、previousquestions.phpページにPOSTリクエストを送信します。この部分{ questioncontent : s, searchQuestion : "Search"}は、フォームからのデータがPHPページに渡される場所です（上記の変数var sの割り当てを思い出してください。最後に、previousquestions.phpページの結果をsimplemodal-dataモーダルウィンドウにロードする必要があります。

欠落していることの1つは、loadメソッドに#previousquestionsを追加して、HTMLドキュメントの一部のみがモーダルに挿入されるようにすることです。HTMLページ全体を別のHTMLドキュメント内にロードすることは決して良い考えではありません。「ロード」は、挿入するドキュメントの一部、つまりそのDIVを選択できるように設計されています。

phpファイル名の後に「#previouslink」を追加しました。ここで魔法が起こります。ブラウザは、PHPファイルからそのDIVを抽出し、その部分だけをページに挿入することを認識しています<head> <body>。不要なマークアップはありません。

于 2012-05-24T01:12:40.420 に答える
0

別のページの回答から、これと同様の質問への回答から、Bergi が述べているように、ajax を使用してコンテンツをモーダル ウィンドウ内に表示し続けるよりも iframe を使用する方が簡単であることがわかりました。したがって、この質問に対する最良の答えは、上記の質問で iframe がどのように使用されるかを示す以下の場所です。

  function plusbutton() { 
    // Display an external page using an iframe 
    var src = "previousquestions.php"; 
    $.modal('<iframe src="' + src + '" style="border:0;width:100%;height:100%;">');
    return false;
}
于 2012-05-24T17:39:37.977 に答える
0

ページが新しいコンテンツでリロードされるデフォルトの動作を使用する代わりに、AJAX を使用してフォームを送信することで、探しているものを実現できます。適切な応答を取得するには、リクエストでデータを POST する必要があるため、modal.load は使用できません。

ただし、AJAX を使用してデータを送信する場合は、応答を HTML として受け取り、その HTML をページの DIV に追加してから、その DIV コンテナーで SimpleModal コマンドを呼び出すことができます。

まず、フォームの送信ボタンを変更して、type="submit" ではなく type="button" にします。これにより、フォームがページを送信およびリダイレクトできなくなります。または、event.preventDefault(); を追加することもできます。フォーム送信クリック ハンドラーに false を返します (2 番目の手順を参照)。

ステップ1：

<!-- change type to button -->
<input id="searchquestion" name="searchQuestion" type="button" value="Search" />

ステップ2：

serializeArray を使用してフォームを文字列にシリアル化し、サーバーに POST するフォーム ボタンのハンドラーを作成します。次に、成功のコールバック ハンドラーで、HTML 応答を受け取り、モーダル ウィンドウのコンテンツを新しい HTML に置き換えます。これは、エラーがあればキャッチし、警告してコンソールに書き込みます。

$('form[type="button"]').click(function() {

  var dataString = $('form').serializeArray();

  $.ajax({
    url: "/previousquestions.php?t="+new Date().getTime(),
    type: "POST",
    data: dataString,           
    context: document.body,
    success: function(data){ 
   alert(data); // results from server, either the HTML page, or JSON/XML
       $('simplemodal-data').html(data);  // if HTML, just insert into div#results
    },
    error: function(jqXHR, textStatus, errorThrown) {
    if(window.location.hostname == "localhost") {
        alert("Error submitting the form :: " + textStatus + " : " + errorThrown);                        
    }
    console.error("Error submitting the form :: " + textStatus + " : " + errorThrown);
    }
  });
});

ステップ 3:

previousquestions.php最後に、コードが完全な HTML ドキュメントではなく、部分的な HTML ドキュメントのみを返すことを確認してください。<html>HTML を既存のページに挿入しているため、、、、<head>または<body>セクションは必要ありません。これらは、ページが検証されない原因となるだけでなく、レガシー ブラウザーで望ましくない動作を引き起こす可能性があります。応答の例を次に示します。

<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="test" /></p>
      <p><input id="searchquestion" name="searchQuestion" type="submit" value="Search" /></p>
      </form>

</div>


     <p>
         Your Search: 'test'     </p>


      <p>Number of Questions Shown from the Search: <strong>0</strong></p><p>Sorry, No Questions were found from this Search</p>
于 2012-05-24T01:18:33.263 に答える