index.php
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css»><link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css»> <script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js»></script> <script src=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js»></script> <script type=»text/javascript»>function loadXMLDoc(q) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == XMLHttpRequest.DONE) { // if (xmlhttp.status == 200 && xmlhttp.readyState==4) { document.getElementById(«mydiv»).innerHTML = xmlhttp.responseText; } } }; xmlhttp.open(«GET», «ajax/getfruit.php?q=»+q, true); xmlhttp.send();}
function save_fruit(id,text) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == XMLHttpRequest.DONE) { // if (xmlhttp.status == 200 && xmlhttp.readyState==4) { } } }; xmlhttp.open(«GET», «ajax/savefruit.php?id=»+id+»&text=»+text, true); xmlhttp.send();}</script><input onkeyup=»loadXMLDoc(this.value)»>
<?
mysql_connect(«localhost»,»root»,»»);mysql_select_db(«ajax»);$_GET[‘q’]=urldecode($_GET[‘q’]);$data=mysql_query(«select * from `fruits`»);while($res=mysql_fetch_array($data)) { echo «<div id=’id_{$res[‘id’]}’ data-toggle=’modal’ onclick=’setdata(\»{$res[‘fruit’]}\»,\»{$res[‘id’]}\»)’ data-target=’#myModal’ class=’btn btn-success’>».$res[‘fruit’].»</div>»; }?>
<div class=»container»>
<!— Trigger the modal with a button —>
<!— Modal —> <div class=»modal fade» id=»myModal» role=»dialog»> <div class=»modal-dialog»> <!— Modal content—> <div class=»modal-content»> <div class=»modal-header»> <button type=»button» class=»close» data-dismiss=»modal»>×</button> <h4 class=»modal-title»>Введите имя нового фрукта</h4> </div> <div class=»modal-body»> <p> <input id=’fruit’ placeholder=»Введите имя фрукта»> <input id=’fruitid’ type=’hidden’> </p> </div> <div class=»modal-footer»> <button type=»button» class=»btn btn-success» onclick=»save()»>Сохранить</button> <button type=»button» class=»btn btn-default» data-dismiss=»modal»>Закрыть</button> </div> </div> </div> </div> </div><script>function save(){ text=document.getElementById(«fruit»).value; id=document.getElementById(«fruitid»).value; document.getElementById(«id_»+id).innerHTML=text; save_fruit(id,text); $(‘#myModal’).modal(‘hide’); }function setdata(text,id){ document.getElementById(«fruit»).value=text; document.getElementById(«fruitid»).value=id;}</script>
savefruit.php
<?
mysql_connect(«localhost»,»root»,»»);
mysql_select_db(«ajax»);
mysql_query(«update `fruits` set `fruit`='{$_GET[‘text’]}’ where `id`='{$_GET[‘id’]}'»);
?>