javascript - 在模态对话框/框中显示搜索结果

Question

我似乎无法让模式框显示搜索结果，我可以提交表单，模式框将会出现，我尝试在模式框中回显我的变量，但没有显示任何内容。我尝试将搜索脚本和脚本放入模式框中。没有什么。我已经尝试过几乎所有我能找到的模态框，所以这不是模态框，我只是没有做正确的事情。我只知道我很累，我的眼睛很痛，我正准备放弃这样做。我只是不想在搜索时刷新页面，因为它会清除用户输入的用于搜索模型 ID 的所有值。为了创建一个生物，您必须拥有不容易找到的模型 ID，我正在尝试提供要搜索的模型 ID 的副本。请。如有任何帮助，我们将不胜感激，谢谢。

表格

// My form
    <form name="Form2" method="get" action="" enctype="application/x-www-form-urlencoded" id="Form2">
    <input type="text" id="Editbox19" style="position:absolute;left:20px;top:80px;width:191px;height:35px;line-height:35px;z-index:0;" name="name" value="" class"rounded">
    <div id="wb_Text25" style="position:absolute;left:20px;top:134px;width:58px;height:34px;z-index:1;text-align:left;">
    <span style="color:#FFFFFF;font-family:Arial;font-size:15px;">Entry ID:</span></div>
    <input type="text" id="Editbox20" style="position:absolute;left:20px;top:153px;width:191px;height:35px;line-height:35px;z-index:2;" name="entry" value=""class"rounded">
    <div id="wb_Image2" style="position:absolute;left:10px;top:5px;width:221px;height:31px;z-index:3;">
    <img src="images/modelid.png" id="Image2" alt=""></div>
    <div id="wb_Text24" style="position:absolute;left:18px;top:46px;width:227px;height:34px;z-index:4;text-align:left;">
    <span style="color:#FFFFFF;font-family:Arial;font-size:15px;"><br> Name:</span></div>

    <input type="submit" id="Button1" onclick="$('#jQueryDialog1').dialog('open');return false;" name="" value="Submit" style="position:absolute;left:269px;top:187px;width:96px;height:25px;z-index:2;">// What activates the Modal Box

    </form>

模态框

//Modal Box itself
<div id="jQueryDialog1" style="z-index:3;" title="This is the title">
//Modal Box Content where I want to display Search results.
</div>
</div>

我的脚本:

 // Modal Box Script
    <script>
    $(document).ready(function()
    {
       var jQueryDialog1Opts =
       {
          width: 554,
          height: 367,
          position: { my: 'center', at: 'center', of: window },
          resizable: true,
          draggable: true,
          closeOnEscape: true,
          autoOpen: false
       };
       $("#jQueryDialog1").dialog(jQueryDialog1Opts);
    });
    </script>

我的搜索脚本:

  <?php 
        if(isset($_GET['name'], $_GET['entry'])) {
        try { 

        $host = "xxxxxx";
        $user = "xxxxxxxx";
        $password = "xxxxxx";
        $database_name = "xxxxxxxx";
        $dbh = new PDO("mysql:host=$host;dbname=$database_name", $user, $password, array(
        //PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
        ));

        $conditions = array();
        $oemSearch = $_GET['name'];
        $oempnSearch = $_GET['entry'];
        $min = 1;
        $oemLen = strlen($oemSearch);
        $oempnLen = strlen($oempnSearch);

        if ($oemSearch == "" && $oempnSearch == "") {
         echo "You must enter a Name or Entry ID";
         exit;
        }
         if ($oemSearch != "" && $oemLen < $min) { 
         echo "You must enter an Entry ID of atleast 1 Character.";
         exit;
        }
         if ($oempnSearch != "" && $oempnLen < $min) { 
         echo "You must enter at least 3 P/N characters.";
         exit;
        }
        if ($oemSearch != "" && $oempnSearch == "") {
        $stmt = $dbh->prepare("select * from creature_template WHERE name LIKE '%$oemSearch%' ORDER BY entry LIMIT :limit OFFSET :offset");
        //$query->bindValue(1, "%$oemSearch%", PDO::PARAM_STR);
        }
        if ($oemSearch == "" && $oempnSearch != "") {
        $stmt = $dbh->prepare("select * from creature_template WHERE name LIKE '%$oempnSearch%' ORDER BY entry LIMIT :limit OFFSET :offset");
        //$query->bindValue(1, "%$oemSearch%", PDO::PARAM_STR);
        }
        if ($oemSearch != "" && $oempnSearch != "") {
        $stmt = $dbh->prepare("select * from creature_template WHERE name LIKE '%$oemSearch%' OR entry LIKE '%$oempnSearch%' ORDER BY entry LIMIT :limit OFFSET :offset");
        //$query->bindValue(1, "%$oemSearch%", PDO::PARAM_STR);
        }

        // Find out how many items are in the table
        $total = $dbh->query("SELECT COUNT(*) AS num FROM creature_template ")->fetchColumn();

        // How many items to list per page
        $limit = 10;

        // How many pages will there be
        $pages = ceil($total / $limit);

        // What page are we currently on?
        $page = min($pages, filter_input(INPUT_GET, 'page', FILTER_VALIDATE_INT, array(
            'options' => array(
            'default'   => 1,
            'min_range' => 1,
            ),
        )));

        // Calculate the offset for the query
        $offset = ($page - 1) * $limit;

        // Some information to display to the user
        $start = $offset + 1;
        $end = min(($offset + $limit), $total);

        // Bind the query params
        $stmt->bindParam(':limit', $limit, PDO::PARAM_INT);
        $stmt->bindParam(':offset', $offset, PDO::PARAM_INT);
        $stmt->execute();

        // Do we have any results?
        if ($stmt->rowCount() > 0) {
            // Define how we want to fetch the results
            $stmt->setFetchMode(PDO::FETCH_ASSOC);
            $iterator = new IteratorIterator($stmt);

           // Display the results
        echo "<table class='views-table' border=1>";   
              echo "<tr class='tblheader'><th bgcolor=#00CC00>Name</th><th bgcolor=#00CC00>Entry ID</th><th bgcolor=#00CC00>Model ID</th></tr>";
            foreach ($iterator as $row) {
              echo "<tr class=odd views-row-first1><td><a href=http://wowhead.com/npc=";         
                echo $row['entry'];
                echo "></td><td><b>";
                echo $row['entry'];
                echo "</a></td><td><b>";
                echo $row['modelid1'];
                echo "</td></tr></b>";
            }
             echo "</table>"; 


        } else {
            echo '<p>No results could be displayed.</p>';
        }

        } catch (Exception $e) {
            echo '<p>', $e->getMessage(), '</p>';
        }}
        ?>

Answer 1

你用过ajax吗？从按钮中删除 onclick 并尝试:

    $("#Button1").click(function(){
    var name = document.getElementById("Editbox19"); 
    var entry = document.getElementById("Editbox20"); 
    var jQueryDialog1Opts =
    {
    width: 554,
    height: 367,
    position: { my: 'center', at: 'center', of: window },
    resizable: true,
    draggable: true,
    closeOnEscape: true,
    autoOpen: false
    };

        $.ajax({
            url: "search.php?name="+name+"&entry="+entry,
            type: "GET",
            success:function(data){
                    $("#jQueryDialog1").dialog(jQueryDialog1Opts);
                    $("#jQueryDialog1").html(data);
            },
            error:function (){
                alert("Error!!! Please refresh the page and try again!");
            }
        });
    });

我假设您的搜索脚本位于名为“search.php”的 php 页面中。相应地改变它是的。