Aktualizace snippetu a nefunkční JQuery

Joacim

Mám template users.latte kde si vypisuji každého uživatele a u něj mám i editovat/smazat (jedná se o obrázek, který po kliknutí proveden jquery akci a otevře jquery ui dialog pro editování/mazani), vše funguje jak má do doby než provedu editaci přes ajax a snippet se aktualizuje, poté přestane volání pomocí jquery fungovat

{block content}
<div class="row">
    <div class="col-sm-12">

        <h4>Seznam uživatelů</h4>
        <button id="create-user">Create new user</button>
        {snippet usersList}
            <table class="t_style_1">
                <thead>
                    <tr><th>Personal No.</th><th>Email</th><th>First name</th><th>Last name</th><th>Role</th><th>Dept.</th><th>SC</th><th>Edit</th><th>Delete</th></tr>
                </thead>

                <tbody>
                    {foreach $all_users as $usr}
                        <tr>
                            <td>{$usr->persNo}</td>
                            <td>{$usr->email}</td>
                            <td>{$usr->firstName}</td>
                            <td>{$usr->lastName}</td>
                            <td>{$usr->role}</td>
                            <td>{$usr->department_id}</td>
                            <td>{$usr->shortcut}</td>
                            <td>
                                <img src="{$baseUri}/images/settings-20.png" class="{$usr->persNo}" id="edit-btn">
                            </td>
                            {if $usr->persNo != $actLogUserPersNo}
                                <td>
                                    <img src="{$baseUri}/images/cross-20.png" class="{$usr->persNo}" id="delete-btn">
                                </td>
                            {else}
                                <td>
                                </td>
                            {/if}
                        </tr>
                    {/foreach}
                </tbody>
            </table>
        {/snippet}
    </div>
</div>

<!-- create/update reservation dialog -->
<div id="edit-dialog" title="Create new user">
    <p class="validateTips">All form fields are required.</p>
    <form>
        <fieldset>
            <label for="name">Jméno</label>
            <input type="text" name="firstName" id="firstName" value="" class="text ui-widget-content ui-corner-all">
            <label for="password">Přijmení</label>
            <input type="text" name="lastName" id="lastName" value="" class="text ui-widget-content ui-corner-all">
            <label for="email">Email</label>
            <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all">
            <label for="persno">Personal number</label>
            <input type="text" name="persNo" id="persNo" value="" class="text ui-widget-content ui-corner-all">

            <label for="department_id">Department</label>
            <input type="text" name="department_id" id="department_id" value="" class="text ui-widget-content ui-corner-all">
            <label for="shortcut">Short Cut</label>
            <input type="text" name="shortcut" id="shortcut" value="" class="text ui-widget-content ui-corner-all">

            <label for="role">Role</label>
            <select id="role">
                <option value="user">User</option>
                <option value="admin">Admin</option>
            </select>
        </fieldset>
    </form>
</div>

<div id="delete-dialog">
    Opravdu si přejete smazat uživatele s ID: <b id="delete_user_id"></b> ?
</div>

{/block}

{block scripts}
{include parent}
<script src="{$basePath}/js/jquery-ui.min.js"></script>
<script src="{$basePath}/js/setup.js"></script>
{/block}

{block head}
<link rel="stylesheet" href="{$basePath}/css/jquery-ui.min.css">
<link rel="stylesheet" href="{$basePath}/css/jquery-ui.structure.min.css">
<link rel="stylesheet" href="{$basePath}/css/jquery-ui.theme.min.css">
{/block}

presenter

class SetupPresenter extends ProtectedPresenter {

    /** @var Nette\Database\Context */
    private $database;

    public function __construct(Nette\Database\Context $database) {
        $this->database = $database;
    }


    public function renderUsers() {
        $this->template->all_users = $this->database->table('user')->select('*')->order('id')->fetchAll();
        $this->template->actLogUserPersNo = $this->user->identity->persNo;
        if (!$this->isAjax()) {
            $this->template->user_detail = NULL;
        } else {
            $this->redrawControl('usersList');
        }
    }

    public function handleRenderUserEdit($user_pers_id, array $user_data) {
        if ($this->isAjax()) {
            $this->database->query('UPDATE user SET ? WHERE persNo=?', $user_data, $user_pers_id);

            //$this->template->all_users = $this->database->table('user')->select('*')->order('id')->fetchAll();
            //$this->redrawControl('usersList');

        }
    }

}

konzole nehlásí žádnou chybu a dialog create new user funguje, jen to co je uvnitř snippetu nevalí(nefunguje jquery)

