將從數據庫檢索到的記錄顯示在對話框中

Question

我有一個輸入數字的對話框。我想將這個數字發送到數據庫並檢索與該數字對應的名稱並將其顯示在另一個對話框中。我的代碼工作正常，直到檢索數據但我不知道如何把它顯示到另一個對話框中。我創建了一個小提琴https://jsfiddle.net/payalsuthar/rdtpo7e3/ ，這里是dataretrieve.php-

 <?php
    include('db.php');
    $num = $_POST['num'];
    $sql = "SELECT `no`,`name` FROM `table` WHERE `no` = $num ";
     if($result=mysqli_query($conn,$sql)){ 
    //i dont know how to display the values retrieved here into my dialog2(you can check my dialog2)
   }
 ?>

Html代碼 -

<form action="dataretrieve.php" method="POST">
<div id="dialog1" title="div1" style="display:none"> 
Enter the num:<input type="text" name="num" id="num" />
</div>
</form>
<button id="clickMe">Click Me</button>
<div id="dialog2" title="div1" style="display:none"> 
num:<input type="text" name="number" id="number" />

JavaScript代碼 -

$("#clickMe").click(function(){

$('#dialog1').dialog({
buttons:{
"yes":function(){
$(this).dialog('close');
callback(true);
},
"no":function(){
$(this).dialog('close');
}
}
});
function callback(value){
if(value){
$('#dialog2').dialog({
buttons:{
"ok":function(){
$(this).dialog('close');
},
"cancel":function(){
$(this).dialog('close');
}
}
});
}
}
});

Answer 1

您的代碼看起來像這樣（未經測試）：

jQuery演示

PHP：使用echo將數據發送回javascript端

<?php
    include('db.php');
    $num = $_POST['number'];
    $sql = "SELECT `no`,`name` FROM `table` WHERE `no` = $num ";
    if($result=mysqli_query($conn,$sql)){ 
        $out = $result['yourDBfieldname'];
        echo $out; //THIS sends it back to javascript side
    }
?>

HTML：無需使用<form>構造 - AJAX就是您所需要的

<div id="dialog1"> 
    Enter the num:<input type="text" name="num" id="num" />
    <button id="submit1">Submit</button>
</div>
<button id="clickMe">Click Me</button>

的JavaScript / jQuery的：

var num, nam;
$("#clickMe").click(function(){
    $('#dialog1').dialog('open');
});
$("#submit1").click(function(){
    $('#dialog1').dialog('close');
    num = $('#num').val();
    $.ajax({
        type: 'post',
         url: 'dataretrieve.php',
        data: 'number=' +num,
        success: function(recd){
            //if (recd.length) alert(recd);
            $('#dialog1').html('<input id="name" type="text" value="'+recd+'" /><button id="submit2">Submit</button>');
            $('#dialog1').dialog('open');
        }
    });
});
//Must use .on() because content injected after DOM initially rendered
$(document).on('click', '#submit2', function(){
    $('#dialog1').dialog('close');
    nam = $('#name').val();
    alert('Num: '+num+ '    Name: ' + nam);
});


//Initialize the jQuery dialog - makes the #dialog1 div hidden
$('#dialog1').dialog({
    autoOpen:false,
    modal:true,
    buttons:{
        "Close":function(){
            $(this).dialog('close');
        }
    }
});

---

注意：

不需要兩個對話框。 您可以通過.html()方法更改#dialog1 div中的內容來重復使用一個對話框。