Um die aus der Datenbank abgerufenen Datensätze in einem Dialogfeld anzuzeigen

Question

Ich habe ein Dialogfeld, das eine Zahl einnimmt. Ich möchte diese Nummer an die Datenbank senden und den entsprechenden Namen abrufen und in einem anderen Dialogfeld anzeigen Code funktioniert gut, bis die Daten abrufen, aber ich weiß nicht, wie es angezeigt werden, in einem anderen Dialog box.I erstellt haben eine Geige https://jsfiddle.net/payalsuthar/rdtpo7e3/ und hier ist 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 code-

<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 cod e-

$("#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

Ihr Code wird wie folgt aussehen (ungetestet):

jQuery Demo

PHP: Verwenden echo die Daten zurück zu Javascript-Seite senden

<?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: Keine Notwendigkeit, ein <form> Konstrukt zu verwenden - AJAX ist, was Sie

<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 benötigen:

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

---

Hinweis:

Keine Notwendigkeit für zwei Dialoge. Sie können den einen Dialog erneut verwenden, indem Sie den Inhalt innerhalb des Bereichs #dialog1 über die Methode .html() ändern.