David Matějka

Ukaz JS. Co pouzivas na snippety? nette.ajax.js nebo neco vlastniho?

Joacim

setup.js – používám nette.ajax.js (v. 2), ajax jede bez problémů, update či delete taky, ale poté co použiji v presenteru

public function renderUsers() {
    $this->template->all_users = $this->database->table('user')->select('*')->order('id')->fetchAll();
    $this->template->actLogUserPersNo = $this->user->identity->persNo;
    if (!$this->isAjax()) {
        $this->template->user_detail = NULL;
    } else { // pokud se jedná o AJAX
        $this->redrawControl('usersList');
    }
}

$(function () {
    $.nette.init();
});

function preLoad(id) {
    $.nette.ajax({
        type: 'GET',
        url: "?do=renderUserData",
        data: {
            "user_pers_id": id
        },
        success: function (data) {

            $('#firstName').val(data.table.firstName);
            $('#lastName').val(data.table.lastName);
            $('#email').val(data.table.email);
            $('#persNo').val(data.table.persNo);
            $("#role").val(data.table.role).find("option[value=" + data.table.role + "]").attr('selected', true);
            $('#department_id').val(data.table.department_id);
            $('#shortcut').val(data.table.shortcut);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('An error occurred... Look at the console (F12 or Ctrl+Shift+I, Console tab) for more information!');

            $('#result').html('<p>status code: ' + jqXHR.status + '</p><p>errorThrown: ' + errorThrown + '</p><p>jqXHR.responseText:</p><div>' + jqXHR.responseText + '</div>');
            console.log('jqXHR:');
            console.log(jqXHR);
            console.log('textStatus:');
            console.log(textStatus);
            console.log('errorThrown:');
            console.log(errorThrown);
        }
    });
}

$(function () {
    $("img#edit-btn").click(function () {
        var id = $(this).attr('class');
        $('.' + id).parent().parent().find("td").each(function () {
            $(this).animate({
                borderBottomColor: '#32CD32',
                borderBottomWidth: '3px',
                borderTopColor: '#32CD32',
                borderTopWidth: '3px'
            }, 150)
        });
        $("#edit-dialog").data('uid', id).data('action', 'Edit').load(preLoad(id)).dialog("open");
    });

    $("img#delete-btn").click(function () {
        var id = $(this).attr('class');
        $('#delete_user_id').text(id);
        $('.' + id).parent().parent().find("td").each(function () {
            $(this).animate({
                borderBottomColor: '#FA8072',
                borderBottomWidth: '3px',
                borderTopColor: '#FA8072',
                borderTopWidth: '3px'
            }, 150)
        });
        $("#delete-dialog").data('uid', id).dialog("open");
    });

    $("#edit-dialog").dialog({
        autoOpen: false,
        modal: true,
        draggable: false,
        resizable: false,
        width: 350,
        title: "User",
        open: function () {
            $('.ui-dialog-title').text($("#edit-dialog").data('action') + " User");
        },
        buttons: {
            "Save": function () {
                var uid = $("#edit-dialog").data('uid');
                var action = $("#edit-dialog").data('action');

                var dataObject = {
                    email: $('#email').val(),
                    firstname: $('#firstName').val(),
                    lastname: $('#lastName').val(),
                    department_id:  $('#department_id').val(),
                    persNo: $('#persNo').val(),
                    shortcut: $('#shortcut').val(),
                    role: $("#role").val()
                };

                $.nette.ajax({
                    type: 'GET',
                    url: "?do=renderUser" + action,
                    data: {
                        "user_pers_id": uid,
                        "user_data": dataObject
                    },
                    success: function (data) {
                        // Add/Edit Success
                        $('.' + uid).parent().parent().find("td").each(function () {
                            $(this).animate({
                                borderBottomColor: '#e8e8e8',
                                borderBottomWidth: '1px',
                                borderTopColor: '#e8e8e8',
                                borderTopWidth: '1px'
                            }, 150)
                        });
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert('An error occurred... Look at the console (F12 or Ctrl+Shift+I, Console tab) for more information!');

                        $('#result').html('<p>status code: ' + jqXHR.status + '</p><p>errorThrown: ' + errorThrown + '</p><p>jqXHR.responseText:</p><div>' + jqXHR.responseText + '</div>');
                        console.log('jqXHR:');
                        console.log(jqXHR);
                        console.log('textStatus:');
                        console.log(textStatus);
                        console.log('errorThrown:');
                        console.log(errorThrown);
                    }
                });
                $(this).dialog("close");
            },
            Cancel: function () {
                var uid = $("#edit-dialog").data('uid');

                $('.' + uid).parent().parent().find("td").each(function () {
                    $(this).animate({
                        borderBottomColor: '#e8e8e8',
                        borderBottomWidth: '1px',
                        borderTopColor: '#e8e8e8',
                        borderTopWidth: '1px'
                    }, 150)
                });

                $(this).dialog("close");
            }
        }
    });

    $("#delete-dialog").dialog({
        autoOpen: false,
        title: "Delete User",
        resizable: false,
        draggable: false,
        modal: true,
        width: 350,
        buttons: {
            "Delete User": function () {
                var uid = $("#delete-dialog").data('uid');

                $.nette.ajax({
                    type: 'GET',
                    url: "?do=renderUserDelete",
                    data: {
                        "user_pers_id": uid
                    },
                    success: function (data) {
                        // Deleted animate
                        //alert("Uživatel byl smazán " + uid);
                        $('.' + uid).parent().parent().fadeOut(1200, function () {
                            $('.' + uid).parent().parent().remove();
                        });
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert('An error occurred... Look at the console (F12 or Ctrl+Shift+I, Console tab) for more information!');

                        $('#result').html('<p>status code: ' + jqXHR.status + '</p><p>errorThrown: ' + errorThrown + '</p><p>jqXHR.responseText:</p><div>' + jqXHR.responseText + '</div>');
                        console.log('jqXHR:');
                        console.log(jqXHR);
                        console.log('textStatus:');
                        console.log(textStatus);
                        console.log('errorThrown:');
                        console.log(errorThrown);
                    }
                });
                $(this).dialog("close");
            },
            Cancel: function () {
                var uid = $("#delete-dialog").data('uid');

                $('.' + uid).parent().parent().find("td").each(function () {
                    $(this).animate({
                        borderBottomColor: '#e8e8e8',
                        borderBottomWidth: '1px',
                        borderTopColor: '#e8e8e8',
                        borderTopWidth: '1px'
                    }, 150)
                });
                $(this).dialog("close");
            }
        }
    });

    $("#create-user").button().on("click", function () {
        $("#edit-dialog").data('action', 'Add').dialog("open");

        // Set to default values
        $('#firstName').val('');
        $('#lastName').val('');
        $('#email').val('');
        $('#persNo').val('');
        $("#role").val('user').find("option[value=user]").attr('selected', true);
    });
});

