Geek asks and answers

How to display content in a modal window?

I have a simple application here (QandATable2.php) where, when the user clicks the plus button, he will open a modal window and he will display the details that are stored on another page (previousquestions.php).

Now the problem is that if you immediately click the "Search" button when the text field is empty, you will see that it loads the page on its page, displaying a message to enter the phrase to search for, and also displays all the functions from the modal window on this page. This is not true.

What I want to do is that if the user clicks the search button, then when he publishes the form and displays a message, he does it within the modal window, and not on his own page. So does anyone know how this can be achieved?

The modal window that I use is known as SimpleModal, and its website is here.

Below is the QandATable2.php code, where it displays the plus button and where it opens the modal window, linking the contents of the modal window with the previousquestions.php page:

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

Below is the previousquestions.php code, where it displays the details in a modal window and where the search function is saved:

<?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";
    }
          ?>
+3
source share
3 answers

, , , iframe, ajax, . , , 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;
}
0

, AJAX, jQuery, - :

// 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

div id simplemodal-data

:

. -, DIV "". POST previousquestions.php. { questioncontent : s, searchQuestion : "Search"} - , PHP ( var s ). , previousquestions.php simplemodal-data.

, , - #previousquestions , HTML- ​​ . HTML- HTML, "" , , , DIV.

"#previouslink" php. . , DIV PHP , no <head> <body> .

+1

, , AJAX , . modal.load, POST , .

, AJAX , HTML HTML DIV , SimpleModal DIV.

, = "button" type = "submit". . , event.preventDefault(); false submit click handler (. ), , , :

1:

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

2:

, serializeArray . 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:

Finally, make sure that your code previousquestions.phpreturns only a partial HTML document, not a full HTML document. Since you are embedding HTML in an existing page, you do not need sections <html>, <head>or <body>. This will cause your page to not be checked and may lead to unwanted behavior in older browsers. Here is an example of what your answer might look like:

<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>
0
source

More articles:


All Articles