Autor Zpráva
Zezula
Profil *
#1 · Zasláno: 25. 1. 2018, 18:59:42
Odpovědět Citovat
Dobrý den,
mám na vás prosbu..nedávno jsem začal studovat AJAX a našel jsem na webu tento zajímavý příklad.

phppot.com/jquery/jquery-ajax-add-edit-modal-window

index.php 
<html>
<head>
<title>jQuery AJAX Add Edit Modal Window</TITLE>
<style>
body{width:40%;}
.message-box{margin-bottom:20px;border-top:#F0F0F0 2px solid;background:#FAF8F8;padding:10px;}
.btnDeleteAction{background-color: #F3C6C6;border: 0; padding: 7px; color: #555555; margin-bottom: 15px; font-family: Verdana,Arial,sans-serif;font-size: 1.1em;vertical-align: top;border-radius: 4px;}
#btnAddAction{background:#09F;border:0;color:#FFF;}
</style>

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(document).ready(function() {
    var comment_id;
    var edit_window = $("#frmEdit").dialog({autoOpen: false,
      height: 280,
      width: 480,
      modal: true});       
    var add_window = $("#frmAdd").dialog({
      autoOpen: false,
      height: 280,
      width: 480,
      modal: true,
      buttons: {
        "Post": addComment
      },
      close: function() {
        add_window.dialog( "close" );
      }
    }); 
    function addComment() {
        add_window.dialog( "close" );
        callCrudAction('add','');
    } 
    $( "#btnAddAction" ).button().on( "click", function() {
      add_window.dialog( "open" );
    }); 
    $( ".btnEditAction").button().on( "click", function() {
        openEditBox($(this).attr("id"));
    });
});  
function openEditBox(id) {
    edit_window = $("#frmEdit").dialog({
      buttons: {
        "Edit": editComment
      },
      close: function() {
        
        edit_window.dialog( "close" );
      }
    });
    edit_window.dialog( "open" );
    comment_id = id;
    var message = $("#message_" + comment_id + " .message-content").html();
    $("#edit-message").val(message); 
}  
function editComment() {
    edit_window.dialog( "close" );
    callCrudAction('edit',comment_id);
}  
function callCrudAction(action,id) {
    $("#loaderIcon").show();
    var queryString;
    //It is better to sanitise user input to avoid XSS attack and SQL injection
    switch(action) {
        case "add":
            queryString = 'action='+action+'&txtmessage='+ $("#txtmessage").val();
        break;
        case "edit":
            queryString = 'action='+action+'&message_id='+ id + '&txtmessage='+ $("#edit-message").val();
        break;
        case "delete":
            queryString = 'action='+action+'&message_id='+ id;
        break;
    }     
    jQuery.ajax({
    url: "crud_action.php",
    data:queryString,
    type: "POST",
    success:function(data){
        switch(action) {
            case "add":
                $("#comment-list-box").append(data);
            break;
            case "edit":
                $("#message_" + id + " .message-content").html(data);
            break;
            case "delete":
                $('#message_'+id).fadeOut();
            break;
        }
        $("#txtmessage").val('');
        $("#edit-message").val('');
        $("#loaderIcon").hide();
    },
    error:function (){}
    });
}</script>
</HEAD>
<BODY> 
<?php
require_once("db/databaze.php");
?>
<div class="form_style">
<div id="comment-list-box">
<?php
$results = $mysqli->query("SELECT * FROM databaze");
while($row = $results->fetch_assoc()) {
?>
<div class="message-box" id="message_<?php echo $row["id"];?>">
<div>
<button class="btnEditAction" name="edit" id="<?php echo $row["id"];?>">Edit</button>
<button class="btnDeleteAction" name="delete" onClick="callCrudAction('delete',<?php echo $row["id"]; ?>)">Delete</button>
</div>
<div class="message-content"><?php echo $row["message"]; ?></div>
</div>
<?php
} 
?>
</div> 
<div id="frmAdd"><textarea name="txtmessage" id="txtmessage" cols="40" rows="5"></textarea></div>
<div id="frmEdit"><textarea name="edit-message" id="edit-message" cols="40" rows="5"></textarea></div>
<p><button id="btnAddAction" name="submit">Add</button></p>
<img src="LoaderIcon.gif" id="loaderIcon" style="display:none" />
</div>
</BODY>
</HTML>

crud_action.php 
<?php
include_once("db/databaze.php");
$action = $_POST["action"];
if(!empty($action)) {
    switch($action) {
        case "add":
            if(!empty($_POST["txtmessage"])) {
        $poznamka_ulozit = filter_var($_POST["txtmessage"],FILTER_SANITIZE_STRING); 
$result = $mysqli->query("INSERT INTO databaze(message) VALUES('".$_POST["txtmessage"]."')");                if($result){
                      $insert_id = $mysqli->insert_id;
                      echo '<div class="message-box"  id="message_' . $insert_id . '">
                            <div>
                            <button class="btnEditAction ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onClick="openEditBox(' . $insert_id . ')"><span class="ui-button-text">Edit</span></button>
    <button class="btnDeleteAction" name="delete" onClick="callCrudAction(\'delete\',' . $insert_id . ')">Delete</button>
                            </div>
                            <div class="message-content">' . $_POST["txtmessage"] . '</div></div>';
                }
            }
            break;
            
        case "edit":
            $result =$mysqli->query("UPDATE databaze set message = '".$_POST["txtmessage"]."' WHERE  id=".$_POST["message_id"]);            if($result){
                  echo $_POST["txtmessage"];
            }
            break;            
        
        case "delete": 
            if(!empty($_POST["message_id"])) {
                $mysqli->query("DELETE FROM databaze WHERE id=".$_POST["message_id"]);        }
            break;
    }
}
?>

Podařilo se mi ho zprovoznit a trochu upravit, jen si nevím rady s jednou věcí a to:
Při vytvoření nové Poznámky se dá říct, že vše funguje jak má. Problém vznikne, když jsou v textu Poznámky obsaženy znaky jako <, >, popřípadě pevná mezera.
Do databáze se uloží normálně, znaky se nijak nepřevdou.
Při načtení z databáze se v náhledu Poznámky text a znaky zobrazí normálně, ale ve chvíli kdy chci poznámku upravit a vypíšu text v textarea (textarea se otevře v modálním okně)
znaky se změní na &lt; &gt a &nbsp.
Když nechám zobrazit text a znaky v textarea přímo na stránce (ne v modálním okně), taky se vše zobrazuje normálně.
Zkoušel jsem použít htmlspecialchars, html_entity_decode, str_replace ale pořád nic.

Nevíte někdo prosím co s tím?

zprovozněné demo zde www.svingo.cz/poznamky/20

Díky za každou radu, Zezula
RastyAmateur
Profil
#2 · Zasláno: 26. 1. 2018, 17:58:55
Odpovědět Citovat
Zezula:
Co jsem si jen tak zkoušel, tak se mi podařilo najít možnou nedostatečnost z index.php:56. Zkus to změnit a uvidíme, jestli to bylo právě v tom :-)
Zezula
Profil *
#3 · Zasláno: 26. 1. 2018, 18:59:04
Odpovědět Citovat
Paráda, funguje to. Vážně stačil "jen" prohodit .html() za .text()
Díky díky moc.
Časová prodleva: 6 let

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0