Tabulka se vykreslí jak má, ale nefungují akce

$(function () {
    $("img#edit-btn").click(function () {
        var id = $(this).attr('class');
        $('.' + id).parent().parent().find("td").each(function () {
            $(this).animate({
                borderBottomColor: '#32CD32',
                borderBottomWidth: '3px',
                borderTopColor: '#32CD32',
                borderTopWidth: '3px'
            }, 150)
        });
        $("#edit-dialog").data('uid', id).data('action', 'Edit').load(preLoad(id)).dialog("open");
    });

    $("img#delete-btn").click(function () {
        var id = $(this).attr('class');
        $('#delete_user_id').text(id);
        $('.' + id).parent().parent().find("td").each(function () {
            $(this).animate({
                borderBottomColor: '#FA8072',
                borderBottomWidth: '3px',
                borderTopColor: '#FA8072',
                borderTopWidth: '3px'
            }, 150)
        });
        $("#delete-dialog").data('uid', id).dialog("open");
    });
});

Editoval Joacim (14. 4. 2015 16:53)

akadlec

jednoduchá odpověď již milionkrát zde probíraná, zmizí ti eventy z tlačítek co tam dáváš .click() apod. Buď je nabinduj dynamicky a nebo při každem překreslení v nějaké success metodě…

Joacim

No já jsem to nikde nenašel (asi neumím hledat), každopádně díky za radu už mi to funguje jak má stačilo upravit JS

$(document).on("click", "img#edit-btn", function () {
	// . . . .
});

$(document).on("click", "img#delete-btn", function () {
	// . . . .
});

akadlec

což není příliš štastné řešení protože nutíš JS naslouchat nad celým dokumentem, ale pokud tam toho nemáš moc tak by to nemuselo extrémně vadit.

Joacim

pro každý presenter mám i svůj JS file, který si načítám a je v něm jen logika pro již zmíněný presenter (toto používám jen v Setupu pro administraci, lidí, oddělení atd)