Show results in popup

This code is working fine to show results on the page itself but I want to show the results in a popup.

We have linked the code to a database and it is retrieving the expected result, but how can I use jQuery to display division in a popup or dialogue box? Also it should be responsive.

      <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>PHP, jQuery search demo</title><link rel="stylesheet" type="text/css" href="my.css"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript">$(function() {

$(".search_button").click(function() {
    // getting the value that user typed
    var searchString    = $("#search_box").val();
    // forming the queryString
    var data            = 'search='+ searchString;

    // if searchString is not empty
    if(searchString) {
        // ajax call
        $.ajax({
            type: "POST",
            url: "do_search.php",
            data: data,
            beforeSend: function(html) { // this happens before actual call
                $("#results").html(''); 
                $("#searchresults").show();
                $(".word").html(searchString);
           },
           success: function(html){ // this happens after we get results
                $("#results").show();
                $("#results").append(html);
          }
        });    
    }
    return false;});});</script></head><body><div id="container"><div style="margin:20px auto; text-align: center;"><form method="post" action="do_search.php"><input type="text" name="search" id="search_box" class='search_box'/><input type="submit" value="Search" class="search_button" /><br /></form></div><div><div id="searchresults">Search results :</div><ul id="results" class="update"></ul></div></div></body></html>

​x
 
      <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>PHP, jQuery search demo</title><link rel="stylesheet" type="text/css" href="my.css"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript">$(function() {​$(".search_button").click(function() {    // getting the value that user typed    var searchString    = $("#search_box").val();    // forming the queryString    var data            = 'search='+ searchString;​    // if searchString is not empty    if(searchString) {        // ajax call        $.ajax({            type: "POST",            url: "do_search.php",            data: data,            beforeSend: function(html) { // this happens before actual call                $("#results").html('');                 $("#searchresults").show();                $(".word").html(searchString);           },           success: function(html){ // this happens after we get results                $("#results").show();                $("#results").append(html);          }        });        }    return false;});});</script></head><body><div id="container"><div style="margin:20px auto; text-align: center;"><form method="post" action="do_search.php"><input type="text" name="search" id="search_box" class='search_box'/><input type="submit" value="Search" class="search_button" /><br /></form></div><div><div id="searchresults">Search results :</div><ul id="results" class="update"></ul></div></div></body></html>​

Answer

Using jQuery Dialogue you can accomplish exactly what you want.

With jQuery Dialogue you can

Animate your dialogue box to give it a nice appearance
You can use it to simply display a message
You can use it to display a form such as an insert form or “Contact Us” form
You can use it as a confirmation box

Easy to use and style.

Read about it here

Advertisement

Answer