2

I've got a nestable list with a form on the top in order to add rows through ajax, without refreshing the page. The red cross is a delete button to remove each row.

Here is a visual :

enter image description here

And a part of the HTML/PHP nestable :

<div class="dd" id="users-levels">
    <ol class="dd-list">
        <?php
        $req = $pdo->prepare('SELECT * FROM levels ORDER BY position ASC, creation_time DESC');
        $req->execute();
        while ($row = $req->fetch()) {
            ?>
            <li class="dd-item" data-id="<?=$row['level_id']?>" id="<?=$row['level_id']?>">
                <div class="dd-handle"><span class="pull-right"><a class="button-delete text-danger" id="<?=$row['level_id']?>"><i class="fa fa-close"></i></a></span><?=$row['name']?></div>
            </li>
            <?php
        }
        $req->closeCursor();
        ?>
    </ol>
</div>

And the JQUERY part :

$('#form-parameters-users-levels-add').submit(function (e) {
    e.preventDefault();
    var name = $('#form-parameters-users-levels-add input[name="name"]').val();

    var buttonAdd = $('#form-parameters-users-levels-add .button-add');
    var buttonAddContent = buttonAdd.html();
    buttonAdd.attr('disabled', true);
    buttonAdd.html('<i class="fa fa-spinner fa-spin"></i>');
    $.post(location.protocol + '//' + location.hostname + '/ajax/parameters.php?action=users_levels_create', $('#form-parameters-users-levels-add').serialize(), function(data) {
        var obj = $.parseJSON(data);
        if (obj['error']) {
            if (obj['message']) {
                alert(obj['message']);
            }
        } else {
            $('#form-parameters-users-levels-add')[0].reset();
            $('#users-levels ol.dd-list').prepend('<li class="dd-item" data-id="' + obj['level_id'] + '" id="' + obj['level_id'] + '"><div class="dd-handle"><span class="pull-right"><a class="button-delete text-danger" id="' + obj['level_id'] + '"><i class="fa fa-close"></i></a></span>' + obj['name'] + '</div></li>');
        }
        buttonAdd.removeAttr('disabled');
        buttonAdd.html(buttonAddContent);
    });
    return false;
});

I've although added a script to prevent default action when you click on the delete button because of the nestable functionnality, outside the $(document).ready(function() :

// mousedown prevent nestable click
$('.dd a').on('mousedown', function(event) {
    event.preventDefault();
    return false;
});

So, from here, if you want to delete existing strings, you click on the delete button then the row is removed. But if you enter a new string and add it to the database through Ajax then click on the delete button, the mousedown prevent nestable click function has no effect.

My JQUERY has no effect on new dynamic rows. Do you know why ?

Xavier C.
  • 1,809
  • 4
  • 24
  • 40
  • elements have to exist when you bind events to them, otherwise can delegate events or bind again to new elements – charlietfl Feb 24 '15 at 20:03
  • Ok I see. Maybe it's easier to refresh the page after each add. – Xavier C. Feb 24 '15 at 20:15
  • No, just use `on()` to delegate. See : http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – charlietfl Feb 24 '15 at 20:23
  • Use $(document).on('.dd a','mousedown', function(event)){ event.preventDefault(); return false;}); to create event on elements that are not created yet. – Roy Bogado Aug 22 '17 at 08:09

0 Answers0