Javascript 如何在不重新启动页面的情况下将值传递给modal？

我有一个自动完成搜索框来搜索数据库中的名字。结果应该是搜索名称，如果id相等，单击打开一个模式发布来自php的数据。我的问题是，当模式弹出时，页面将自动刷新。在提交后打开模式表单时，如何阻止页面重新启动？寻求你的帮助。非常感谢

请参考我的代码，如下所示：

自动完成搜索框

JS编辑

模态

PHP

使用jQuery.load

<script>
$(function () {
    $("#livesearch").autocomplete({
        source: "php/livesearch.php",
        select: function( event, ui ) {
            event.preventDefault();         // no necessary
            $("#livesearch").val(ui.item.value);    // not necessary
            $("#searchid").val(ui.item.id);     // not necessary

            // this will append a div to the body, then load the stream ... if the stream contains
            // your modal it will be appended to the body
            let div = $('<div />').appendTo('body');

            div.load( 'http://yoururl/?id=' + ui.item.id, function( data) {
                // debug point - to work the data has to start with
                // <div id="searchModal" class="modal
                console.log( data);

                // now that is complete ... open the modal
                let modal = $('.modal', div);   // search for your modal in the div
                modal.modal( 'show');       // open the modal (bootstrap)

                // debug point
                console.log( modal); // should reflect div#searchModal.modal.fade.card.new-contact

            });

            // not this:
            // $("#searchModal").modal(document.getElementById("searchForm").submit());    

        }
    });


}); 
</script>

---

这似乎与Java编程无关。删除问号以避免混淆/挫败。但问题是，您试图将POST数组的值传递到WHERE tblPatients.PatientID='{$myid}'中，我不知道为什么。$myid=$\u POST['searchid']；没有名称属性。我认为您应该在此处启用错误报告，并检查查询中的错误。@FunkFortyNiner单击“自动完成搜索”框中的名称后，我想在模式中显示数据库信息。我试着为name=searchid设置name属性，但仍然不起作用。嗨，大卫，谢谢你路过。我尝试了此代码，但没有任何结果。$[searchModal]。对话框“关闭”；关闭模式将是$'searchModal'。对话框'close'；是jquery ui还是引导。。？引导是$'searchModal'。modal'close'；这是一个HTML引导模式。主要目的是从js打开模态，并显示Ok的信息，明白了-这是一个导航栏搜索，一旦他们搜索而不重新加载，您希望打开填充数据的对话框。。对吗？对。因此，从搜索框显示名称，然后单击打开模式显示信息

<script>
    $(function () {
        $("#livesearch").autocomplete({
            source: "php/livesearch.php",
            select: function( event, ui ) {
                // this will append a div to the body, then load the stream ... if the stream contains
                // your modal it will be appended to the body
                let div = $('<div/>').appendTo('body');
                div.load('dsearch_modal.php?id=' + ui.item.id, function(data) {
                    // now that is complete ... open the modal
                    let modal = $('.modal', div);   // search for your modal in the div
                    modal.modal('show');       // open the modal (bootstrap)
                });
            }
        });
    }); 
</script>

<!-- Search bar Modal -->
<?php include 'dsearch_modal.php'; ?>

<div id="searchModal" class="modal fade card new-contact" role="dialog">
    <div class="modal-dialog modal-sm-10">
        <div class="modal-content">
            <div class="new-contact__header">
                <a href="#" class="zmdi zmdi-camera new-contact__upload"></a>
                <img src="demo/img/contacts/user_empty.png" class="new-contact__img" alt="">
            </div>
            <div align="center">                                            
                <h4 style="text-transform:capitalize;" id="pxname"><?php print $row['search_fname']; ?>&nbsp;&nbsp;<?php print $row['search_lname']; ?> </h4>
                <p hidden id="pxnameid"><?php print $row['search_PatientID']; ?></p>

            </div>

            <div class="card-body modal-dialog modal-content">
                <h6 style="text-transform:uppercase;">
                    <p>Last consultation visit</p>
                </h6>
                <br>    
                <div class="row">                   
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label>Consultation date</label>
                            <input type="text" id="searchobgyneDate" class="form-control" value="<?php print $row['search_obgyneDate']; ?>" disabled>
                            <i class="form-group__bar"></i>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label>Service</label>
                            <input type="text" id="searchpxservice" class="form-control" value="<?php print $row['search_service']; ?>" disabled>
                            <i class="form-group__bar"></i>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label>Company</label>
                            <input type="text" class="form-control" id="searchcompanyname" disabled>
                            <i class="form-group__bar"></i>
                        </div>
                    </div>  
                    <div class="col-sm-3" align="center">
                        <div class="form-group">
                            <a href="#"class="btn btn-light form-control">Consultation</a>
                        </div>
                    </div>
                    <div class="col-sm-3" align="center">
                        <div class="form-group">
                            <a href="#"class="btn btn-light form-control">Records</a>
                        </div>
                    </div>
                    <div class="col-sm-3" align="center">
                        <div class="form-group">
                            <a href="#"class="btn btn-light form-control">LAB Results</a>
                        </div>
                    </div>
                    <div class="col-sm-3" align="center">
                        <div class="form-group">
                            <a href="#"class="btn btn-light form-control" data-dismiss="modal">Cancel</a>
                        </div>
                    </div>                                                                                                                                                                                              
                </div>                  
            </div>
        </div>
    </div>
</div>
<!-- End of search bar Modal -->
<?php $conn->close(); ?>

<?php

    $myid = $_GET['id'];

    $sql1 = ("SELECT tblParity.pxservice as search_service, tblPatients.Lname as search_lname, tblPatients.mi as search_mi, tblPatients.Fname as search_fname, 
    tblPatients.PatientID as search_PatientID, DATE_FORMAT(tblOBGyne.obgyneDate,'%m/%d/%Y') as search_obgyneDate, 
    tblParity.ParityID, tblOBGyne.OBGyneID, tblOBGyne.chiefcomplain as search_chiefcomplain, tblOBGyne.companyname as search_companyname
    FROM tblPatients 
    INNER JOIN tblParity ON tblPatients.PatientID = tblParity.PatientID
    INNER JOIN tblOBGyne ON tblParity.ParityID = tblOBGyne.ParityID                                                 
    WHERE tblPatients.PatientID = '{$myid}' ORDER BY tblobgyne.obgyneDate DESC limit 1");   

    $result1 = mysqli_query($conn, $sql1);
    $num_results = mysqli_num_rows($result1);
    $row = mysqli_fetch_assoc($result1);

    echo $row['search_PatientID']." - ". $row['search_lname'].", ". $row['search_fname'];                   
?>

<script>
$(function () {
    $("#livesearch").autocomplete({
        source: "php/livesearch.php",
        select: function( event, ui ) {
            event.preventDefault();         // no necessary
            $("#livesearch").val(ui.item.value);    // not necessary
            $("#searchid").val(ui.item.id);     // not necessary

            // this will append a div to the body, then load the stream ... if the stream contains
            // your modal it will be appended to the body
            let div = $('<div />').appendTo('body');

            div.load( 'http://yoururl/?id=' + ui.item.id, function( data) {
                // debug point - to work the data has to start with
                // <div id="searchModal" class="modal
                console.log( data);

                // now that is complete ... open the modal
                let modal = $('.modal', div);   // search for your modal in the div
                modal.modal( 'show');       // open the modal (bootstrap)

                // debug point
                console.log( modal); // should reflect div#searchModal.modal.fade.card.new-contact

            });

            // not this:
            // $("#searchModal").modal(document.getElementById("searchForm").submit());    

        }
    });


}); 
</script>