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 Demo

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');
        }
    }
});

注意：

无需两个对话框。您可以通过#dialog1方法更改.html() div中的内容来重复使用一个对话框。

将从数据库检索到的记录显示到对话框中

1 个答案: